Need help managing fetch's cache

[Heyrows]

Hi 👋

I am working with the latest version of Hydrogen and currently migrating a liquid website to Hydrogen.
We chose to migrate partially by proxifying routes that are not defined in the Hydrogen code.
On my code that proxifies, I do a simple fetch to the liquid theme, this fetch is called in a loader for a given page.

I am having issues with this fetch caching a page.
i.e: I modify a gempage, it modifies the page on the liquid websites but the hydrogen websites still shows the previous version(s).
Locally, everything works fine, as soon as I push my code and deploy, I start having this cache issue.

I have verified my setup, my browser, my hydrogen cache itself and came to the conclusion that it was the fetch caching the page.
I have looked at cloudflare's request documentation, tried setting no-cache or using any other properties but nothing worked.

At this point I am really struggling against the documentation and I would appreciate any insight please. 🙏

[aladearchives]

"Works locally, stale once deployed" with a proxy like this is almost always caching somewhere between Oxygen and the Liquid store, not in Hydrogen's own cache. There are usually three layers stacked up, so it helps to check them one at a time.

1. Is the Liquid store itself serving the old page?

Curl the Liquid URL directly, with a throwaway query string, right after editing in GemPages:

curl -s "https://your-store.myshopify.com/pages/whatever?nocache=123" | grep "some text you changed"

If that's stale too, it's Shopify's own CDN or GemPages publishing lag, and nothing in Hydrogen will fix it.

2. The subrequest from Oxygen.

Oxygen runs on workers, and a plain fetch there can be cached based on the response headers the Liquid store sends back. That's why nothing changes locally (no edge) but it does once deployed. A couple of options:

const url = new URL(liquidUrl);
url.searchParams.set('_hv', Date.now().toString()); // cache-buster

const res = await fetch(url, {
  cache: 'no-store',
  headers: {'Cache-Control': 'no-cache'},
});

The query param on its own is usually enough. cache: 'no-store' depends on the worker runtime/compatibility date, so don't rely on it by itself.

3. The response you send back.

This is the one people miss. If your loader returns the proxied HTML with the Liquid store's Cache-Control headers copied across (or with something like CacheLong()), Oxygen can cache your Hydrogen page at the edge. Strip them and set your own:

const headers = new Headers(res.headers);
headers.set('Cache-Control', 'no-store'); // or a short max-age if you want some caching
headers.delete('Set-Cookie'); // usually don't want these leaking through either

return new Response(res.body, {status: res.status, headers});

Once it's working, swap no-store for something short like public, max-age=60, stale-while-revalidate=300 so you're not hitting the Liquid store on every request.

My bet is #3. It matches "verified the Hydrogen cache, still stale" exactly.