When building your custom storefront, it can be useful to have access to static assets that aren't already hosted elsewhere, like images. This guide explains how static assets work and the considerations and limitations associated with them.
How static assets workAnchor link to section titled "How static assets work"
The following example shows how to render the
Static assets in OxygenAnchor link to section titled "Static assets in Oxygen"
If you're using Oxygen to deploy your Hydrogen custom storefront, then static assets are automatically deployed to Shopify's content delivery network (CDN).
Shopify provides merchants with a world-class CDN backed by Cloudflare. Using a CDN means that your custom storefront will load quickly around the globe.
Files delivered over the Shopify CDN are minified and compressed automatically using Brotli, Zopfli, and gzip, reducing the size of the files the browser must download. Requests use HTTP/3 and TLS 1.3 to further enhance request performance and security.
Considerations and limitationsAnchor link to section titled "Considerations and limitations"
You should only import assets, such as styles or images, from client components. Any static assets that are referenced in server components, or shared components that are rendered from server components, won't display in the browser.