Progressive Server-Side Rendering

Web Development
#1

Progressive Server-Side Rendering — the key to a faster web page is the technique of sequentially rendering parts of the web page on the server-side and send it to the client in portions without waiting for the entire page to be rendered.”

Progressive Server-Side Rendering (PSSR) is based on the concept of HTML streaming. PSSR breaks the pages into meaningful components using code splitting. Those pieces of the page are controlled by a separate script, and now we have the opportunity to hydrate them independently based on some priority that we’ve determined earlier.

Let’s take a quick look at how the PSSR works:

  1. The browser requests the server for the HTML.
  2. The server makes API requests and renders the critical content first, and sends it to the client.
  3. The browser parses the HTML and paints it on the screen.
  4. The server renders the non-critical content and streams it to the browser.
  5. The browser then parses and paints the non-critical content.
  6. In the meantime, JS bundles are downloaded and executed in the background, and the browser hydrates interactivity to DOM elements.

PSSR improves your web app’s performance by fetching & rendering the page components in a parallel & prioritized manner. This approach is known as the Progressive Hydration method.

This Progressive hydration method leads to:

  • Defer hydration of a component until it comes into view or is needed for user interaction.
  • Load content on user interaction(scroll) — a lot faster than CSR and SSR
  • Testing shows this can improve TTI.
  • A better user experience even in the slow networks.

In addition to that, you can use the critical rendering path approach with PSSR to optimize your application’s performance even more.