Server props
As you build your Hydrogen app with React Server Components, you might need to update props on the server. Sharing data between the client and server is important for common tasks, such as page routing.
This guide describes how to manage server props during your development process.
How server props work
Anchor link to section titled "How server props work"Server props are props that are passed to your root server component route. Hydrogen provides a useServerProps hook with a setServerProps helper function, which allows you to re-render the server component with new props. This is useful to paginate within collections, switch product variants, or do anything that requires new data from the server.
For example, you can take geo-location co-ordinates and set them as server props to provide a new hydrated experience for the current location:
Whenever you modify the props with setServerProps(), Hydrogen automatically makes a hydration request to the server component. Your app tree is updated based on the result of that hydration request.
The following example shows a page that queries a specific product ID based on server props:
When the user navigates to a new page in your app, the server props will reset. This is important because if the user navigates to another product, then the selected variant of the previous product shouldn't apply to the new product page.
Related hooks
Anchor link to section titled "Related hooks"- Learn about React Server Components, an opinionated data-fetching and rendering workflow for React apps.
- Learn how to work with React Server Components.