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 workAnchor link to section titled "How server props work"
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 use geolocation co-ordinates 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.