Gatsby 5 is coming soon– the Alpha is live, and we’ve touched on a bunch of new features in Gatsby 5 in Tuesday’s Update Week post. But now I’d like to focus on one feature in particular: partial hydration. We’ll go over what it is, how it is implemented in Gatsby 5, the benefits of partial hydration, and look into how to use it.
What is Partial Hydration?
Partial hydration works with the concept that only some of your application’s html will need JavaScript code. We’ll call them client components, because they have interactivity on the client. The actual implementation of the feature means that the only code shipped is what’s needed for that page’s client components, which not only decreases the size of code bundles, but also decreases the time until the page is interactive by shipping less code to be initialized. This can increase Lighthouse scores and definitely has a positive impact on user experience.
How is Partial Hydration Implemented in Gatsby 5?
Partial hydration in Gatsby 5 is implemented using React Server Components (RSC).” All your pages and components are static by default, and you have the ability to tag interactive components that should be loaded only on the client. Gatsby’s implementation of RSC follows the latest draft specification and closely tracks upstream changes from React. See the RFC for more details and feedback from others in the community!
How do you use Partial Hydration?
To get started with partial hydration, you can go two routes: you can clone the gatsby-partial-hydration-starter, or you can follow the setup instructions in the RFC with an existing project. Once you’ve picked your setup, you’ll want to mark your interactive components with the string “client export” and you’ll start to see partial hydration at work.
Just to show an example– here’s a look at the demo in action.
What are the benefits of Partial Hydration?
The benefits of a properly configured partial hydration setup include better user experience and increased page load speed as shown by metrics such as lighthouse scores. The better user experience comes from a reduced downloaded bundle size and a faster JavaScript initialization, leading to a lower time to interactivity. In other words, the server ships less code to the browser, which both allows it to download everything faster, but execute faster due to fewer instructions to process.
The increased page load speed comes from a smaller JavaScript bundle to download and less code to initialize. This affects the Total Blocking Time (TBT) metric of the lighthouse score by addressing a key issue addressed in the documentation: “Unnecessary JavaScript loading, parsing, or execution.” Partial hydration addresses this by bundling not only less JavaScript, but by adding only what needs to execute.
—
In conclusion, partial hydration in Gatsby 5 is a great way to get a better experience and performance out of your Gatsby application. It’s implemented to React community standards, and will help you ship less JavaScript and faster interactivity. To learn more about partial hydration with Gatsby 5, check out the RFC.