Headless commerce with Shopify Hydrogen and Vite
summary
Hydrogen is a React-based, commerce-first framework built on Vite that ships server-rendered HTML via React Server Components to cut client JS and support streaming; deployed to edge runtimes like Oxygen it streams responses, performs subrequests to Shopify APIs, and exposes configurable subrequest and full-page caching. It ships unstyled UI primitives (hydrogen UI, alpha) for carts and 3D models, auto-discovers routes with import.meta.glob via Vite virtual files, and uses a secondary Vite build to emit a client-component loader for hydration.
AI-written summary · about
chapters (9)
- 0:00Intro
- 0:28Hydrogen: Why?
- 1:37Hydrogen: Architecture
- 3:38React Server Components
- 8:10Hydrogen: Code Example
- 10:45Hydrogen UI & Templates
- 12:03Finding Routes
- 14:36Vite in Hydrogen Extensibility
- 16:07Viteception
related talks
17mLightning Fast E-Commerce: Remix your Shop with Shopify Hydrogen
26mBuilding High-Performance Online Stores with Shopify Hydrogen and Remix
07mHydrogen:An Early Look at Server Components in the Wild
31mRethinking composable E-Commerce Frontends
21mHeadless eCommerce: Shopify + NextJs = ❤️
31mA sneak peak into the future headless eCommerce
01h 02mA sneak peek into the future headless eCommerce
43mMake Quick Angular,React or Vue Apps With Vite and JHipster Lite