فعال‌سازی کامپوننت‌های کش‌شونده در Next.js – مهاجرت از تنظیمات قدیمی و کنترل دقیق رندر پویا

فعال‌سازی کامپوننت‌های کش‌شونده

برای فعال‌سازی این قابلیت، کافی است گزینهٔ cacheComponents را در فایل next.config.ts تنظیم کنید:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
}

export default nextConfig

تغییرات در تنظیمات مسیرها

• dynamic = "force-dynamic": دیگر نیازی نیست. همهٔ صفحات به‌صورت پویا در نظر گرفته می‌شوند.
• dynamic = "force-static": باید با 'use cache' جایگزین شود. استفاده از APIهای زمان اجرا مانند cookies() در کامپوننت‌های کش‌شونده مجاز نیست.
• revalidate: با cacheLife جایگزین می‌شود. می‌توان مدت زمان کش را به‌صورت دقیق مشخص کرد.
• fetchCache: دیگر لازم نیست. تمام fetchها در محدودهٔ کش‌شده به‌صورت خودکار کش می‌شوند.
• runtime = 'edge': پشتیبانی نمی‌شود. این قابلیت فقط در محیط Node.js قابل استفاده است.

تغییر مدل ذهنی توسعه‌دهنده

قبل از Cache Components: صفحات به‌صورت ایستا در نظر گرفته می‌شدند و تنظیمات مسیر کنترل کش را انجام می‌دادند.

بعد از Cache Components: همه چیز پویا است مگر اینکه با 'use cache' مشخص شود. کنترل کش در سطح فایل، کامپوننت یا تابع انجام می‌شود.

مثال‌هایی از استفاده

دسترسی به APIهای زمان اجرا

کامپوننت‌هایی که از cookies() استفاده می‌کنند باید در مرز <Suspense> قرار گیرند:

// app/user.tsx
import { cookies } from 'next/headers'

export async function User() {
  const session = (await cookies()).get('session')?.value
  return '...'
}

// app/page.tsx
import { Suspense } from 'react'
import { User, AvatarSkeleton } from './user'

export default function Page() {
  return (
    <section>
      <h1>This will be pre-rendered</h1>
      <Suspense fallback={<AvatarSkeleton />}>
        <User />
      </Suspense>
    </section>
  )
}

ارسال پراپ‌های پویا

دسترسی به مقدار پراپ باعث پویا شدن کامپوننت می‌شود، نه صرفاً ارسال آن:

// app/page.tsx
import { Table, TableSkeleton } from './table'
import { Suspense } from 'react'

export default function Page({ searchParams }) {
  return (
    <section>
      <h1>This will be pre-rendered</h1>
      <Suspense fallback={<TableSkeleton />}>
        <Table sortPromise={searchParams.then((s) => s.sort)} />
      </Suspense>
    </section>
  )
}

پاسخ به پرسش‌های متداول

آیا این قابلیت جایگزین PPR شده؟

خیر. Cache Components در واقع پیاده‌سازی PPR است. پرچم آزمایشی قبلی حذف شده ولی زیرساخت PPR همچنان فعال است.

چه چیزی را باید کش کنیم؟

هر چیزی که به داده‌های زمان اجرا وابسته نیست و می‌توان آن را برای چند درخواست کش کرد، با 'use cache' و cacheLife مشخص شود.

چگونه کش را سریع به‌روزرسانی کنیم؟

از cacheTag برای برچسب‌گذاری داده‌ها استفاده کنید و با updateTag یا revalidateTag آن‌ها را بازسازی کنید.