Some more with caching #3890

Author: padms

web/app/[locale]/(pages)/[...slug]/page.tsx

@@ -67,7 +67,7 @@ export async function generateMetadata({
       ...((isNewsPage || isMagazineRoom || isMagazinePage) && { type }),
     },
     stega: false,
-    tags: [`page:${slug.join('/')}`],
+    tags: [`page:/${slug.join('/')}`],
     requestTag: 'page-meta',
   })
 

web/app/[locale]/(pages)/news/archive/[...slug]/page.tsx

@@ -237,6 +237,7 @@ export default async function ArchivedNewsPage({ params }: { params: Params }) {
     params: {
       lang: getNameFromIso(locale) ?? 'en_GB',
     },
+    tags: [`sanity:siteMenu:${locale}`],
   })
 
   const pageData = await getArchivedPageData(await params)

web/app/[locale]/(pages)/news/page.tsx

@@ -28,6 +28,7 @@ export async function generateMetadata(): Promise<Metadata> {
       },
       stega: false,
       requestTag: 'meta-news',
+      tags: [`sanity:newsroom:${locale}`],
     })
 
     return constructSanityMetadata(pageSlug, locale, metaData)

web/app/[locale]/layout.tsx

@@ -47,6 +47,7 @@ export default async function LocaleLayout({
     await routeSanityFetch({
       query: footerAndErrorImageQuery,
       params: queryParams,
+      tags: [`sanity:footer:${locale}`],
     })
 
   const { errorImage, ...footerData } = footerAndErrorImageData || {}

web/app/[locale]/page.tsx

@@ -42,6 +42,7 @@ export default async function Home(_: PageProps<'/[locale]'>) {
       params: {
         lang: getNameFromIso(locale) ?? 'en_GB',
       },
+      tags: [`sanity:siteMenu:${locale}`],
     }),
     getPage({
       slug: '',

web/next.config.ts

@@ -43,6 +43,7 @@ export type ConfigRedirect = {
 
 const nextConfig: NextConfig = withNextIntl({
   output: 'standalone',
+  cacheComponents: true,
   transpilePackages: [
     'require-in-the-middle',
     'import-in-the-middle',

web/sanity/lib/fetch.ts

@@ -1,7 +1,7 @@
 import { draftMode } from 'next/headers'
 import type { DefinedFetchType } from 'next-sanity/live'
-import { client } from './client'
 import { sanityFetch } from './live'
+import { optimizedFetch } from './simpleFetch'
 
 /**
  * Feature flag for the optimized fetch.
@@ -14,36 +14,6 @@ import { sanityFetch } from './live'
 export const IS_FETCH_OPTIMIZED =
   process.env.NEXT_PUBLIC_OPTIMIZED_SANITY_FETCH === 'true'
 
-const optimizedFetch: DefinedFetchType = async ({
-  query,
-  params = {},
-  tags = [],
-  stega = false,
-  perspective = 'published',
-  requestTag = 'optimized-fetch',
-}) => {
-  console.log('Fetching with optimized fetch:', {
-    tags,
-    stega,
-    perspective,
-    requestTag,
-  })
-  const { result, resultSourceMap } = await client.fetch(query, await params, {
-    filterResponse: false,
-    perspective,
-    stega,
-    useCdn: true,
-    tag: requestTag,
-    next: {
-      // only revalidated on demand through the Sanity webhook
-      revalidate: false,
-      tags: tags,
-    },
-  })
-
-  return { data: result, sourceMap: resultSourceMap ?? null, tags: tags }
-}
-
 export const routeSanityFetch: DefinedFetchType = async options => {
   if (!IS_FETCH_OPTIMIZED) {
     return sanityFetch(options)

web/sanity/lib/simpleClient.ts

@@ -0,0 +1,41 @@
+import { type ClientConfig, createClient } from '@sanity/client'
+import { apiVersion, dataset, projectId, studioUrl } from '../lib/api'
+
+const sanityConfig: ClientConfig = {
+  projectId,
+  dataset,
+  apiVersion,
+  //perspective: dataset === 'global-development' ? 'drafts' : 'published',
+  useCdn: true,
+  ignoreBrowserTokenWarning: dataset === 'global-development',
+  requestTagPrefix: 'website', // to track usage on web in sanity console
+  stega: {
+    studioUrl,
+    // Set logger to 'console' for more verbose logging
+    // logger: console,
+    filter: props => {
+      if (props.sourcePath.at(-1) === 'title') {
+        return true
+      }
+
+      return props.filterDefault(props)
+    },
+  },
+}
+
+export const client = createClient({
+  ...sanityConfig,
+  token: process.env.SANITY_API_TOKEN,
+})
+
+//only for next config
+export const notSecuredTokenClient = createClient({
+  ...sanityConfig,
+  token: process.env.SANITY_API_TOKEN,
+})
+
+export const noCdnClient = createClient({
+  ...sanityConfig,
+  useCdn: false,
+  token: process.env.SANITY_API_TOKEN,
+})

web/sanity/lib/simpleFetch.ts

@@ -0,0 +1,31 @@
+'use cache'
+import { cacheTag } from 'next/cache'
+import type { DefinedFetchType } from 'next-sanity/live'
+import { client as simpleClient } from './simpleClient'
+
+export const optimizedFetch: DefinedFetchType = async ({
+  query,
+  params = {},
+  tags = [],
+  perspective = 'published',
+  requestTag = 'optimized-fetch',
+}) => {
+  console.log('Fetching with optimized fetch:', {
+    tags,
+    perspective,
+    requestTag,
+  })
+  cacheTag(...tags)
+  const { result, resultSourceMap } = await simpleClient.fetch(
+    query,
+    await params,
+    {
+      filterResponse: false,
+      perspective,
+      useCdn: true,
+      tag: requestTag,
+    },
+  )
+
+  return { data: result, sourceMap: resultSourceMap ?? null, tags: tags }
+}