So Wtf Is Hydration and Ssr

· 1 min read June 14, 2022


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 :

  1. Pre-rendering the Html helps the seo crawlers to parse the content of the site .
  2. 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….

Some Thing to say ?