test cache components

Author: stipsan

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

@@ -4,8 +4,10 @@ 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'
+import type {PagesBySlugQueryResult} from '@/sanity.types'
 
 type Props = {
   params: Promise<{slug: string}>
@@ -15,9 +17,13 @@ export async function generateMetadata(
   {params}: Props,
   parent: ResolvingMetadata,
 ): Promise<Metadata> {
+  const isDraftMode = (await draftMode()).isEnabled
   const {data: page} = await sanityFetch({
     query: pagesBySlugQuery,
     params,
+    perspective: isDraftMode
+      ? await resolvePerspectiveFromCookie({cookies: await cookies()})
+      : 'published',
     stega: false,
   })
 
@@ -38,13 +44,27 @@ export async function generateStaticParams() {
 }
 
 export default async function PageSlugRoute({params}: Props) {
-  const {data} = await sanityFetch({query: pagesBySlugQuery, params})
+  const isDraftMode = (await draftMode()).isEnabled
+  const {data} = await sanityFetch({
+    query: pagesBySlugQuery,
+    params,
+    perspective: isDraftMode
+      ? await resolvePerspectiveFromCookie({cookies: await cookies()})
+      : 'published',
+    stega: isDraftMode,
+  })
 
   // 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) {
+  if (!data?._id && !isDraftMode) {
     notFound()
   }
 
+  return <CachedPageSlugRoute data={data} />
+}
+
+async function CachedPageSlugRoute({data}: {data: PagesBySlugQueryResult}) {
+  'use cache'
+
   const {body, overview, title} = data ?? {}
 
   return (

app/(personal)/client-functions.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import {isCorsOriginError} from 'next-sanity/live'
+import {isCorsOriginError} from 'next-sanity'
 import {toast} from 'sonner'
 
 export function handleError(error: unknown) {

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 {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,28 @@ 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 && (
+      {isDraftMode && (
         <>
           <DraftModeToast />
           <VisualEditing />
@@ -77,3 +78,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

@@ -1,23 +1,18 @@
 import {HomePage} from '@/components/HomePage'
-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, draftMode} from 'next/headers'
 
 export default async function IndexRoute() {
-  const {data} = await sanityFetch({query: homePageQuery})
-
-  if (!data) {
-    return (
-      <div className="text-center">
-        You don&rsquo;t have a homepage yet,{' '}
-        <Link href={`${studioUrl}/structure/home`} className="underline">
-          create one now
-        </Link>
-        !
-      </div>
-    )
-  }
+  const isDraftMode = (await draftMode()).isEnabled
+  const {data} = await sanityFetch({
+    query: homePageQuery,
+    perspective: isDraftMode
+      ? await resolvePerspectiveFromCookie({cookies: await cookies()})
+      : 'published',
+    stega: isDraftMode,
+  })
 
   return <HomePage data={data} />
 }

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

@@ -7,9 +7,11 @@ 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'
+import type {ProjectBySlugQueryResult} from '@/sanity.types'
 
 type Props = {
   params: Promise<{slug: string}>
@@ -19,9 +21,13 @@ export async function generateMetadata(
   {params}: Props,
   parent: ResolvingMetadata,
 ): Promise<Metadata> {
+  const isDraftMode = (await draftMode()).isEnabled
   const {data: project} = await sanityFetch({
     query: projectBySlugQuery,
     params,
+    perspective: isDraftMode
+      ? await resolvePerspectiveFromCookie({cookies: await cookies()})
+      : 'published',
     stega: false,
   })
   const ogImage = urlForOpenGraphImage(
@@ -51,13 +57,27 @@ export async function generateStaticParams() {
 }
 
 export default async function ProjectSlugRoute({params}: Props) {
-  const {data} = await sanityFetch({query: projectBySlugQuery, params})
+  const isDraftMode = (await draftMode()).isEnabled
+  const {data} = await sanityFetch({
+    query: projectBySlugQuery,
+    params,
+    perspective: isDraftMode
+      ? await resolvePerspectiveFromCookie({cookies: await cookies()})
+      : 'published',
+    stega: isDraftMode,
+  })
 
   // 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) {
+  if (!data?._id && !isDraftMode) {
     notFound()
   }
 
+  return <CachedProjectSlugRoute data={data} />
+}
+
+async function CachedProjectSlugRoute({data}: {data: ProjectBySlugQueryResult}) {
+  'use cache'
+
   const dataAttribute =
     data?._id && data._type
       ? createDataAttribute({

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,5 +1,5 @@
 /**
- * This route is responsible for the built-in authoring environment using Sanity Studio v3.
+ * This route is responsible for the built-in authoring environment using Sanity Studio v4.
  * All routes under /studio will be handled by this file using Next.js' catch-all routes:
  * https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes
  *
@@ -10,10 +10,12 @@
 import config from '@/sanity.config'
 import {NextStudio} from 'next-sanity/studio'
 
-export const dynamic = 'force-static'
-
 export {metadata, viewport} from 'next-sanity/studio'
 
 export default function StudioPage() {
-  return <NextStudio config={config} />
+  return (
+    <>
+      <NextStudio config={config} />
+    </>
+  )
 }

components/HomePage.tsx

@@ -12,8 +12,22 @@ export interface HomePageProps {
 }
 
 export async function HomePage({data}: HomePageProps) {
+  'use cache'
+
+  if (!data) {
+    return (
+      <div className="text-center">
+        You don&rsquo;t have a homepage yet,{' '}
+        <Link href={`${studioUrl}/structure/home`} className="underline">
+          create one now
+        </Link>
+        !
+      </div>
+    )
+  }
+
   // Default to an empty object to allow previews on non-existent documents
-  const {overview = [], showcaseProjects = [], title = ''} = data ?? {}
+  const {overview = [], showcaseProjects = [], title = ''} = data
 
   const dataAttribute =
     data?._id && data?._type

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'}],
   },