test cache components

Author: stipsan

app/(personal)/[slug]/page.tsx

@@ -4,8 +4,9 @@ import {sanityFetch} from '@/sanity/lib/live'
 import {pagesBySlugQuery, slugsByTypeQuery} from '@/sanity/lib/queries'
 import type {Metadata, ResolvingMetadata} from 'next'
 import {toPlainText, type PortableTextBlock} from 'next-sanity'
-import {draftMode} from 'next/headers'
+import {cookies, draftMode} from 'next/headers'
 import {notFound} from 'next/navigation'
+import {resolvePerspectiveFromCookie} from 'next-sanity/experimental/live'
 
 type Props = {
   params: Promise<{slug: string}>
@@ -15,10 +16,13 @@ export async function generateMetadata(
   {params}: Props,
   parent: ResolvingMetadata,
 ): Promise<Metadata> {
+  const jar = await cookies()
+  const perspective = await resolvePerspectiveFromCookie({cookies: jar})
   const {data: page} = await sanityFetch({
     query: pagesBySlugQuery,
     params,
     stega: false,
+    perspective,
   })
 
   return {
@@ -38,7 +42,9 @@ export async function generateStaticParams() {
 }
 
 export default async function PageSlugRoute({params}: Props) {
-  const {data} = await sanityFetch({query: pagesBySlugQuery, params})
+  const jar = await cookies()
+  const perspective = await resolvePerspectiveFromCookie({cookies: jar})
+  const {data} = await sanityFetch({query: pagesBySlugQuery, params, perspective})
 
   // Only show the 404 page if we're in production, when in draft mode we might be about to create a page on this slug, and live reload won't work on the 404 route
   if (!data?._id && !(await draftMode()).isEnabled) {

app/(personal)/client-functions.ts

@@ -1,5 +1,6 @@
 'use client'
 
+import {type SyncTag} from '@sanity/client'
 import {isCorsOriginError} from 'next-sanity/live'
 import {toast} from 'sonner'
 
@@ -27,3 +28,16 @@ export function handleError(error: unknown) {
     })
   }
 }
+
+export async function revalidateSyncTags(tags: SyncTag[]): Promise<'refresh'> {
+  const url = new URL('/api/revalidate-sync-tags', window.location.origin)
+  for (const tag of tags) {
+    url.searchParams.append('tag', tag)
+  }
+  const response = await fetch(url, {method: 'POST'})
+  if (!response.ok) {
+    throw new Error('Failed to revalidate sync tags')
+  }
+  console.log('revalidating sync tags', tags)
+  return 'refresh'
+}

app/(personal)/layout.tsx

@@ -8,17 +8,21 @@ import {urlForOpenGraphImage} from '@/sanity/lib/utils'
 import type {Metadata, Viewport} from 'next'
 import {toPlainText, type PortableTextBlock} from 'next-sanity'
 import {VisualEditing} from 'next-sanity/visual-editing'
-import {draftMode} from 'next/headers'
+import {cookies, draftMode} from 'next/headers'
 import {Suspense} from 'react'
 import {Toaster} from 'sonner'
-import {handleError} from './client-functions'
+import {handleError, revalidateSyncTags} from './client-functions'
 import {DraftModeToast} from './DraftModeToast'
 import {SpeedInsights} from '@vercel/speed-insights/next'
+import {resolvePerspectiveFromCookie} from 'next-sanity/experimental/live'
+import type {SettingsQueryResult} from '@/sanity.types'
 
 export async function generateMetadata(): Promise<Metadata> {
+  const jar = await cookies()
+  const perspective = await resolvePerspectiveFromCookie({cookies: jar})
   const [{data: settings}, {data: homePage}] = await Promise.all([
-    sanityFetch({query: settingsQuery, stega: false}),
-    sanityFetch({query: homePageQuery, stega: false}),
+    sanityFetch({query: settingsQuery, stega: false, perspective}),
+    sanityFetch({query: homePageQuery, stega: false, perspective}),
   ])
 
   const ogImage = urlForOpenGraphImage(
@@ -43,31 +47,32 @@ export const viewport: Viewport = {
   themeColor: '#000',
 }
 
-export default async function IndexRoute({children}: {children: React.ReactNode}) {
-  const {data} = await sanityFetch({query: settingsQuery})
+export default async function PersonalLayout({children}: {children: React.ReactNode}) {
+  const isDraftMode = (await draftMode()).isEnabled
   return (
     <>
       <div className="flex min-h-screen flex-col bg-white text-black">
-        <Navbar data={data} />
-        <div className="mt-20 flex-grow px-4 md:px-16 lg:px-32">{children}</div>
-        <footer className="bottom-0 w-full bg-white py-12 text-center md:py-20">
-          {data?.footer && (
-            <CustomPortableText
-              id={data._id}
-              type={data._type}
-              path={['footer']}
-              paragraphClasses="text-md md:text-xl"
-              value={data.footer as unknown as PortableTextBlock[]}
-            />
+        <Suspense
+          // @TODO add a fallback that reduces layout shift
+          fallback={null}
+        >
+          {isDraftMode ? (
+            <DynamicLayout>{children}</DynamicLayout>
+          ) : (
+            <CachedLayout>{children}</CachedLayout>
           )}
-        </footer>
+        </Suspense>
         <Suspense>
           <IntroTemplate />
         </Suspense>
       </div>
       <Toaster />
-      <SanityLive onError={handleError} />
-      {(await draftMode()).isEnabled && (
+      <SanityLive
+        onError={handleError}
+        // @TODO re-enable when the BYPASS on draft mode situation is figured out
+        // revalidateSyncTags={revalidateSyncTags}
+      />
+      {isDraftMode && (
         <>
           <DraftModeToast />
           <VisualEditing />
@@ -77,3 +82,56 @@ export default async function IndexRoute({children}: {children: React.ReactNode}
     </>
   )
 }
+
+/**
+ * Resolves cookies for the perspective in draft mode, important that it's wrapped in a <Suspense> boundary for PPR to work its magic
+ */
+async function DynamicLayout({children}: {children: React.ReactNode}) {
+  const jar = await cookies()
+  const perspective = await resolvePerspectiveFromCookie({cookies: jar})
+  const {data} = await sanityFetch({query: settingsQuery, perspective})
+  return <CachedContent data={data}>{children}</CachedContent>
+}
+
+/**
+ * Runs in production, takes full advantage of prerender and PPR
+ */
+async function CachedLayout({children}: {children: React.ReactNode}) {
+  'use cache'
+
+  const {data} = await sanityFetch({query: settingsQuery, perspective: 'published', stega: false})
+
+  return <CachedContent data={data}>{children}</CachedContent>
+}
+
+/**
+ * Shared by both the cached and dynamic layouts, it is its own cache layer so that even if the `sanityFetch` is
+ * revalidated and refetched, the component output doesn't change if `data` is the same.
+ */
+async function CachedContent({
+  children,
+  data,
+}: {
+  children: React.ReactNode
+  data: SettingsQueryResult
+}) {
+  'use cache'
+
+  return (
+    <>
+      <Navbar data={data} />
+      <div className="mt-20 flex-grow px-4 md:px-16 lg:px-32">{children}</div>
+      <footer className="bottom-0 w-full bg-white py-12 text-center md:py-20">
+        {data?.footer && (
+          <CustomPortableText
+            id={data._id}
+            type={data._type}
+            path={['footer']}
+            paragraphClasses="text-md md:text-xl"
+            value={data.footer as unknown as PortableTextBlock[]}
+          />
+        )}
+      </footer>
+    </>
+  )
+}

app/(personal)/page.tsx

@@ -3,9 +3,13 @@ import {studioUrl} from '@/sanity/lib/api'
 import {sanityFetch} from '@/sanity/lib/live'
 import {homePageQuery} from '@/sanity/lib/queries'
 import Link from 'next/link'
+import {resolvePerspectiveFromCookie} from 'next-sanity/experimental/live'
+import {cookies} from 'next/headers'
 
 export default async function IndexRoute() {
-  const {data} = await sanityFetch({query: homePageQuery})
+  const jar = await cookies()
+  const perspective = await resolvePerspectiveFromCookie({cookies: jar})
+  const {data} = await sanityFetch({query: homePageQuery, perspective})
 
   if (!data) {
     return (

app/(personal)/projects/[slug]/page.tsx

@@ -7,9 +7,10 @@ import {projectBySlugQuery, slugsByTypeQuery} from '@/sanity/lib/queries'
 import {urlForOpenGraphImage} from '@/sanity/lib/utils'
 import type {Metadata, ResolvingMetadata} from 'next'
 import {createDataAttribute, toPlainText} from 'next-sanity'
-import {draftMode} from 'next/headers'
+import {cookies, draftMode} from 'next/headers'
 import Link from 'next/link'
 import {notFound} from 'next/navigation'
+import {resolvePerspectiveFromCookie} from 'next-sanity/experimental/live'
 
 type Props = {
   params: Promise<{slug: string}>
@@ -19,9 +20,12 @@ export async function generateMetadata(
   {params}: Props,
   parent: ResolvingMetadata,
 ): Promise<Metadata> {
+  const jar = await cookies()
+  const perspective = await resolvePerspectiveFromCookie({cookies: jar})
   const {data: project} = await sanityFetch({
     query: projectBySlugQuery,
     params,
+    perspective,
     stega: false,
   })
   const ogImage = urlForOpenGraphImage(
@@ -51,7 +55,9 @@ export async function generateStaticParams() {
 }
 
 export default async function ProjectSlugRoute({params}: Props) {
-  const {data} = await sanityFetch({query: projectBySlugQuery, params})
+  const jar = await cookies()
+  const perspective = await resolvePerspectiveFromCookie({cookies: jar})
+  const {data} = await sanityFetch({query: projectBySlugQuery, params, perspective})
 
   // Only show the 404 page if we're in production, when in draft mode we might be about to create a project on this slug, and live reload won't work on the 404 route
   if (!data?._id && !(await draftMode()).isEnabled) {

app/api/revalidate-sync-tags/route.ts

@@ -0,0 +1,30 @@
+import type {NextRequest} from 'next/server'
+import {unstable_expireTag as expireTag} from 'next/cache'
+import {draftMode} from 'next/headers'
+
+export async function POST(request: NextRequest) {
+  const {isEnabled: isDraftModeEnabled} = await draftMode()
+  const tags = request.nextUrl.searchParams
+    .getAll('tag')
+    .map((tag) => (isDraftModeEnabled ? `drafts:${tag}` : `sanity:${tag}`))
+
+  // If in draft mode all tags must be prefixed with 'draft:'
+  // if ((await draftMode()).isEnabled) {
+  //   if (!tags.every((tag) => tag.startsWith('drafts:'))) {
+  //     return Response.json(
+  //       {error: 'All tags must be prefixed with "drafts:" in draft mode'},
+  //       {status: 400},
+  //     )
+  //   }
+  // } else if (!tags.every((tag) => tag.startsWith('sanity:'))) {
+  //   return Response.json(
+  //     {error: 'All tags must be prefixed with "sanity:" in production mode'},
+  //     {status: 400},
+  //   )
+  // }
+
+  expireTag(...tags)
+  console.log(`<SanityLive /> expired tags: ${tags.join(', ')}`)
+
+  return Response.json(tags)
+}

app/layout.tsx

@@ -19,7 +19,7 @@ const mono = IBM_Plex_Mono({
   weight: ['500', '700'],
 })
 
-export default async function RootLayout({children}: {children: React.ReactNode}) {
+export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
     <html lang="en" className={`${mono.variable} ${sans.variable} ${serif.variable}`}>
       <body>{children}</body>

app/studio/[[...index]]/page.tsx

@@ -1,3 +1,5 @@
+'use cache'
+
 /**
  * This route is responsible for the built-in authoring environment using Sanity Studio v3.
  * All routes under /studio will be handled by this file using Next.js' catch-all routes:
@@ -9,11 +11,16 @@
 
 import config from '@/sanity.config'
 import {NextStudio} from 'next-sanity/studio'
+import {unstable_cacheLife as cacheLife} from 'next/cache'
 
-export const dynamic = 'force-static'
-
-export {metadata, viewport} from 'next-sanity/studio'
-
-export default function StudioPage() {
-  return <NextStudio config={config} />
+export default async function StudioPage() {
+  cacheLife('max')
+  return (
+    <>
+      <meta name="referrer" content="same-origin" />
+      <meta name="robots" content="noindex" />
+      <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+      <NextStudio config={config} />
+    </>
+  )
 }

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -1,12 +1,20 @@
-import {NextConfig} from 'next'
+import type {NextConfig} from 'next'
 
 const config: NextConfig = {
-  // Helps catch bugs
-  reactStrictMode: true,
   experimental: {
     // Speeds up performance by automatically generating useMemo and useCallback in client components
     reactCompiler: true,
+    // Required by `next-sanity/experimental/live`
+    cacheComponents: true,
+    cacheLife: {
+      default: {
+        // Sanity Live handles on-demand revalidation, so the default 15min time based revalidation is too short
+        revalidate: 60 * 60 * 24 * 90, // 90 days
+      },
+    },
   },
+  // Helps catch bugs
+  reactStrictMode: true,
   images: {
     remotePatterns: [{hostname: 'cdn.sanity.io'}],
   },