Server Side Rendering (SSR) renders the React components into HTML on the server and sends the rendered HTML to the client. This prevents users from seeing a blank page while waiting for the React JavaScript bundle to be downloaded and run. It is also great for SEO and devices with weak computing power or slow networks.
SSR sends the JavaScript bundle after the initial HTML, and the client hydrates the HTML (attaches event handlers, etc.) once the JS bundle is downloaded.
With Server Components, Suspense and React.lazy, SSR can selectively render only some of the React components into HTM on the server and respond to the request as soon as it can, by delaying the rendering of complex, slow or secondary components and streaming the HTML after render is complete. At the same time, the client shows a spinner for those delayed components and hydrates the rest of the page simultaneously. By setting the appropriate Suspense boundaries and using React.lazy to split code deliberately, React can dynamically change hydration order based on user interactions to improve the performance even further.
<Suspense>
<Suspense> lets users break down a complex app into independent units that can be run independently in parallel to avoid the sequential steps in SSR for the entire app:
- Fetch data on the server for the entire app
- The server renders the app to HTML and sends it in the response
- The client loads the JavaScript bundle for the entire app
- Hydration on the client-side