Progressive Hydration

A server rendered application uses the server to generate the HTML for the current navigation. Once the server has completed generating the HTML contents, which also contains the necessary CSS and JSON data to display the static UI correctly, it sends the data down to the client. Since the server generated the markup for us, the client can quickly parse this and display it on the screen, which produces a fast First Contentful Paint!

Although server rendering provides a faster First Contentful Paint, it doesn't always provide a faster Time To Interactive. The necessary JavaScript in order to be able to interact with our website hasn't been loaded yet. Buttons may look interactive, but they aren't interactive (yet). The handlers will only get attached once the JavaScript bundle has been loaded and processed. This process is called hydration: React checks the current DOM nodes, and hydrates the nodes with the corresponding JavaScript.

When to Use

• Use this when your SSR application has non-critical sections that don't need immediate interactivity
• This is helpful for reducing the JavaScript required to make the page interactive on initial load

When NOT to Use

• When the entire page is interactive and all components need immediate hydration
• When the complexity of managing hydration boundaries outweighs the performance benefit
• For small pages where the total JavaScript is already minimal and hydration is fast

Instructions