CDN configuration
How a CDN in front of the SHOPin storefront accelerator should see your origins: Cache-Control, Vary, static assets from Next and public/, and when GET /bff/* and HTML are safe to edge-cache. Layer semantics (Next Data Cache vs HTTP) stay in Cache strategies.
Frontend responsibility
- Cache intent — For pages and custom responses, set explicit Cache-Control when shared caching is safe; otherwise prefer no-store. BFF responses should emit the headers you want the CDN to honor.
- Assets — Rely on hashed
/_next/static/*from Next; keeppublic/assets small or accept shorter TTLs. Avoid Set-Cookie on static URLs. - Fonts — Prefer self-hosted
*.woff2; use preload / crossorigin where needed and align CORS with the CDN. - Hints — preconnect / dns-prefetch to CDN and API origins; preload only for truly critical assets.
What the CDN can cache (typical)
| Kind | Examples | Notes |
|---|---|---|
| Next build output | /_next/static/chunks/*.js, /_next/static/css/*.css, /_next/static/media/* | Hashed filenames → long immutable TTLs are normal. |
public/ | /logo.svg, images, manifest | Tune TTL to how often you ship static files. |
| GET BFF | e.g. /bff/navigation/... | Edge-cache only if the response is public (s-maxage or max-age > 0), has no Set-Cookie, and your provider keys the cache correctly (often Vary: Accept-Language; support ETag / Last-Modified if you send them). |
| HTML (SSR) | e.g. /about-us | Only when the response is explicitly public-cacheable and not personalised: no Set-Cookie, no Authorization; cache key usually path + normalized query. |
Exact routes depend on your BFF and routes; validate against your deployment.
Related
- Cache strategies — Next.js Data Cache, React Query, BFF app cache vs HTTP/CDN.