Netlify Docs

Contact

Hydrogen on Netlify

Hydrogen uses React and provides an SDK that enables you to build custom Shopify storefronts.

# Key features

These features provide important benefits for Hydrogen projects, including those built by and deployed with Netlify.

  • React Server Components and SSR with suspense. With Hydrogen’s default caching polices, React Server Components and SSR with suspense, you can progressively hydrate your app.
  • Vite developer environment. Hydrogen uses Vite to drive its developer environment, so you can expect fast builds.
  • Commerce components. With components tailored to commercial applications, you can tie into default hooks and utilities that adhere to best practices.

# Netlify integration

Hydrogen apps on Netlify work because of Netlify Edge Functions, which are currently in the beta stage.

To successfully deploy a Hydrogen app to Netlify, you need to first install and configure Netlify’s hydrogen-platform plugin. You can do this with a starter template or alter your current app’s configuration.

The hydrogen-platform plugin uses Netlify Edge Functions to deploy your app to Netlify Edge, bringing serverless capabilities closer to your site visitors.

# Edge Functions

Edge Functions are in BETA.

Edge Functions connect the Netlify platform and workflow with an open runtime standard at the network edge. This enables you to build fast, personalized web experiences with an ecosystem of development tools.

To get the latest support for Edge Functions in your Hydrogen site, use the latest starter template or incorporate the hydrogen-platform package into your code.

You can browse a full library of reference examples for different ways to use Edge Functions. For more details, check out the Edge Functions documentation.

# More resources

←