react-hydration-provider
react-hydration-provider
NPM package for easily controlling what your app renders before and after app hydration.
Published / By Travis Wimer
Last updated
About this Project
react-hydration-provider is an NPM package that simplifies the process of dealing with "hydration" mismatches in React apps.
Hydration is the name for the process of starting with a pre-rendered HTML file and seamlessly initializing an identical React app. For this to work the HTML must exactly match what the app renders.
For this reason, it is sometimes necessary to remove dynamic/unpredictable content from the initial pre-hydration render to ensure that it matches the HTML from the server.
Currently React doesn't include any great method for determining whether an app has been hydrated.
react-hydration-provider solves this problem through the use of a React Context Provider that tracks the hydration status. Here is an example of how it works:
import { HydrationProvider, Server, Client } from "react-hydration-provider";
function App() {
return (
<HydrationProvider>
<main>
<Server>
<p>
This will only be rendered during html generation (SSR, SSG, etc) and the initial app hydration.
</p>
</Server>
<Client>
<p>This will be rendered after app hydration.</p>
<p>It can safely contain unreliable content, like this: {Math.random()}
</Client>
<p>This will always be rendered.</p>
</main>
</HydrationProvider>
);
}You can learn more about React hydration issues and react-hydration-provider in my blog post,
Easily Fix React Hydration Errors.
Tech Stack
- React - A declarative component-based frontend JavaScript framework.
- NPM - A package manager for Node.js.
- TypeScript - A strongly typed programming language that builds on JavaScript.
- Jest - A JavaScript testing framework.