Shopify Hydrogen: A Guide for Forward-Thinking eCommerce Businesses

Shopify Hydrogen is a merchant’s dream! If you’re looking for more control, better server-side execution, as well as cutting edge front-end functionality, the Shopify Hydrogen framework will effortlessly take care of those needs along with many others.

Read on to learn more about Hydrogen and how it’s revolutionising the eCommerce space.

The Hydrogen framework provides a best practice approach for creating custom websites. It features a Vite plugin, which provides server-side rendering (SSR), server and client component code transformations, as well as hydration middleware. Current Vite SSR implementations closely resemble the SSR and hydration middleware.

Here are the main components that make up the Shopify Hydrogen framework.

React Server Components
Hydrogen is founded on React Server Components. This approach provides an opinionated data-fetching and rendering workflow for React applications. React Server Components enable server-client collaboration, allowing you to render Hydrogen apps.

React Server Components features the types of components outlined below.

• Server – Data-fetching and content-rendering components on the server.
• Client – Browser-rendering or server-rendering components that use SSR.
• Shared – Server-rendering and client-rendering components.

React Server Components separate client and server logic, which delivers many benefits for Hydrogen apps such as server-only code with either no impact on bundle size or reduces bundle sizes and server-side access to private and custom server-side data sources. The advantages also extend to smooth integration, including a well-defined protocol for client and server components, and progressive hydration and streaming rendering. In addition to this, subtree and component-level updates that preserve client state, as well as client and server code sharing are possible.

Caching is a key component that ensures an excellent shopping experience. When combined with streaming server-side rendering, it displays the latest data and helps shoppers get the fastest possible response.

Shopify Hydrogen offers two mechanisms for caching within apps — sub-request caching and full-page caching.

Sub-request caching is a great way to keep pages loading quickly for the end user. This is because it’s common to make one or multiple sub-requests to Shopify or third-party data sources within server components when rendering a page in a Hydrogen application.

Full-page caching is great for marketing pages, blog content, and similar pages that don’t have personalised, dynamic data. That’s because above and beyond sub-request caching, it helps to cache the whole page response at the network edge as well as in the browser.

Page server components are part of the Hydrogen framework, which uses file-based routing. When you add any pages to the src/pages directory, the app automatically registers them as routes.

The quick start Hydrogen environment uses the Tailwind CSS utility library for styling. It’s possible to build using the Tailwind library or through styling methods like vanilla CSS or a third-party CSS-in-JS framework. Vite, which provides native support for various CSS injection methods, powers Hydrogen.

The Tailwind CSS framework is made up of classes, which give developers guardrails for a limited set of spacing, responsive layout utilities, and colour. It features styling components, human-readable class names, customisable classes, and autocompleted class names.

When building Hydrogen apps using React Server Components, you’ll most likely need to update state on the server. Client-server sharing of state information is key to tasks like page routing.

The state object is an important part of React Server Components. With Hydrogen’s useServerState() hook and a setServerState() helper function, components can paginate within collections, programmatically switch routes, or do anything needing new data from the server.

The Hydrogen framework utilises file-based routing. You can add all components to the src/pages directory for registration as routes in App.server.jsx. Filenames such as [handle] that feature brackets, are converted to a route parameter called :handle.

Commonly referred to as secrets as well, environmental variables enable you to load your app with different values based on the running environment. There are public variables and private variables that can be stored in .env files in your project.

Public variables with a PUBLIC_ prefix in the .env files are available in the browser and are considered public. You can access them in any component through Vite’s import.meta.env.

Private variables without a PUBLIC_ prefix in the .env files are considered a server runtime variable in non-production environments. You can only access them from server components using the global 0xygen.env object and they’re not exposed to the browser. In production, on the other hand, no .env files are used for loading runtime variables by default. Loading variables vary according to the hosting runtime you use instead.

Having static assets like text documents and images that aren’t hosted anywhere else at your disposal is useful for building custom storefronts. These static assets are files that your app downloads from a server. Vite serves static sites at the / root path. For instance, you can create a public/icon.png file and refer to it as /icon.png in your code.

Static assets can go in the /public directory when the following applies:

• The Shopify database doesn’t serve the static asset.
• robot.txt doesn’t reference the static asset.
• You want to avoid importing an asset to a JavaScript file first before getting its URL.

Hydrogen SEO features <Seo> server and client components. It also has a <Seo> client component to output the SEO-related tags in your document head and override default values on the Home page, Default page, Collection page, Product page, and Pages page

If you add or remove pages, Hydrogen’s XML sitemap in the starter template will automatically update within a day. Unpublishing a product will also automatically remove it from the sitemap in the same fashion.

Additionally, Hydrogen facilitates SEO by inspecting the user-agent for all requests, and buffering the response to fully render it on the server-side. You can add the ?\_bot query parameter at the end of a webpage URL to mirror SEO robots and show full page content from server render for initial render.

It’s one thing to build a custom storefront using Shopify Hydrogen but seamlessly running it at scale and servicing a large volume of traffic is a completely different operational ball game. This is where Oxygen helps! It’s a new Shopify hosted V8 Isolate-powered JavaScript worker runtime that leverages all platform, operational, and security knowledge capabilities.

With Shopify Hydrogen, the development process benefits from ready-to-use components, utilities, and hooks built around Shopify data models. These data models do the heavy lifting and provide the foundations for cutting edge eCommerce.

As trusted Shopify development partners, we’re here to break down everything you need to know about Hydrogen and how it can take your business to the next level. Get in touch with one of our experts today to learn more.

Get in Touch