The Hydrogen framework uses a file-based routing system. This guide provides an introduction to how routing works in your Hydrogen storefront.
How routes workAnchor link to section titled "How routes work"
All components added to the
src/routes directory are registered as routes in
App.server.jsx. Any filenames with brackets, like
[handle], are converted to a route parameter called
The following example shows how each
*.server.jsx file maps to a different route in the Hydrogen app:
You have following components in your
The routes are registered in
App.server.jsx and Hydrogen converts
Built-in routesAnchor link to section titled "Built-in routes"
Hydrogen provides the following built-in routes:
/__health: A health check route that responds with a 200 status and no body. You can use this route within your infrastructure to verify that your app is healthy and able to respond to requests.
/__rsc: An internal route used to re-render server components. It's called by the Hydrogen frontend when the route changes, or when server props change. You should never need to manually request this route.
/__event: An internal route used to save client observability events. You should never need to manually request this route.
Custom routesAnchor link to section titled "Custom routes"
By default, Hydrogen uses a file-based routing system, but you can customize routes in
App.server.jsx using the following components:
API routes allow you to build your API in Hydrogen. Any server component within the
src/routes directory that exports an API function will become an API route. The following examples show some common use cases for implementing API routes.
The following example shows a "Hello world" implementation of an API route:
Learn how to work with API routes.
Props for creating custom experiencesAnchor link to section titled "Props for creating custom experiences"
Server components placed in the
src/routes directory receive the following special props that you can use to create custom experiences:
Each server component receives props, which includes custom versions of
response and any
serverProps that you have passed from the client.
Learn how to create custom experiences with props.
Hydrogen supports TypeScript out of the box. When building route components, you can use the provided TypeScript types to improve your developer experience:
Related components and hooksAnchor link to section titled "Related components and hooks"
- Learn how to perform common tasks for managing routes in Hydrogen.
- Learn about Hydrogen's configuration properties and how to change the location of the configuration file.
- Learn about how Hydrogen consumes data from different sources.
- Learn how to manage cache options for Hydrogen storefronts.
- Improve your app's loading performance with streaming SSR and Suspense.
- Learn how to manage your server props during your development process.