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?
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?