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 responsesThe header can be set with different directives to control caching behavior:
public
: Allows response to be cached by any cachemax-age
: Specifies cache duration in secondss-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 matchesThis 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
headersHave 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-revalidateCacheLong()
: Public caching for 1 hour with 23-hour stale-while-revalidateCacheNone()
: No caching with no-store directiveCacheCustom()
: Allows for custom cache control settings
Customizable Parameters
Cache Control Options
mode
: Can be set to public, private, no-store, must-revalidate, or no-transformmaxAge
: Duration in seconds to cache the responsestaleWhileRevalidate
: Time in seconds to serve stale content while fetching fresh datasMaxAge
: Duration for CDN/proxy cachingstaleIfError
: 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 presentCustomer 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.