From e04faffcbbd0228ce2f9cb5e6eb71251d0007c65 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Fri, 20 Dec 2024 13:37:20 -0500
Subject: [PATCH] chore: add cache to static pages in app router (#18278)

* add cache

* fix

* refactor
---
 apps/web/app/WithAppDirSsg.tsx                | 35 +++++++++++--------
 apps/web/app/future/apps/[slug]/page.tsx      |  2 +-
 .../apps/categories/[category]/page.tsx       |  2 +-
 apps/web/app/future/auth/error/page.tsx       |  2 +-
 .../web/app/future/bookings/[status]/page.tsx |  2 +-
 5 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/apps/web/app/WithAppDirSsg.tsx b/apps/web/app/WithAppDirSsg.tsx
index bce8446e3f..ead0adf970 100644
--- a/apps/web/app/WithAppDirSsg.tsx
+++ b/apps/web/app/WithAppDirSsg.tsx
@@ -1,24 +1,31 @@
 import type { GetStaticProps, GetStaticPropsContext } from "next";
+import { unstable_cache } from "next/cache";
 import { notFound, redirect } from "next/navigation";
 
 export const withAppDirSsg =
-  <T extends Record<string, any>>(getStaticProps: GetStaticProps<T>) =>
+  <T extends Record<string, any>>(getStaticProps: GetStaticProps<T>, routePath: string) =>
   async (context: GetStaticPropsContext) => {
-    const ssgResponse = await getStaticProps(context);
+    const cacheKey = JSON.stringify({
+      route: routePath,
+      params: context.params || {},
+    });
 
-    if ("redirect" in ssgResponse) {
-      redirect(ssgResponse.redirect.destination);
-    }
+    const getCachedProps = unstable_cache(async () => {
+      const ssgResponse = await getStaticProps(context);
 
-    if ("notFound" in ssgResponse) {
-      notFound();
-    }
+      if ("redirect" in ssgResponse) {
+        redirect(ssgResponse.redirect.destination);
+      }
 
-    const props = await Promise.resolve(ssgResponse.props);
+      if ("notFound" in ssgResponse) {
+        notFound();
+      }
 
-    return {
-      ...ssgResponse.props,
-      // includes dehydratedState required for future page trpcPropvider
-      ...("trpcState" in props && { dehydratedState: props.trpcState }),
-    };
+      return {
+        ...ssgResponse.props,
+        ...("trpcState" in ssgResponse.props && { dehydratedState: ssgResponse.props.trpcState }),
+      };
+    }, [`ssg-${cacheKey}`]);
+
+    return getCachedProps();
   };
diff --git a/apps/web/app/future/apps/[slug]/page.tsx b/apps/web/app/future/apps/[slug]/page.tsx
index a4c2d7dcc5..3c7f717544 100644
--- a/apps/web/app/future/apps/[slug]/page.tsx
+++ b/apps/web/app/future/apps/[slug]/page.tsx
@@ -13,7 +13,7 @@ import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 import type { PageProps } from "~/apps/[slug]/slug-view";
 import Page from "~/apps/[slug]/slug-view";
 
-const getData = withAppDirSsg<PageProps>(getStaticProps);
+const getData = withAppDirSsg<PageProps>(getStaticProps, "future/apps/[slug]");
 
 export const generateMetadata = async ({ params, searchParams }: _PageProps) => {
   const legacyContext = buildLegacyCtx(headers(), cookies(), params, searchParams);
diff --git a/apps/web/app/future/apps/categories/[category]/page.tsx b/apps/web/app/future/apps/categories/[category]/page.tsx
index 13f61e0078..4aae6cb845 100644
--- a/apps/web/app/future/apps/categories/[category]/page.tsx
+++ b/apps/web/app/future/apps/categories/[category]/page.tsx
@@ -28,7 +28,7 @@ export const generateStaticParams = async () => {
   return paths.map((category) => ({ category }));
 };
 
-const getData = withAppDirSsg<PageProps>(getStaticProps);
+const getData = withAppDirSsg<PageProps>(getStaticProps, "future/apps/categories/[category]");
 
 export default WithLayout({ getData, Page: CategoryPage, getLayout: null })<"P">;
 export const dynamic = "force-static";
diff --git a/apps/web/app/future/auth/error/page.tsx b/apps/web/app/future/auth/error/page.tsx
index 25b885e454..12b2b5c97b 100644
--- a/apps/web/app/future/auth/error/page.tsx
+++ b/apps/web/app/future/auth/error/page.tsx
@@ -13,7 +13,7 @@ export const generateMetadata = async () => {
   );
 };
 
-const getData = withAppDirSsg(getStaticProps);
+const getData = withAppDirSsg(getStaticProps, "future/auth/error");
 
 export default WithLayout({ getData, Page, getLayout: null })<"P">;
 export const dynamic = "force-static";
diff --git a/apps/web/app/future/bookings/[status]/page.tsx b/apps/web/app/future/bookings/[status]/page.tsx
index 3cbc43c913..2a9ad20fc8 100644
--- a/apps/web/app/future/bookings/[status]/page.tsx
+++ b/apps/web/app/future/bookings/[status]/page.tsx
@@ -8,7 +8,7 @@ import Page from "~/bookings/views/bookings-listing-view";
 import { getStaticProps } from "~/bookings/views/bookings-listing-view.getStaticProps";
 
 type Y = InferGetStaticPropsType<typeof getStaticProps>;
-const getData = withAppDirSsg<Y>(getStaticProps);
+const getData = withAppDirSsg<Y>(getStaticProps, "future/bookings/[status]");
 
 export const generateMetadata = async () =>
   await _generateMetadata(