Shopify / hydrogen-v1

React-based framework for building dynamic, Shopify-powered custom storefronts.
https://shopify.github.io/hydrogen-v1/
MIT License
3.75k stars 325 forks source link

Prevent unexpected behavior when using both full-page and sub-request caching #419

Closed jplhomer closed 2 years ago

jplhomer commented 2 years ago

I think we have a bit of a footgun today:

Let's revisit the purpose of full-page cache vs sub-request cache

Benefits of sub-request cache

This is really the bread-and-butter of caching in Hydrogen. It's critical to have granular control over the freshness of sub-requests made to both SFAPI and 3P sources.

I'm not too worried about this, and I don't think we require a ton of changes here.

Benefits of full-page cache

I think full-page cache really has two concrete use cases:

Given these benefits:

wizardlyhel commented 2 years ago

I feel that this should be a developer tool to help developer to identify potentially broken caching strategy.

Thinking somewhere along this line ...

When enabled, developer is able to see server logging about the caching strategy used in a given render

GET str 200 13.06 ms   http://localhost:3000/
⎾ Caching strategy for http://localhost:3000/ 
⎢ public, max-age=10, stale-while-revalidate=10
⎢ query shopName              max-age=1, stale-while-revalidate=10
⎢ query indexContent          max-age=1, stale-while-revalidate=10
⎣___________________

We can create warning/error on detected unexpected usage like:

Warning: Detect page caching max-age duration (10s) longer than query shopName max-age duration (1s)