Rehydration, or more simply ‘hydration,’ is a term that often comes up when we look at SPAs and server-side rendering.
Hydration does not, in essence, affect SEO but is an essential step for serving rendered pages to the user.
There are different types of hydration that can be used.
Different tech stacks and frameworks may already support different types of hydration.
What Is Rehydration?
Put simply, rehydration allows a web application or page to reach its interactive state after it is rendered on the server side.
This may not matter to search engines but is imperative to get right if the website serves rendered, interactive components to users.
This process is used in single-page applications (SPAs) alongside server-side rendering, which allows for a quicker First Contentful Paint (FCP), and client-side content is “hydrated” for the Largest Contentful Paint (LCP).
As an overarching term, hydration, in this instance, means that all components on the webpage are initialized.
This can lead to better Core Web Vital results and inherently requires less effort from Googlebot to render the webpage. Moreover, search engines can index pages quicker, as this does not have to pass through Google’s WRS (Web Rendering Service).
Progressive Rehydration Explained
Progressive rehydration optimizes the rendering and interactivity of individual components, and involves both server-side rendering and client-side rendering (CSR) as pieces of a page are booted over time.
This allows for components that might not be essential to be initialized later, making the total loading time shorter.
Progressive rehydration also helps avoid common SSR pitfalls, such as where a server-rendered Document Object Model (DOM) tree is destroyed and immediately rebuilt.
What Is Partial Rehydration?
The technique combines both SSR and CSR.
Partial rehydration is seen as a powerful technique for performance-optimizing SPAs for loading performance and efficiency.
That said, it does have its issues, as it can present challenges for caching and client-side navigation.
A Look At Trisomorphic Rendering
Trisomorphic rendering is less common across both development and technical SEO communities.
The process involves rendering SPAs across server and client sides, as well as on a service worker to render HTML for the use of navigations.
The process uses a mix of streaming server-side rendering, which renders initial navigations, and the service worker renders HTML for navigations. The streaming server-side rendering ensures the necessary content is sent to search engines.
In the world of development, it means that cached components and templates can be kept up-to-date and that SPA-style navigations for rendering new views in the same session can be enabled.
When Is It Best To Use Rehydration?
Rehydration is a necessity for websites that need to be highly interactive, such as single-page applications, because it allows for faster initial load times and improved user experience.
Picking a specific type of hydration requires knowledge of how your tech stack works and what works best for your website.
There are also alternatives to hydration, such as resumability, which differs on where the code executes and when it executes.
When the client sends a request to the server, the server first rebuilds the application and serializes it into HTML. The HTML is then returned to the client.
The client then resumes the application from the point the server serialized it; then when a user interacts with a page element, only that event handler is requested and executed on demand.
Resumability, and resumable frameworks, are not new. Google has used a resumable framework internally named Wiz for Search and Photos products, and eBay uses a framework called Marko which has added resumability as a feature.
- Server-Side Rendering: The Pros & Cons To Consider For SEO
- How (& Why) Search Engines Render Pages
- How Search Engines Work
Featured Image: UnderhilStudio/Shutterstock