feat: add full page caching

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 data loaders that have personalization: account/*, cart.

Author: serhalp

examples/frameworks/hydrogen-caching/app/lib/page-cache.ts

@@ -0,0 +1,23 @@
+// Remix resource routes result in the same URL serving both an HTML page response and a JSON data
+// response, so we need to check for `?_data=` to avoid conflating them in the cache.
+// See https://remix.run/docs/en/main/guides/resource-routes.
+const CACHE_REMIX_RESOURCE_ROUTES = {
+ 'Netlify-Vary': 'query=_data',
+};
+
+export const NO_CACHE = {
+ ...CACHE_REMIX_RESOURCE_ROUTES,
+ 'Cache-Control': 'private, no-store, no-cache, must-revalidate',
+};
+
+export const CACHE_1_DAY = {
+ ...CACHE_REMIX_RESOURCE_ROUTES,
+ 'Cache-Control': 'public, max-age=0',
+};
+
+export const CACHE_1_HOUR_SWR = {
+ ...CACHE_REMIX_RESOURCE_ROUTES,
+ 'Cache-Control': 'public, max-age=0, must-revalidate',
+ 'Netlify-CDN-Cache-Control':
+ 'public, max-age=3600, stale-while-revalidate=60',
+};

examples/frameworks/hydrogen-caching/app/root.tsx

@@ -1,5 +1,9 @@
 import {useNonce, getShopAnalytics, Analytics} from '@shopify/hydrogen';
-import {defer, type LoaderFunctionArgs} from '@netlify/remix-runtime';
+import {
+ defer,
+ type HeadersFunction,
+ type LoaderFunctionArgs,
+} from '@netlify/remix-runtime';
 import {
  Links,
  Meta,
@@ -17,6 +21,11 @@ import appStyles from '~/styles/app.css?url';
 import {PageLayout} from '~/components/PageLayout';
 import {CartProvider, useCart} from '~/components/CartProvider';
 import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
+import {CACHE_1_HOUR_SWR} from '~/lib/page-cache';
+
+export const headers: HeadersFunction = () => ({
+ ...CACHE_1_HOUR_SWR,
+});
 
 export type RootLoader = typeof loader;
 

examples/frameworks/hydrogen-caching/app/routes/[robots.txt].tsx

@@ -1,6 +1,7 @@
 import {type LoaderFunctionArgs} from '@netlify/remix-runtime';
 import {useRouteError, isRouteErrorResponse} from '@remix-run/react';
 import {parseGid} from '@shopify/hydrogen';
+import {CACHE_1_DAY} from '~/lib/page-cache';
 
 export async function loader({request, context}: LoaderFunctionArgs) {
  const url = new URL(request.url);
@@ -13,9 +14,8 @@ export async function loader({request, context}: LoaderFunctionArgs) {
  return new Response(body, {
  status: 200,
  headers: {
+ ...CACHE_1_DAY,
  'Content-Type': 'text/plain',
-
- 'Cache-Control': `max-age=${60 * 60 * 24}`,
  },
  });
 }

examples/frameworks/hydrogen-caching/app/routes/[sitemap.xml].tsx

@@ -1,6 +1,7 @@
 import {flattenConnection} from '@shopify/hydrogen';
 import type {LoaderFunctionArgs} from '@netlify/remix-runtime';
 import type {SitemapQuery} from 'storefrontapi.generated';
+import {CACHE_1_DAY} from '~/lib/page-cache';
 
 /**
  * the google limit is 50K, however, the storefront API
@@ -38,9 +39,8 @@ export async function loader({
 
  return new Response(sitemap, {
  headers: {
+ ...CACHE_1_DAY,
  'Content-Type': 'application/xml',
-
- 'Cache-Control': `max-age=${60 * 60 * 24}`,
  },
  });
 }

examples/frameworks/hydrogen-caching/app/routes/account.tsx

@@ -1,11 +1,20 @@
-import {json, type LoaderFunctionArgs} from '@netlify/remix-runtime';
+import {
+ json,
+ type HeadersFunction,
+ type LoaderFunctionArgs,
+} from '@netlify/remix-runtime';
 import {Form, NavLink, Outlet, useLoaderData} from '@remix-run/react';
 import {CUSTOMER_DETAILS_QUERY} from '~/graphql/customer-account/CustomerDetailsQuery';
+import {NO_CACHE} from '~/lib/page-cache';
 
 export function shouldRevalidate() {
  return true;
 }
 
+export const headers: HeadersFunction = () => ({
+ ...NO_CACHE,
+});
+
 export async function loader({context}: LoaderFunctionArgs) {
  const {data, errors} = await context.customerAccount.query(
  CUSTOMER_DETAILS_QUERY,
@@ -19,7 +28,7 @@ export async function loader({context}: LoaderFunctionArgs) {
  {customer: data.customer},
  {
  headers: {
- 'Cache-Control': 'no-cache, no-store, must-revalidate',
+ ...NO_CACHE,
  },
  },
  );

examples/frameworks/hydrogen-caching/app/routes/cart.tsx

@@ -7,6 +7,7 @@ import {
  type LoaderFunctionArgs,
 } from '@netlify/remix-runtime';
 import {CartMain} from '~/components/CartMain';
+import {NO_CACHE} from '~/lib/page-cache';
 
 export const meta: MetaFunction = () => {
  return [{title: `Hydrogen | Cart`}];
@@ -16,13 +17,15 @@ export async function loader({context}: LoaderFunctionArgs) {
  const {cart} = context;
  const existingCart = await cart.get();
  if (existingCart) {
- return json(existingCart);
+ return json(existingCart, {headers: {...NO_CACHE}});
  }
 
  const {cart: createdCart} = await cart.create({});
  // The Cart ID might change after each mutation, so update it each time.
  const headers = cart.setCartId(createdCart.id);
- return json(createdCart, {headers});
+ return json(createdCart, {
+ headers: {...Object.fromEntries(headers), ...NO_CACHE},
+ });
 }
 
 export async function action({request, context}: ActionFunctionArgs) {

examples/frameworks/hydrogen-caching/app/routes/products.$handle.tsx

@@ -1,5 +1,10 @@
 import {Suspense} from 'react';
-import {defer, redirect, type LoaderFunctionArgs} from '@netlify/remix-runtime';
+import {
+ defer,
+ redirect,
+ type HeadersFunction,
+ type LoaderFunctionArgs,
+} from '@netlify/remix-runtime';
 import {Await, useLoaderData, type MetaFunction} from '@remix-run/react';
 import type {ProductFragment} from 'storefrontapi.generated';
 import {
@@ -17,6 +22,11 @@ export const meta: MetaFunction<typeof loader> = ({data}) => {
  return [{title: `Hydrogen | ${data?.product.title ?? ''}`}];
 };
 
+export const headers: HeadersFunction = ({parentHeaders, loaderHeaders}) => ({
+ ...Object.fromEntries(parentHeaders),
+ ...Object.fromEntries(loaderHeaders),
+});
+
 export async function loader(args: LoaderFunctionArgs) {
  // Start fetching non-critical data without blocking time to first byte
  const deferredData = loadDeferredData(args);

examples/frameworks/hydrogen-caching/app/routes/search.tsx

@@ -2,11 +2,13 @@ import {
  json,
  type LoaderFunctionArgs,
  type ActionFunctionArgs,
+ type HeadersFunction,
 } from '@netlify/remix-runtime';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
 import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
 import {SearchForm} from '~/components/SearchForm';
 import {SearchResults} from '~/components/SearchResults';
+import {CACHE_1_HOUR_SWR} from '~/lib/page-cache';
 import {
  type RegularSearchReturn,
  type PredictiveSearchReturn,
@@ -17,6 +19,11 @@ export const meta: MetaFunction = () => {
  return [{title: `Hydrogen | Search`}];
 };
 
+export const headers: HeadersFunction = ({parentHeaders, loaderHeaders}) => ({
+ ...Object.fromEntries(parentHeaders),
+ ...Object.fromEntries(loaderHeaders),
+});
+
 export async function loader({request, context}: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const isPredictive = url.searchParams.has('predictive');
@@ -29,7 +36,12 @@ export async function loader({request, context}: LoaderFunctionArgs) {
  return {term: '', result: null, error: error.message};
  });
 
- return json(await searchPromise);
+ return json(await searchPromise, {
+ headers: {
+ ...CACHE_1_HOUR_SWR,
+ 'Netlify-Vary': 'query=q|limit|predictive',
+ },
+ });
 }
 
 /**