Hydration is the process of attaching JavaScript functionality to server-rendered HTML, making the HTML interactive on the client-side.
Popular frameworks like Next.js use certain hydration techniques by default.
While hydration can complement server-side rendering (SSR) capabilities, it can introduce performance challenges:
- Increased document size: Some frameworks serialize state into the HTML source as JSON, bloating the initial payload and even duplicating data.
In addition, the inlined serialized state carries a parse and execution cost, as discussed earlier. - Interactivity delays: Users may experience a frustrating period where the page is visible but not yet interactive.
The larger the hydration payload, the longer this delay is.
This is sometimes referred to as the uncanny valley. - Wasteful rebuilding: Some JavaScript frameworks offering SSR functionality effectively lead to the DOM being built twice – once on the server and again on the client during hydration.
This redundancy can waste resources and slow down the time to interactivity.
You should always consider the impact of popular JavaScript frameworks and libraries on performance.
The abundance of resources, tutorials, and starter kits for popular frameworks can sometimes lead developers to choose them without fully considering the performance implications.
For some web developers, creating a website with a JavaScript framework is the default choice, no matter the use case.
Framework popularity does not always translate to better UX, so you must balance developer ergonomics, maintainability, and user experience.
Debugbear’s HTML Size Analyzer is particularly useful as it breaks down the size of the HTML document, showing the size of the initial HTML payload and the size of the hydration payload.
The previous screenshot shows that the large HTML document is largely due to:
- 50kb of paragraph text (the content the user sees first)
- 50kb of JSON data (the hydration payload)
It’s not a coincidence that the JSON data is the same size as the paragraph text.
This is because the JSON data is a serialized version of the paragraph text.
This duplication is a common issue with hydration payloads.
