doc: revert cacheComponents (#1205)

franky47 · web-flow · commit 5afb93b61cf2 · 2025-11-07T15:38:38.000Z
diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
@@ -109,7 +109,6 @@ jobs:
       - name: Build docs
         run: pnpm run build --filter docs
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
           TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
       - uses: 47ng/actions-slack-notify@main
diff --git a/packages/docs/content/docs/community-adapters/inertia-adapter-source.tsx b/packages/docs/content/docs/community-adapters/inertia-adapter-source.tsx
@@ -1,10 +1,7 @@
 import { CodeBlock } from '@/src/components/code-block'
 import { SiTypescript } from '@icons-pack/react-simple-icons'
-import { cacheLife } from 'next/cache'
 
 export async function InertiaAdapterSource() {
-  'use cache'
-  cacheLife('static')
   const source = await fetch(
     'https://raw.githubusercontent.com/47ng/nuqs-inertia-pingcrm/refs/heads/with-nuqs/resources/js/lib/nuqs-inertia-adapter.ts'
   ).then(res => res.text())
diff --git a/packages/docs/content/docs/parsers/community/zod-codecs.source.tsx b/packages/docs/content/docs/parsers/community/zod-codecs.source.tsx
@@ -1,10 +1,7 @@
 import { CodeBlock } from '@/src/components/code-block'
-import { cacheLife } from 'next/cache'
 import { readFile } from 'node:fs/promises'
 
 export async function ZodCodecsSource() {
-  'use cache'
-  cacheLife('static')
   const filePath =
     process.cwd() + '/content/docs/parsers/community/zod-codecs.lib.ts'
   const source = await readFile(filePath, 'utf8')
diff --git a/packages/docs/next.config.mjs b/packages/docs/next.config.mjs
@@ -22,16 +22,7 @@ const config = {
     ]
   },
   reactCompiler: true,
-  cacheComponents: true,
   reactStrictMode: true,
-  cacheLife: {
-    static: {
-      // Only changes on new deploys, assuming we at least deploy once a year
-      stale: 300, // 5 minutes for the client cache
-      revalidate: 365 * 24 * 60 * 60,
-      expire: 366 * 24 * 60 * 60 // 1 year + 1 day (has to be greater than revalidate)
-    }
-  },
   turbopack: {
     debugIds: enableSentry
   },
diff --git a/packages/docs/src/app/(pages)/_landing/bundle-size.tsx b/packages/docs/src/app/(pages)/_landing/bundle-size.tsx
@@ -1,4 +1,3 @@
-import { cacheLife } from 'next/cache'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 
@@ -14,8 +13,6 @@ function prettyBytes(size: number) {
 }
 
 export async function BundleSize() {
-  'use cache'
-  cacheLife('static') // Only changes on new deploys
   const filePath = path.resolve(process.cwd(), '../../packages/nuqs/size.json')
   try {
     const json = await fs.readFile(filePath, 'utf8')
diff --git a/packages/docs/src/app/(pages)/_landing/contributors.tsx b/packages/docs/src/app/(pages)/_landing/contributors.tsx
@@ -1,5 +1,4 @@
 import { cn } from '@/src/lib/utils'
-import { cacheLife, cacheTag } from 'next/cache'
 import { z } from 'zod'
 
 const contributorSchema = z.object({
@@ -30,7 +29,10 @@ async function fetchContributors(): Promise<Contributor[]> {
     // anon=false by default; we only want registered users
 
     const res = await fetch(url.toString(), {
-      headers
+      headers,
+      next: {
+        tags: ['contributors']
+      }
     })
 
     if (!res.ok) {
@@ -102,9 +104,6 @@ async function fetchContributors(): Promise<Contributor[]> {
 }
 
 export async function ContributorsSection() {
-  'use cache'
-  cacheLife('static')
-  cacheTag('contributors')
   let contributors: Contributor[] = []
   try {
     contributors = await fetchContributors()
diff --git a/packages/docs/src/app/(pages)/_landing/demo.tsx b/packages/docs/src/app/(pages)/_landing/demo.tsx
@@ -1,13 +1,10 @@
 import { CodeBlock } from '@/src/components/code-block'
-import { cacheLife } from 'next/cache'
 import fs from 'node:fs/promises'
 import { format } from 'prettier'
 import { Suspense } from 'react'
 import { Demo } from './demo.client'
 
 export async function LandingDemo() {
-  'use cache'
-  cacheLife('static') // Only changes on new deploys
   const demoFilePath =
     process.cwd() + '/src/app/(pages)/_landing/demo.client.tsx'
   const demoFile = await fs.readFile(demoFilePath, 'utf8')
diff --git a/packages/docs/src/app/(pages)/_landing/dependents.tsx b/packages/docs/src/app/(pages)/_landing/dependents.tsx
@@ -1,5 +1,4 @@
 import { cn } from '@/src/lib/utils'
-import { cacheLife } from 'next/cache'
 import { z } from 'zod'
 
 const dependentSchema = z.object({
@@ -14,9 +13,11 @@ const dependentSchema = z.object({
 type Dependent = z.infer<typeof dependentSchema>
 
 export async function fetchDependents() {
-  const data = await fetch('https://dependents.47ng.com').then(res =>
-    res.json()
-  )
+  const data = await fetch('https://dependents.47ng.com', {
+    next: {
+      revalidate: 86_400 // 24 hours
+    }
+  }).then(res => res.json())
   return z.array(dependentSchema).parse(data)
 }
 
@@ -134,8 +135,6 @@ function SponsoredUsedBy() {
 }
 
 async function DependentsLeaderboard() {
-  'use cache'
-  cacheLife('hours')
   let dependents: Dependent[] = []
   try {
     dependents = await fetchDependents()
diff --git a/packages/docs/src/app/(pages)/_landing/gha-status.tsx b/packages/docs/src/app/(pages)/_landing/gha-status.tsx
@@ -1,15 +1,11 @@
 import { cn } from '@/src/lib/utils'
-import { cacheLife, cacheTag } from 'next/cache'
 import React from 'react'
 import { z } from 'zod'
 
 export async function GitHubActionsStatus({
   className,
   ...props
 }: React.ComponentProps<'div'>) {
-  'use cache'
-  cacheLife('hours')
-  cacheTag('github-actions-status')
   const statuses = await getGitHubActionsStatus()
   if (statuses.length === 0) {
     return null
@@ -91,7 +87,10 @@ async function getGitHubActionsStatus() {
       headers: {
         Authorization: `bearer ${process.env.GITHUB_TOKEN}`
       },
-      body: JSON.stringify({ query })
+      body: JSON.stringify({ query }),
+      next: {
+        tags: ['github-actions-status']
+      }
     }).then(res => res.json())
     debugInfo = json
 
diff --git a/packages/docs/src/app/(pages)/blog/[slug]/opengraph-image.tsx b/packages/docs/src/app/(pages)/blog/[slug]/opengraph-image.tsx
@@ -1,5 +1,4 @@
 import { blog } from '@/src/app/source'
-import { cacheLife } from 'next/cache'
 import { notFound } from 'next/navigation'
 import { ImageResponse } from 'next/og'
 import { readFile } from 'node:fs/promises'
@@ -12,6 +11,7 @@ export const size = {
   height: 675
 }
 export const contentType = 'image/png'
+export const dynamic = 'force-static'
 
 type PageProps = {
   params: Promise<{ slug: string }>
@@ -181,8 +181,6 @@ function getFont(weight: string) {
 }
 
 async function loadResources() {
-  'use cache'
-  cacheLife('static')
   const [light, regular, medium, semibold, bold] = await Promise.all([
     getFont('Light'),
     getFont('Regular'),
@@ -263,8 +261,6 @@ function Logo(props: ComponentProps<'svg'>) {
 }
 
 async function getCustomImage(slug: string) {
-  'use cache'
-  cacheLife('static')
   const filePath = join(process.cwd(), 'content/blog/' + slug + '.og.png')
   try {
     const imageBuffer = await readFile(filePath)
diff --git a/packages/docs/src/app/(pages)/blog/page.tsx b/packages/docs/src/app/(pages)/blog/page.tsx
@@ -1,5 +1,3 @@
-'use cache'
-
 import { blog } from '@/src/app/source'
 import {
   Breadcrumb,
@@ -12,14 +10,14 @@ import {
 import { Card } from 'fumadocs-ui/components/card'
 import { DocsDescription, DocsTitle } from 'fumadocs-ui/page'
 import { RssIcon } from 'lucide-react'
-import { cacheLife } from 'next/cache'
 import Link from 'next/link'
 import { ComponentProps } from 'react'
 import { PageFooter } from '../_landing/page-footer'
 import { getBlogPosts } from './_lib/source'
 
-export default async function BlogIndexPage() {
-  cacheLife('static')
+export const dynamic = 'force-static'
+
+export default function BlogIndexPage() {
   const posts = getBlogPosts()
   return (
     <>
diff --git a/packages/docs/src/app/(pages)/blog/rss.xml/route.ts b/packages/docs/src/app/(pages)/blog/rss.xml/route.ts
@@ -1,5 +1,7 @@
 import { getBlogPosts } from '../_lib/source'
 
+export const dynamic = 'force-static'
+
 export async function GET() {
   const rssXml = generateRssXml()
   return new Response(rssXml, {
diff --git a/packages/docs/src/app/(pages)/stats/lib/github.ts b/packages/docs/src/app/(pages)/stats/lib/github.ts
@@ -1,81 +1,10 @@
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import { cacheLife, cacheTag } from 'next/cache'
 import 'server-only'
 import { z } from 'zod'
 
 dayjs.extend(utc)
 
-export type GitHubRepositoryData = {
-  version?: string
-  stars: number
-  issues: number
-  prs: number
-  updatedAt: Date
-}
-
-const repositoryQuerySchema = z.object({
-  data: z.object({
-    repository: z.object({
-      latestRelease: z
-        .object({
-          tagName: z.string().nullish()
-        })
-        .nullish(),
-      issues: z.object({
-        totalCount: z.number()
-      }),
-      pullRequests: z.object({
-        totalCount: z.number()
-      }),
-      stargazerCount: z.number()
-    })
-  })
-})
-
-export async function fetchRepository(
-  slug = '47ng/nuqs'
-): Promise<GitHubRepositoryData> {
-  'use cache'
-  cacheTag('github')
-  cacheLife('hours')
-  const [owner, repo] = slug.split('/')
-  const query = `query {
-  repository(owner: "${owner}", name: "${repo}") {
-    latestRelease {
-      tagName
-    }
-    issues(states: OPEN) {
-      totalCount
-    }
-    pullRequests(states: OPEN) {
-      totalCount
-    }
-    stargazerCount
-  }
-}`.replace(/\s+/g, ' ') // Minify
-  // The querystring is not necessary but it helps tagging cache entries in Cache Explorer
-  const res = await fetch(`https://api.github.com/graphql?repo=${slug}`, {
-    method: 'POST',
-    headers: {
-      Authorization: `bearer ${process.env.GITHUB_TOKEN}`
-    },
-    body: JSON.stringify({ query })
-  })
-  const {
-    data: { repository }
-  } = repositoryQuerySchema.parse(await res.json())
-  return {
-    issues: repository.issues.totalCount,
-    prs: repository.pullRequests.totalCount,
-    stars: repository.stargazerCount,
-    version: repository.latestRelease?.tagName?.replace(/^v/, '') ?? undefined,
-    updatedAt: new Date()
-  }
-}
-
-// --
-
 export type GitHubStarHistory = {
   count: number
   bins: Array<{
diff --git a/packages/docs/src/app/(pages)/stats/lib/npm.ts b/packages/docs/src/app/(pages)/stats/lib/npm.ts
@@ -1,7 +1,6 @@
 import dayjs from 'dayjs'
 import isoWeek from 'dayjs/plugin/isoWeek'
 import minMax from 'dayjs/plugin/minMax'
-import { cacheLife, cacheTag } from 'next/cache'
 import 'server-only'
 import { z } from 'zod'
 
@@ -116,9 +115,6 @@ async function getAllTime(pkg: string): Promise<number> {
 export async function fetchNpmPackage(
   pkg: string
 ): Promise<NpmPackageStatsData> {
-  'use cache'
-  cacheTag('npm')
-  cacheLife('hours')
   // Ensure we cover 90 days + a full first week
   const startOfFirstWeek = dayjs().subtract(90, 'day').startOf('isoWeek')
   const ninetyOrSoDays = dayjs().diff(startOfFirstWeek, 'day')
@@ -135,7 +131,12 @@ export async function fetchNpmPackage(
 }
 
 async function get(url: string): Promise<unknown> {
-  const res = await fetch(url)
+  const res = await fetch(url, {
+    next: {
+      revalidate: 86_400,
+      tags: ['npm-stats']
+    }
+  })
   return res.json()
 }
 
diff --git a/packages/docs/src/app/(pages)/stats/page.tsx b/packages/docs/src/app/(pages)/stats/page.tsx
@@ -13,6 +13,8 @@ import { WidgetSkeleton } from './_components/widget.skeleton'
 import { getVersions, sumVersions } from './lib/versions'
 import { loadSearchParams } from './searchParams'
 
+export const dynamic = 'force-dynamic'
+
 type StatsPageProps = {
   searchParams: Promise<SearchParams>
 }
diff --git a/packages/docs/src/app/(pages)/users/page.tsx b/packages/docs/src/app/(pages)/users/page.tsx
@@ -1,7 +1,6 @@
 import { Description, H1 } from '@/src/components/typography'
 import { Star } from 'lucide-react'
 import { type Metadata } from 'next'
-import { cacheLife } from 'next/cache'
 import { Suspense } from 'react'
 import { fetchDependents } from '../_landing/dependents'
 
@@ -23,8 +22,6 @@ export default function UsersPage() {
 }
 
 async function UsersList() {
-  'use cache'
-  cacheLife('hours')
   const repos = await fetchDependents()
   return (
     <ul className="space-y-2">
diff --git a/packages/docs/src/app/api/isr/route.ts b/packages/docs/src/app/api/isr/route.ts
diff --git a/packages/docs/src/app/docs/[[...slug]]/page.tsx b/packages/docs/src/app/docs/[[...slug]]/page.tsx
diff --git a/packages/docs/src/app/playground/(demos)/_components/source-on-github.tsx b/packages/docs/src/app/playground/(demos)/_components/source-on-github.tsx
diff --git a/packages/docs/src/app/registry/page.tsx b/packages/docs/src/app/registry/page.tsx
diff --git a/packages/docs/src/app/sitemap.ts b/packages/docs/src/app/sitemap.ts
diff --git a/packages/docs/src/components/sidebar-footer.tsx b/packages/docs/src/components/sidebar-footer.tsx
diff --git a/packages/docs/src/components/ui/pr-line.tsx b/packages/docs/src/components/ui/pr-line.tsx
