Shopify Headless with Hydrogen: Is Plus Necessary?

You do not need Shopify Plus to use Shopify Hydrogen. Here are the key points:

Availability & Access

Hydrogen is available on all Shopify plans except the Starter plan. The framework and its hosting platform Oxygen are provided at no extra cost to eligible Shopify merchants.

Key Features Available to All Users

React-based headless commerce framework
Pre-built commerce components and hooks
Server-side rendering capabilities
Integration with Shopify's Storefront API
Deployment on Oxygen (Shopify's hosting platform)

Core Functionalities

Custom storefront development
Built-in performance optimization
Edge rendering capabilities
Integration with third-party apps
Push-to-deploy support with Oxygen

Development Requirements

While a specific Shopify plan tier isn't required, developers should have:

Working knowledge of React
Understanding of JavaScript
Familiarity with CSS and HTML
Experience with Node.js
Knowledge of GraphQL for API consumption

The primary consideration for implementing Hydrogen should be based on your business needs and technical capabilities rather than your Shopify plan level.

What are the main differences between Shopify Hydrogen and Shopify Oxygen

Here are the key differences between Shopify Hydrogen and Shopify Oxygen:

Hydrogen

React-based framework for building custom headless storefronts
Provides pre-built components and tools for frontend development
Handles the storefront's user interface and customer experience
Includes features like:
- Built-in commerce components
- Pre-built headless architecture
- Integration with Storefront API
- Development tools like Hot Module Replacement
- Tailwind CSS implementation

Oxygen

Global hosting platform specifically designed for Hydrogen storefronts
Manages server infrastructure and deployment
Key features include:
- Integrated with Shopify's global infrastructure (100+ server locations)
- Built-in caching and performance optimization
- Deployment environment management
- Environment variable handling
- CDN integration

Notable Limitations of Oxygen

Only allows hosting one Hydrogen build per store
Limited to Hydrogen-based projects only
Logs are stored for maximum 72 hours
No support for mono repo architecture

Availability

Both Hydrogen and Oxygen are available on all paid Shopify plans (Basic, Shopify, Advanced, and Plus) except the Starter plan. While Hydrogen can be hosted on other platforms like Vercel or Netlify, Oxygen is Shopify's native hosting solution that comes included with eligible Shopify subscriptions.

What are the advantages of using Shopify Oxygen over other hosting solutions like Netlify or Vercel

The key advantages of using Shopify Oxygen over other hosting solutions:

Cost Benefits

No additional hosting costs as it's included in your Shopify subscription plan
No separate charges for bandwidth or storage usage
More cost-effective compared to solutions like Vercel which can get expensive quickly

Integration & Performance

Seamless integration with Shopify's global infrastructure across 100+ server locations
Smart caching feature to accelerate page load speeds
Optimized specifically for eCommerce performance
Automatic scaling and load balancing for handling traffic spikes
Built-in CDN integration through Cloudflare

Development Experience

Simplified setup and deployment process
Multiple deployment environments for testing changes
Continuous deployment using GitHub integration
Minimal configuration required for setup

Limitations to Consider

Can only host one Hydrogen build per store
Limited to Hydrogen-based projects only
Logs are stored for maximum 72 hours
No support for mono repo architecture
Less technical flexibility compared to general-purpose hosting providers

While Oxygen may have some limitations, its tight integration with Shopify's ecosystem and cost-effectiveness make it an attractive option for merchants who want a streamlined hosting solution for their Hydrogen storefronts.

How does Shopify Oxygen's smart caching improve page load times

Full-Page Caching

Reduces load time for subsequent visits by serving cached content instead of executing the Hydrogen storefront worker
Automatically checks for cached versions of requested content
Serves stale content while refreshing in the background, ensuring continuous fast performance

Smart Caching Features

Implements built-in caching controls to handle complex information and minimize API calls
Integrates with Cloudflare's CDN for global content distribution
Automatically redirects visitors to the nearest server location to reduce latency

Caching Optimization

Uses "stale-while-revalidate" strategy to maintain fresh content without impacting performance
Provides configurable cache TTLs (Time To Live) and caching policies
Enables granular control over data freshness and revalidation strategies

Performance Benefits

Accelerates page load speeds through server-side caching
Optimizes delivery of frequently accessed pages and assets
Maintains high performance during traffic spikes through automatic scaling
Reduces server load by serving cached content from edge locations

The combination of these caching features helps create a faster, more responsive shopping experience while reducing the load on the main servers.

Can Shopify Oxygen's smart caching be customized or configured by merchants

Caching Controls

Merchants can configure caching through the Oxygen-Cache-Control header in Hydrogen storefront worker responses
The header can be set with different directives to control caching behavior:
- public: Allows response to be cached by any cache
- max-age: Specifies cache duration in seconds
- s-maxage: Sets duration for shared caches

Customization Options

Vary Header Configuration

Merchants can use the Vary response header to control which request headers determine cache matches
This allows for serving different cached content based on specific request parameters

Caching Criteria For a response to be cached, it must:

Be a GET request
Have a 2XX or 3XX status code
Include proper Oxygen-Cache-Control headers
Have appropriate Vary header values

Limitations

Cannot manually purge the cache for currently deployed workers
Must wait for cache expiration or deploy new changes
Cached responses don't carry over between deployments
Header specifications for Vary must use complete values

The smart caching system works automatically to optimize performance while allowing merchants to configure basic caching parameters through headers and response settings.

What specific caching strategies can merchants customize in Shopify Oxygen

Built-in Caching Strategies

Default Options

CacheShort(): Public caching for 1 second with 9-second stale-while-revalidate
CacheLong(): Public caching for 1 hour with 23-hour stale-while-revalidate
CacheNone(): No caching with no-store directive
CacheCustom(): Allows for custom cache control settings

Customizable Parameters

Cache Control Options

mode: Can be set to public, private, no-store, must-revalidate, or no-transform
maxAge: Duration in seconds to cache the response
staleWhileRevalidate: Time in seconds to serve stale content while fetching fresh data
sMaxAge: Duration for CDN/proxy caching
staleIfError: Time to serve cached content during 5xx errors

Implementation Considerations

Caching Rules

Responses must be GET requests
Status codes must be 2XX or 3XX
Proper Oxygen-Cache-Control headers must be present
Customer Account API data is never cached due to personalization

Performance Features

Full-page caching for static content
Smart default caching policies with automatic key generation
Integration with Cloudflare's CDN for global content distribution
Automatic scaling and load balancing capabilities

Supercharge Your Online Store

Curious about how Headless Commerce could supercharge your online store? Our Shopify experts are ready to guide you through the power of Shopify Hydrogen and help you build a faster, more flexible e-commerce experience. Schedule your free consultation now.

Get Expert Guidance →

Do I need Shopify plus to use Shopify Headless Hydrogen