April 2024 release: Analytics preview, stable Vite support, SEO updates, full-page caching

Welcome to Hydrogen's April 2024 release. Let's get straight into the new features:

Shopify Analytics preview

Implementing analytics with Hydrogen is getting simpler, more reliable, and more extensible, starting today. Hydrogen's new analytics utilities, out now as a preview release, include built-in support for Shopify's Customer Privacy API, and work out of the box with Shopify analytics, requiring minimal configuration to get up and running. And the new useAnalytics hook makes it easier to subscribe to Shopify-standard events as well as custom events, and publish them to third-party analytics services like Google, Facebook, and TikTok.

Check out the new example project to learn more about how to implement analytics events in Hydrogen and Oxygen, and transmit metrics events to Shopify analytics.

We're releasing this as an unstable feature today and would love your feedback.

Vite support is now stable

Rolled out as unstable in our March release, Vite support is now stable. Leverage (lightning fast) hot module replacement and an incredible ecosystem of Vite plugins.

Upgrade your Hydrogen project to use Vite today:

npx shopify hydrogen upgrade && npx shopify hydrogen setup vite

SEO overhaul

We originally introduced the <Seo /> component when Remix didn't support generating JSON-LD metadata from route meta exports. That was fixed last year, giving us a chance to rethink SEO in Hydrogen. Our new SEO tooling makes it easier to customize SEO for individual routes, with more consistent results across the board.

Hydrogen's new SEO approach uses Remix meta exports directly. See the migration guide in the release notes and learn about the new getSeoMeta utility.

Any <Seo /> components you've already implemented will keep working, but the component is being marked as deprecated, and will be removed in a future release.

Full Page Caching with Oxygen

You can now cache full page content in Oxygen. This feature is extremely useful for infrequently updated content, like blog posts, store locator, or an "About Us" page. By caching those static pages as rendered HTML, they can be served up in mere milliseconds.

env push is now stable

Bulk uploading environment variables via the CLI is now stable. This also unlocks support for third-party management tools. Securely upload environment variables from your local .env file to Oxygen by running npx shopify hydrogen env push.

In addition, you can now override environment variables on a per-deploy basis by passing the --env-file flag when running the deploy command. Check out the Hydrogen CLI reference for complete details.

Customer Account API tooling

Hydrogen now includes a built-in client for interacting with Shopify's Customer Account API, which allows customers to have a consistent, logged-in experience across Liquid online stores, Hydrogen, and checkout. Because of its strong privacy focus, the Customer Account API has to be accessed over a secure HTTPS connection, even in development.

To make this development process easier, we've introduced automatic SSL tunneling in the Hydrogen CLI, available today as an unstable preview. The dev server will automatically start a tunnel through our secure tryhydrogen.dev domain, and sync all the required credentials with your Shopify store.

Try it out today: run npx shopify hydrogen dev --customer-account-push__unstable and be sure to share your feedback.

Updates, optimizations, and fixes

In addition, this month's release includes a range of optimizations, bug fixes, and quality-of-life tweaks:

• The --env-branch flag is being deprecated in favor of --env, which can accept new Oxygen environment handles as inputs. (#1841)
• The @shopify/cli-hydrogen package size has been reduced by 60% (#1891)
• You can now scaffold projects from external repositories using the --template flag (#1867)
• Improve development logs when using Vite (#1927)
• Bump internal workerd dependency to fix a bug when running on Node 21 (#1866)
• Add --quickstart flag option to init command (#1822)
• Add --verbose flag to dev and preview commands to enable verbose logging (#1928)

To take advantage of all the latest features and improvements in Hydrogen, just run npx shopify hydrogen upgrade.

That's it for the April 2024 release — see you in May!