In previous articles, we covered how SSR with hydration can improve user experience. React is able to (quickly) generate a tree on the server using the
renderToString method that the
However, this approach can lead to some performance issues due to some limitations with the current implementation.
Before the server-rendered HTML tree is able to get sent to the client, all components need to be ready. This means that components that may rely on an external API call or any process that could cause some delays, might end up blocking smaller components from being rendered quickly.
React 18 solves these problems by allowing us to combine streaming server-side rendering with a new approach to hydration: Selective Hydration!
Instead of using the
renderToString method that we covered earlier, we can now stream render HTML using the new
pipeToNodeStream method on the server.
This method, in combination with the
createRoot method and
Suspense, makes it possible to start streaming HTML without having to wait for the larger components to be ready. This means that we can lazy-load components when using SSR, which wasn’t (really) possible before!
This is a simplified example inspired by this codesandbox
Comments component, which earlier slowed down the tree generation and TTI, is now wrapped in
Suspense. This tells React to not let this component slow down the rest of the tree generation. Instead, React inserts the fallback components as the initially rendered HTML, and continues to generate the rest of the tree before it’s sent to the client.
In the meantime, we’re still fetching the external data that we need for the
Selective hydration makes it possible to already hydrate the components that were sent to the client, even before the
Comments component has been sent!
Once the data for the
Comments component is ready, React starts streaming the HTML for this component, as well as a small
<script> to replace the fallback loader.
React starts the hydration after the new HTML has been injected.
React 18 fixes some issues that people often encountered when using SSR with React.
Streaming rendering allows you to start streaming components as soon as they’re ready, without risking a slower FCP and TTI due to components that might take longer to generate on the server.