Increase default cache SWR (#1336)

Co-authored-by: Helen Lin <[email protected]>
Shopify · Oct 25, 2023 · 867e0b0 · 867e0b0
1 parent 0ae7cbe
commit 867e0b0
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 5 deletions.
diff --git a/.changeset/four-toes-shout.md b/.changeset/four-toes-shout.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Introduce a new default caching strategy with a `max-age` value of 1 second, and a `stale-while-revalidate` value of 1 day. When updating to this version of Hydrogen, note that if you would like to continue to use `CacheShort` as the default (10 second cache) to decrease risk of stale data (but also increase load times on low traffic pages), it's important to go and manually specify your caching strategy.
diff --git a/packages/hydrogen/src/cache/api.ts b/packages/hydrogen/src/cache/api.ts
@@ -1,5 +1,5 @@
 import type {CachingStrategy} from './strategies';
-import {CacheShort, generateCacheControlHeader} from './strategies';
+import {CacheDefault, generateCacheControlHeader} from './strategies';
 
 function logCacheApiStatus(
   status: string | null,
@@ -35,7 +35,7 @@ function getCacheControlSetting(
       ...options,
     };
   } else {
-    return userCacheOptions || CacheShort();
+    return userCacheOptions || CacheDefault();
   }
 }
 

diff --git a/packages/hydrogen/src/cache/strategies.ts b/packages/hydrogen/src/cache/strategies.ts
@@ -110,6 +110,22 @@ export function CacheLong(overrideOptions?: CachingStrategy): AllCacheOptions {
   };
 }
 
+/**
+ *
+ * @private
+ */
+export function CacheDefault(
+  overrideOptions?: CachingStrategy,
+): AllCacheOptions {
+  guardExpirableModeType(overrideOptions);
+  return {
+    mode: PUBLIC,
+    maxAge: 1,
+    staleWhileRevalidate: 86399, // 1 second less than 24 hours
+    ...overrideOptions,
+  };
+}
+
 /**
  *
  * @public

diff --git a/packages/hydrogen/src/cache/sub-request.ts b/packages/hydrogen/src/cache/sub-request.ts
@@ -1,7 +1,7 @@
 import {parseJSON} from '../utils/parse-json';
 import {CacheAPI} from './api';
 import {
-  CacheShort,
+  CacheDefault,
   type CachingStrategy,
   type AllCacheOptions,
 } from './strategies.js';
@@ -18,7 +18,7 @@ export function getKeyUrl(key: string) {
 }
 
 function getCacheOption(userCacheOptions?: CachingStrategy): AllCacheOptions {
-  return userCacheOptions || CacheShort();
+  return userCacheOptions || CacheDefault();
 }
 
 export function generateSubRequestCacheControlHeader(

diff --git a/packages/hydrogen/src/storefront.ts b/packages/hydrogen/src/storefront.ts
@@ -22,6 +22,7 @@ import {
   CacheNone,
   CacheLong,
   CacheShort,
+  CacheDefault,
   CacheCustom,
   generateCacheControlHeader,
   type CachingStrategy,
@@ -337,7 +338,7 @@ export function createStorefrontClient<TI18n extends I18nBase>(
 
     const [body, response] = await fetchWithServerCache(url, requestInit, {
       cacheInstance: mutation ? undefined : cache,
-      cache: cacheOptions || CacheShort(),
+      cache: cacheOptions || CacheDefault(),
       cacheKey,
       shouldCacheResponse: checkGraphQLErrors,
       waitUntil,