test cache components

Author: stipsan

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

@@ -6,6 +6,7 @@ import type {Metadata, ResolvingMetadata} from 'next'
 import {toPlainText, type PortableTextBlock} from 'next-sanity'
 import {draftMode} from 'next/headers'
 import {notFound} from 'next/navigation'
+import {resolveCookiePerspective} from 'next-sanity/live/use-cache'
 
 type Props = {
   params: Promise<{slug: string}>
@@ -15,10 +16,12 @@ export async function generateMetadata(
   {params}: Props,
   parent: ResolvingMetadata,
 ): Promise<Metadata> {
+  const perspective = await resolveCookiePerspective()
   const {data: page} = await sanityFetch({
     query: pagesBySlugQuery,
     params,
     stega: false,
+    perspective,
   })
 
   return {
@@ -38,7 +41,8 @@ export async function generateStaticParams() {
 }
 
 export default async function PageSlugRoute({params}: Props) {
-  const {data} = await sanityFetch({query: pagesBySlugQuery, params})
+  const perspective = await resolveCookiePerspective()
+  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

@@ -11,14 +11,16 @@ import {VisualEditing} from 'next-sanity/visual-editing'
 import {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 {resolveCookiePerspective} from 'next-sanity/live/use-cache'
 
 export async function generateMetadata(): Promise<Metadata> {
+  const perspective = await resolveCookiePerspective()
   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,8 +45,9 @@ 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 perspective = await resolveCookiePerspective()
+  const {data} = await sanityFetch({query: settingsQuery, perspective})
   return (
     <>
       <div className="flex min-h-screen flex-col bg-white text-black">
@@ -66,7 +69,7 @@ export default async function IndexRoute({children}: {children: React.ReactNode}
         </Suspense>
       </div>
       <Toaster />
-      <SanityLive onError={handleError} />
+      <SanityLive onError={handleError} revalidateSyncTags={revalidateSyncTags} />
       {(await draftMode()).isEnabled && (
         <>
           <DraftModeToast />

app/(personal)/page.tsx

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

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

@@ -10,6 +10,7 @@ import {createDataAttribute, toPlainText} from 'next-sanity'
 import {draftMode} from 'next/headers'
 import Link from 'next/link'
 import {notFound} from 'next/navigation'
+import {resolveCookiePerspective} from 'next-sanity/live/use-cache'
 
 type Props = {
   params: Promise<{slug: string}>
@@ -19,9 +20,11 @@ export async function generateMetadata(
   {params}: Props,
   parent: ResolvingMetadata,
 ): Promise<Metadata> {
+  const perspective = await resolveCookiePerspective()
   const {data: project} = await sanityFetch({
     query: projectBySlugQuery,
     params,
+    perspective,
     stega: false,
   })
   const ogImage = urlForOpenGraphImage(
@@ -51,7 +54,8 @@ export async function generateStaticParams() {
 }
 
 export default async function ProjectSlugRoute({params}: Props) {
-  const {data} = await sanityFetch({query: projectBySlugQuery, params})
+  const perspective = await resolveCookiePerspective()
+  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,15 @@
-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,
+    // Optimal Sanity Live experience
+    cacheComponents: true,
   },
+  transpilePackages: ['next-sanity'],
   images: {
     remotePatterns: [{hostname: 'cdn.sanity.io'}],
   },