ReactJS(NextJs) Rendering Pattern ~Streaming with Suspense~

SSR mechanism and Limitations

SSR Mechanism

1. Fetching data on server
   Firstly, data retrieval is necessary because each request requires a different response.

2. Generating a HTML
   HTML is generated with the fetched data.

3. Loading on client
   The HTML, CSS and JavaScript are sent from the server.

4. Hydration by React
   This involves adding JavaScript code, such as EventHandlers, to a static HTML. This makes interactive features such as useEffect and useState function.

SSR Limitations
A crucial issue is that all executions run sequentially. This process is required every time a page is updated.

For example, consider the following page:

• A section of recommended products (needs to fetch data). A footer (does not need to fetch data).

On this page, you have to wait for the static component, such as the footer, to be re-rendered until the next data fetch is complete.

Solution by Streaming

You can address the issue of SSR in Next.js through parallel execution.
This means that components that don't require data render before those that do.

You can separate these components using the Suspense feature.

<Suspense fallback={<LoadingComponent />}>
  <DynamicComponent />
</Suspense>

・Without Suspense: The page is blocked until data is fetched.

・With Suspense: The static component is rendered first, followed by the dynamic components.