کامپوننت های کش

در نسخه‌های مدرن Next.js، قابلیت Cache Components معماری جدیدی را برای ذخیره‌سازی لایه‌های مختلف برنامه معرفی می‌کند. با استفاده از دایرکتیو "use cache"، شما می‌توانید مقدار بازگشتی توابع ناهمگام (async) یا کل ساختار یک کامپوننت را کش کنید تا سرعت پاسخ‌دهی برنامه به شدت افزایش یابد.

چیزهایی که در این درس یاد می‌گیرید:

• نحوه فعال‌سازی قابلیت Cache Components در فایل تنظیمات Next.js

• تفاوت و کاربرد کش در سطح داده (Data-level) و سطح رابط کاربری (UI-level)

• رفتار کلیدهای کش (Cache Keys) بر اساس ورودی‌ها و متغیرهای بسته (Closed-over values)

• نحوه استریم کردن داده‌های غیرکَش (Streaming uncached data) با استفاده از <Suspense>

فعال‌سازی در تنظیمات پروژه

برای استفاده از این ویژگی، ابتدا باید گزینه cacheComponents را در فایل پیکربندی Next.js فعال کنید:

// next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  cacheComponents: true, // فعال‌سازی قابلیت کامپوننت‌های کش
}
 
export default nextConfig

💡 نکته: وقتی قابلیت Cache Components فعال باشد، پوینت‌های مربوط به متدهای GET در Route Handlerها نیز دقیقاً از همان مدل پیش‌رندرینگ (Prerendering) صفحات پیروی خواهند کرد.

نحوه کارکرد دایرکتیو "use cache"

این دایرکتیو می‌تواند خروجی توابع یا کامپوننت‌ها را ذخیره کند. نکته کلیدی اینجاست که آرگومان‌های ورودی تابع و تمام متغیرهایی که از اسکوپ‌های بالاتر درون تابع استفاده شده‌اند (Closed-over values)، به صورت خودکار به کلید کش (Cache Key) تبدیل می‌شوند.

این یعنی اگر ورودی تابع تغییر کند، Next.js یک نمونه کش کاملاً مجزا برای آن ورودی می‌سازد که این امر پیاده‌سازی کش‌های شخصی‌سازی‌شده یا پارامتریک را بسیار آسان می‌کند.

۱. کش در سطح داده (Data-level Caching)

اگر می‌خواهید دیتای خام دریافتی از دیتابیس یا یک API را مستقل از بخش ظاهری (UI) کش کنید، دایرکتیو 'use cache' را در اولین خط از بدنه تابعِ دریافت داده قرار دهید. در این لایه معمولاً با متد cacheLife طول عمر کش را مشخص می‌کنند:

// app/lib/data.ts
import { cacheLife } from 'next/cache'
 
export async function getUsers() {
  'use cache'        // فعال‌سازی کش برای این تابع
  cacheLife('hours') // تعیین بازه زمانی کش (به عنوان مثال: چند ساعت)
  
  return db.query('SELECT * FROM users')
}

چه زمانی کاربرد دارد؟ زمانی که یک دیتای واحد (مثل لیست کاربران یا محصولات) قرار است در چندین کامپوننت مختلف در سراسر برنامه استفاده شود.

۲. کش در سطح رابط کاربری (UI-level Caching)

شما می‌توانید فراتر از دیتای خام رفته و خروجی رندر شده‌ی یک کامپوننت، صفحه (Page) یا لایوت (Layout) را کاملاً کش کنید. برای این کار کافی است دایرکتیو را در بالاترین خط بدنه کامپوننت ناهمگام قرار دهید:

// app/page.tsx
import { cacheLife } from 'next/cache'
 
export default async function Page() {
  'use cache'        // کش کردن کل ساختار HTML خروجی این کامپوننت
  cacheLife('hours')
 
  const users = await db.query('SELECT * FROM users')
 
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

📝 یک نکته کاربردی: اگر دایرکتیو "use cache" را در بالاترین خط یک فایل (خارج از توابع) بنویسید، تمام توابعی که از آن فایل export می‌شوند به صورت خودکار کش خواهند شد.

استریم کردن داده‌های غیرکَش (Streaming Uncached Data)

برای کامپوننت‌هایی که اطلاعات آن‌ها دائماً در حال تغییر است و نیاز دارید در هر درخواست دیتای کاملاً تازه (Fresh) به کاربر نشان دهید (مثل قیمت لحظه‌ای یا آخرین پست‌ها)، نباید از "use cache" استفاده کنید.

در این سناریو، برای بالا نگه‌داشتن سرعت برنامه، باید کامپوننت را درون تگ <Suspense> ری‌آکت قرار دهید و یک لودینگ (fallback) برای آن ست کنید. در زمان درخواست کاربر، Next.js ابتدا پوسته استاتیک صفحه (Static Shell) همراه با لودینگ را سریعاً به مرورگر می‌فرستد و به محض اینکه اجرای کدهای ناهمگام کامپوننت به پایان رسید، محتوای اصلی را به سمت مرورگر استریم (Stream) می‌کند:

// page.tsx
import { Suspense } from 'react'
 
// کامپوننتی که دیتای آن نباید کش شود و همیشه باید تازه باشد
async function LatestPosts() {
  const data = await fetch('https://api.example.com/posts')
  const posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}
 
export default function Page() {
  return (
    <>
      <h1>وبلاگ من</h1>
      {/* پوسته استاتیک فوراً لود می‌شود و کامپوننت به مرور زمان استریم خواهد شد */}
      <Suspense fallback={<p>در حال بارگذاری پست‌ها...</p>}>
        <LatestPosts />
      </Suspense>
    </>
  )
}

⚠️ یک اشتباه رایج درباره Suspense: تگ <Suspense> صرفاً یک رابط کاربری موقت (Fallback) در زمان اجرای فرآیندهای ناهمگام نمایش می‌دهد، اما خودش به تنهایی کامپوننت را وادار به رندر داینامیک در سمت سرور نمی‌کند. اگر کامپوننتی فقط کدهای همگام (Synchronous) داشته باشد، حتی اگر داخل <Suspense> هم قرار بگیرد، در مرحله پیش‌رندرینگ (Prerendering) کامپایل شده و به صورت استاتیک ذخیره می‌شود.

خلاصه نکات کلیدی (Recap)

• قابلیت کامپوننت‌های کش با گزینه cacheComponents: true در فایل کانفیگ فعال می‌شود.

• دایرکتیو "use cache" را می‌توان در سطح توابع دیتا یا در سطح کامپوننت‌های UI اعمال کرد.

• پارامترهای ورودی توابع کش‌شده به صورت خودکار ساختار کلید کش (Cache Key) را تشکیل می‌دهند.

• برای دیتایی که نباید کش شود، از ترکیب کامپوننت‌های ناهمگام و <Suspense> استفاده کنید تا از مزیت استریمینگ (Streaming) و پوسته‌های استاتیک بهره‌مند شوید.