feat: add full page caching #13
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
serhalp
force-pushed
the
serhalp/frb-1314-hydrogen-demo-for-shopify-fine-grained-caching
branch
from
dc85a50
to
5e75ac2
Compare
✅ Deploy Preview for hydrogen-remix-template ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
serhalp
force-pushed
the
serhalp/frb-1314-hydrogen-demo-for-shopify-fine-grained-caching
branch
3 times, most recently
from
b05ebd3
to
3489a29
Compare
serhalp
commented
Sep 19, 2024
app/lib/page-cache.ts
Outdated
Comment on lines
1
to
23
| export const NO_CACHE = { | ||
| 'Cache-Control': 'private, no-store, no-cache, must-revalidate', | ||
| }; | ||
|
|
||
| export const CACHE_1_DAY = { | ||
| 'Cache-Control': 'public, max-age=0', | ||
| }; | ||
|
|
||
| export const CACHE_1_HOUR_SWR = { | ||
| 'Cache-Control': 'public, max-age=0, must-revalidate', | ||
| 'Netlify-CDN-Cache-Control': | ||
| 'public, max-age=3600, stale-while-revalidate=60', | ||
| }; |
There was a problem hiding this comment.
Could also be a good use case for Matt's https:/ascorbic/cdn-cache-control/
serhalp
commented
Sep 19, 2024
app/routes/_index.tsx
Outdated
|
|
||
| export const meta: MetaFunction = () => { | ||
| return [{title: 'Hydrogen | Home'}]; | ||
| }; | ||
|
|
||
| export const headers: HeadersFunction = () => ({ |
There was a problem hiding this comment.
https://remix.run/docs/en/main/route/headers
This is inherited by all child routes, unless a child route (or... closer ancestor parent route) overrides it.
serhalp
force-pushed
the
serhalp/frb-1314-hydrogen-demo-for-shopify-fine-grained-caching
branch
3 times, most recently
from
779d700
to
30736b2
Compare
serhalp
force-pushed
the
serhalp/frb-1314-hydrogen-demo-for-shopify-fine-grained-caching
branch
from
30736b2
to
5632931
Compare
Cache most pages for 1 hour on the Netlify CDN with stale-while-revalidate (allowing 1 min for background revalidation to complete). Cache these also on browsers (and anything else upstream) but require a conditional request to revalidate. On the search page, vary on the search input. Disable this caching on pages that have personalization: account/*, cart.
serhalp
force-pushed
the
serhalp/frb-1314-hydrogen-demo-for-shopify-fine-grained-caching
branch
from
5632931
to
266f746
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This may be more digestible if you review commit by commit, as it's really three separate changes that come together. See also #14 as a follow-up.
Make pages cacheable
This PR makes all pages load the cart and customer account data client side only. This results in all SSR page responses (except the
/account/*pages) cacheable on a public CDN like Netlify's.See https://shopify.dev/docs/storefronts/headless/hydrogen/cart/render-client-side for the approach (but note that there are a few errors on that page, for which I've submitted feedback).
See also https://shopify.dev/docs/storefronts/headless/hydrogen/caching/full-page-cache for more general information on full-page caching with Hydrogen.
Cache the pages
Cache most pages for 1 hour on the Netlify CDN with stale-while-revalidate (allowing 1 min for background revalidation to complete). Cache these also on browsers (and anything else upstream) but require a conditional request to revalidate.
On the search page, vary on the search input.
Disable this caching on pages that have un-deferred personalization, which is the
/account/*pages. (Technically we could apply the same pattern here, but the trade-off calculation is pretty different.)Make data routes cacheable
This also caches resource routes by default, with once again the account and cart opted out. This makes client-side navigation leverage caching as well.