feat: implement caching for BuilderPage using unstable_cache

ArseniyX · ArseniyX · commit 09b9110053ea · 2025-05-21T13:04:44.000+03:00
diff --git a/src/app/(builder)/components/BuilderPage.tsx b/src/app/(builder)/components/BuilderPage.tsx
@@ -1,4 +1,5 @@
 import { builder } from "@builder.io/sdk";
+import { unstable_cache } from "next/cache";
 import Head from "next/head";
 
 import { RenderBuilderContent } from "./RenderBuilderContent";
@@ -8,18 +9,30 @@ interface BuilderPageProps {
     page: string[];
 }
 
+const getCachedBuilderPage = (urlPath: string) => {
+    return unstable_cache(
+        () =>
+            builder
+                .get("page", {
+                    cache: true,
+                    prerender: false,
+                    userAttributes: {
+                        urlPath,
+                    },
+                })
+                .toPromise(),
+        ["builder-page", urlPath],
+        {
+            revalidate: 60,
+            tags: ["builder-page", `builder-page:${urlPath}`],
+        }
+    );
+};
+
 export const BuilderPage = async ({ data, page }: BuilderPageProps) => {
     builder.init(process.env.NEXT_PUBLIC_BUILDER_IO_PUBLIC_KEY!);
 
-    const content = await builder
-        .get("page", {
-            cache: true,
-            prerender: false,
-            userAttributes: {
-                urlPath: "/" + (page?.join("/") || ""),
-            },
-        })
-        .toPromise();
+    const content = await getCachedBuilderPage("/" + (page?.join("/") || ""))();
     return (
         <>
             <Head>
