• Use this when your SSR application has non-critical sections that don't need immediate interactivity
• This is helpful for reducing the JavaScript required to make the page interactive on initial load

• Wrap non-critical components in

  <Suspense>

  boundaries with appropriate fallbacks
• Use

  React.lazy()

  with code-splitting to defer loading of below-the-fold or rarely-used components
• In React 18+, leverage selective hydration which automatically prioritizes user-interacted areas
• Use

  next/dynamic

  with

  { ssr: false }

  in Next.js for truly client-only widgets

1. Allows usage of SSR for all components.
2. Supports splitting of code into individual components or chunks.
3. Supports client side hydration of these chunks in a developer defined sequence.
4. Does not block user input on chunks that are already hydrated.
5. Allows usage of some sort of a loading indicator for chunks with deferred hydration.

lazy()

Suspense()

SuspenseList()

• Server Components. This will allow you to refetch components from the server and render them on the client as they stream in instead of waiting for the whole fetch to finish. Thus, the client's CPU is put to work even as we wait for the network fetch to finish.

1. pool-attendant-preact

   : A library that implements partial hydration with Preact x.

2. next-super-performance

   : A Next.js plugin that uses this library to improve client-side performance.

pool-attendant-preact

withHydration

import Teaser from "./teaser";
import { withHydration } from "next-super-performance";

const HydratedTeaser = withHydration(Teaser);

export default function Body() {
  return (
    <main>
      <Teaser column={1} />
      <HydratedTeaser column={2} />
      <HydratedTeaser column={3} />

      <Teaser column={1} />
      <Teaser column={2} />
      <Teaser column={3} />

      <Teaser column={1} />
      <Teaser column={2} />
      <Teaser column={3} />
    </main>
  );
}

HydratedTeaser

hydrate()

import { hydrate } from "next-super-performance";
import Teaser from "./components/teaser";

hydrate([Teaser]);

1. Promotes code-splitting: Code-splitting is an integral part of progressive hydration because chunks of code need to be created for individual components that are lazy-loaded.
2. Allows on-demand loading for infrequently used parts of the page: There may be components of the page that are mostly static, out of the viewport and/or not required very often. Such components are ideal candidates for lazy loading.
3. Reduces bundle size: Code-splitting automatically results in a reduction of bundle size. Less code to execute on load helps reduce the time between FCP and TTI.

Note (React 18+): Use

<Suspense>

with

lazy()

for Hydration Control

React 18's Concurrent Features now address the progressive hydration requirements: selective hydration on interaction means if the user tries to interact with a not-yet-hydrated part, React will prioritize hydrating that part—this is built-in.

A practical pattern is to wrap non-critical components in a

<Suspense fallback={...}>

. On the server, render a lightweight placeholder, and code-split the real component with

React.lazy

. For example:

js

const Comments = React.lazy(() => import('./Comments'));
// ...
<Suspense fallback={null}>
  <Comments {...props} />
</Suspense>

This streams a placeholder in the SSR output and doesn't block the rest of the page. The

Comments

component hydrates once its code is fetched. In Next.js, use

next/dynamic

with

{ ssr: false }

for truly client-only widgets, or Suspense for parts that can be temporarily left as loading.

• patterns.dev/react/progressive-hydration