TechPrufer
Get started
Vercel
Vercel logoVercel · Feature trail

Hydrogen Framework Rebuild

8 posts · Jan 2023 – Aug 2026

What this trail covers

Vercel and Shopify are collaborating to rebuild Hydrogen from the ground up, making it open-source and runtime-agnostic. The new version will feature a three-layer strategy: core (centralized Shopify API bindings), client (reusable UI components like cart management), and server (integrating with modern frameworks like Next.js, Nuxt, and SvelteKit for full-stack capabilities). This aims to improve portability, reduce boilerplate code, and leverage existing framework features for performance and developer experience.

All Vercel trails
  1. Shopify and Vercel are rebuilding Hydrogen for faster storefrontsThis talk announces the partnership between Shopify and Vercel to rebuild the Hydrogen framework. The key technical contributions are making Hydrogen open-source and runtime-agnostic, allowing developers to use frameworks like Next.js, Nuxt, and Svelte. It introduces a three-layer strategy (core, client, server) to provide best practices like type-safe API clients and integrated cart state out-of-the-box, reducing the need for custom glue code.
  2. Vercel and Shopify are rebuilding HydrogenThis post details the strategic shift in Hydrogen's architecture, emphasizing its new three-layer strategy (core, client, server) to achieve runtime agnosticism and improved portability. It highlights the centralization of Shopify API bindings in the 'core' layer, the provision of reusable UI components like cart management in the 'client' layer (with React examples), and the integration with modern full-stack frameworks like Next.js, Nuxt, and SvelteKit in the 'server' layer. It also introduces the concept of 'skills' for guidance on framework integration and provides an example of enabling i18n in a Next.js template, detailing specific technical considerations and trade-offs for `cacheComponents: true`.
  3. Migrating Grep from Create React App to Next.jsThis post details the migration of Grep from Create React App to Next.js, leveraging React Server Components and advanced data fetching strategies to improve performance and maintainability. Key improvements include optimizing the search input experience across different routes, implementing server-side initial data fetching with hydration, and using client-side incremental fetching with debouncing and optimistic UI updates to prevent stale results. The migration also addresses mobile-specific challenges with scroll stabilization.
  4. Common mistakes with the Next.js App Router and how to fix themThis post details common mistakes when building with the Next.js App Router, including incorrect usage of Route Handlers with Server Components, static vs. dynamic Route Handlers, using Server Actions with Client Components, proper placement of Suspense boundaries, accessing the incoming request object in Server Components, and correctly integrating Context Providers with Client Components. It emphasizes direct logic calls over network hops for Server Components, explains Route Handler caching behavior, promotes Server Actions for client-side data mutations, clarifies Suspense boundary placement, highlights specific functions for accessing request details in Server Components, and guides on creating Client Component providers for context consumption.
  5. How Whop improved their Real Experience Score by 200% with the Next.js App Router | Customers | VercelThis post details Whop's migration from Ruby on Rails to Next.js, specifically adopting the App Router for enhanced page speed and developer experience. They utilized Edge Middleware for incremental migration, enabling traffic routing between App Router and Pages Router projects. The adoption of React Server Components facilitated a more cohesive developer experience by bridging frontend and backend within a single framework, leading to significant improvements in Real Experience Score (RES) and the percentage of Good URLs.
  7. Sell globally with a Next.js + Shopify siteThis post details how KidSuper, a streetwear label, migrated from a Shopify-managed storefront to a headless architecture using Next.js and Vercel. It highlights the benefits of Next.js for flexibility and scalability, enabling the team to build sites that reflect the brand's creativity. The post emphasizes Vercel's zero-configuration deployments and preview deployments as key enablers for rapid iteration and collaboration, allowing the KidSuper team to quickly spin up interactive sites and share them with stakeholders.