At the moment, server-side rendered React pages need to:

• fetch ALL the data on the server before sending any HTML to the page
• then wait for ALL the JavaScript to load on the client before hydrating the page
• and then wait for ALL components to hydrate before interacting with the page.

Each step in this process has to finish before the next one can start.

With React 18, we can make this process feel faster for your users by splitting the components in your layout into individual units which don’t need to wait for the rest of the page to fetch, load and hydrate.

This is achieved by

• the renderToPipeableStream method, which enables HTML to be sent to the page before ALL the data for the page has been fetched.
• wrapping individual units of your layout with <Suspense> lets them hydrate independently.

This talk will explain the current problems in server-side rendering and show and explain how React 18 aims to solve these.