[BUG] - Full page and sub request Caching problems in localhost and in Oxygen

[bitforcesrl]

Describe the bug The behaviours are not working properly in localhost and hosted in Oxygen

To Reproduce

For full page cache you can use any setup like

    CacheCustom({
      maxAge: 20,
      staleWhileRevalidate: 0,
    }),
  );

In localhost we've enabled the full page cache with the vite config flag:

export default defineConfig({
  plugins: [hydrogen({devCache: false, purgeQueryCacheOnBuild: false})],

For sub request fetching

  const {
    data: {product, shop},
  }: any = useShopQuery({
    query: PRODUCT_QUERY,
    variables: {
      country: countryCode,
      language: languageCode,
      handle,
    },
    preload: true,
    cache: CacheCustom({
      maxAge: 20,
      staleWhileRevalidate: 0,
    }),
  });

Expected behaviour

• The full page cache In localhost cache is working (with vite flag to true) in Oxygen is not working. Http headers are set properly
• The sub request cache In Oxygen is working but in localhost is not working.

ENV

• Hydrogen version: 1.6.3
• Node version: v18.11.0

[lordofthecactus]

cc @wizardlyhel @frandiox

[jplhomer]

👋 you've mentioned that cache is not working, but it's not clear what you mean by that. By all accounts on our end, caching is working fine.

Please provide what you're expecting to see versus what you're observing.

[bitforcesrl]

Hi @jplhomer Thanks for taking in consideration this issue

In the expected behaviour it's described what is happening and i'm going to add more details

The full page cache In localhost cache is working (with vite flag to true) If we refresh the page we can see in the console log HIT and the page is served to the client from the cache. We'are pringing a Math.rand() var to confirm that the page is chached. in Oxygen if we refresh tha page the cache is not working at every page refresh we see a new rand value Our dev url is this one and you can see the rand value https://development-0f06d6cd0d1eda484566.myshopify.dev/products/timberland-mens-6-inch-premium-boot

The sub request cache In Oxygen it is working but in localhost it is not working. Ex: If we update a product title in a product detail page

• in loacalhost the cache is not working if we refresh the page can see the updated title
• in Oxygen it works, if we refresh the page the product title stays the same until the maxAge expires, then at the next refresh the product title is updated

[jplhomer]

@bitforcesrl Thanks for the details!

RE: full-page cache: This behavior is expected in Oxygen. It's important to note that Oxygen deploys to many different colocations and data centers.

This means, depending on your geographical location, Request A may be routed to Datacenter 1, while Request B may be routed to Datacenter 2. The Cache API is colocation-specific. That means you might see a cache MISS depending on where your request lands.

RE: sub-request cache: If you have stale-while-revalidate added to your cache value (on by default in Hydrogen), this is likely the behavior you would expect to see. When you hit the STALE window, new data will be fetched in the background and returned on the next request.

Depending on how your app is set up, you may be accessing the data during a stale window which would cause the data to be revalidated in the background.

However, the behavior of local development differing from production does not sound expected. We'll look into this to see if we notice anything.