1. What is Hydration?

Hydration is the process of taking a pre-rendered HTML page sent to the client
and making it interactive by attaching event listeners,
usually after rebuilding framework and app state on the client

2. How does Hydration work? - in SSR

How does Hydration work?
  1. first the client sends a get request to the server
  2. the server executes all app logic
  3. in order to render the complete HTML page
  4. which is sent back to the client
  5. the client renders the HTML page
  6. and sends a request for the JavaScript bundle
  7. once it receives the JavaScript bundle
  8. the client executes all app logic again
  9. so as to hydrate the page

3. What are the Pros and Cons of Hydration?


Pros:

  • enable interactive client-side apps rendered on the server
  • quick First Paint (FP) and First Contentful Paint (FCP)

Cons:

  • execute all app logic twice
    • once on the server and once on the client
  • uncanny valley (fast First Contentful Paint, but slow Time To Interactive)
    • page looks ready, but isn't (no event handlers attached)
  • JS bundle bigger than with just Client-Side Rendering (CSR)
    • as now it needs to do both hydration and CSR

4. When should you use Hydration?

  • when you want to have interactive client-side apps rendered on the server

Useful for e-commerce, social media and big content websites

✳️
see also Progressive Hydration, Partial Hydration, Resumability and React Server Components

Resources

Why Efficient Hydration in JavaScript Frameworks is so Challenging
Hydration is the name given to the process in JavaScript frameworks to initializing the page in the…
Conquering JavaScript Hydration
That is an ambitious title for an article. An ambitious goal in general. Hydration, the process of…
Hydration is Pure Overhead
Why hydration is a workaround, not the solution.
Don’t blame the developer for what the frameworks did!
While some think it’s fun to blame developers for issues they’re not responsible for, we thought we’d clear the air about a complaint that keeps popping up. Site speed.
Our Current Frameworks are O(n); We Need O(1)
As the complexity of applications increases, the amount of JavaScript downloaded increases (on a typical framework). The only way we can continue building more complex web applications in the future is to lazy load on interaction, not on initial load.
The Qase for Qwik: Love At First TTI
The reasons why you should be looking at Qwik if you care about performant web apps.
Resumability vs Hydration
Resumability is a faster alternative to Hydration. At first glance, it may seem like resumability and Hydration are the same. After all, both bring interactivity to your page. Defining Hydration to be just making a page interactive is so broad as it fails to be useful as it includes non-server-rende…
<script>: The Script element - HTML: HyperText Markup Language | MDN
The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL’s GLSL shader programming language and JSON.
Critical rendering path - Web performance | MDN
The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes the Document Object Model (DOM), CSS Object Model…
Render Performance Optimization With React - Adaptive Financial Consulting
60 frames per second (fps), this number not only represents the refresh rate of a typical pc monitor, but also…
Application Holotypes: A Guide to Architecture Decisions - JASON Format
Client-Side Rendering | JavaScript Patterns
Website created for the FrontendMasters course on JavaScript Patterns by Lydia Hallie