chore: add cache to static pages in app router (#18278)

* add cache

* fix

* refactor

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();
   };

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);

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";

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";

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(