If you have ever worked with SSR applications you might have heard the term “Hydration” . If it got you confused also . We will try sort it for once and all .
In Computer Science Hydration means the process of loading an object with data. Pretty simple…uh .
SSR + Hydration … ( The Real Deal )
With SSR application when a user requests for a route the server generates the html for the request.Along with required CSS and JSON required for UI .So unlike client side rendered SPA , the UI is pre-rendered.
The benefits of SSR are pretty practical :
- Pre-rendering the Html helps the seo crawlers to parse the content of the site .
- Faster First Contentful Paint
The server only renders the Html , leaving behind necessary javascript. As a result the application is not interactive till the Js is loaded and executed.
But once the JavaScript get loaded and executed . the event handlers will get attached and the application will become interactive . This process is Hydration in action .
One Pitfall of this process is that as the hydration takes some time the user gets a non interactive UI . This period is called uncanny period. Another Jargon uhhhh….