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

کامپوننت‌های کش‌شونده در Next.js روشی نوین برای ترکیب سرعت صفحات ایستا با تازگی داده‌های پویا ارائه می‌دهند. با استفاده از رندر جزئی (Partial Prerendering)، مرزهای Suspense، و دستور 'use cache' می‌توان بخش‌هایی از رابط کاربری و داده‌ها را کش کرد و در عین حال تجربه‌ای سریع و تعاملی برای کاربر فراهم ساخت. این مقاله نحوهٔ عملکرد، ابزارهای کنترل، و روش‌های برچسب‌گذاری و بازسازی کش را بررسی می‌کند.

Cache ComponentsPartial PrerenderingSuspenseuse cache

مقدمه

کامپوننت‌های کش‌شونده در Next.js امکان ترکیب رندر ایستا و پویا را فراهم می‌کنند. به‌جای انتخاب بین سرعت صفحات ایستا یا تازگی داده‌های پویا، می‌توان بخش‌هایی از رابط کاربری یا داده‌ها را کش کرد و در صورت نیاز، محتوای پویا را به‌صورت استریم بارگذاری کرد. این قابلیت با استفاده از رندر جزئی (Partial Prerendering)، مرزهای Suspense، و دستور 'use cache' پیاده‌سازی می‌شود.

نحوهٔ عملکرد کامپوننت‌های کش‌شونده

با فعال‌سازی این قابلیت، همهٔ مسیرها به‌صورت پویا در نظر گرفته می‌شوند. اما می‌توان بخش‌هایی از صفحه را کش کرد تا در شِل اولیهٔ HTML گنجانده شوند. این شِل به‌سرعت به کاربر ارسال می‌شود و بخش‌های پویا به‌صورت استریم در ادامه بارگذاری می‌شوند.

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

سه ابزار اصلی برای کنترل رندر

۱. Suspense برای داده‌های زمان اجرا

کامپوننت‌هایی که از APIهای زمان اجرا مانند cookies()، headers() یا searchParams استفاده می‌کنند باید در مرز <Suspense> قرار گیرند تا سایر بخش‌ها بتوانند ایستا رندر شوند.

۲. Suspense برای داده‌های پویا

کامپوننت‌هایی که داده‌هایی مانند fetch یا db.query() دریافت می‌کنند نیز باید در مرز Suspense قرار گیرند تا امکان استریم فراهم شود.

۳. کش کردن داده‌ها با use cache

با افزودن 'use cache' به کامپوننت سروری یا توابع async می‌توان خروجی آن‌ها را کش کرد:

export async function getProducts() {
  'use cache'
  const data = await db.query('SELECT * FROM products')
  return data
}

استریمینگ و رندر جزئی

استریمینگ باعث می‌شود بخش‌هایی از مسیر به‌صورت موازی رندر و به مرور به کلاینت ارسال شوند. این کار زمان نمایش اولیه و تعامل‌پذیری را کاهش می‌دهد.

استفاده از cacheLife

برای تعیین مدت زمان اعتبار کش، از cacheLife استفاده کنید:

export default async function Page() {
  'use cache'
  cacheLife('hours')
  return <div>...</div>
}

نکات مهم و بهترین روش‌ها

ورودی توابع کش‌شونده باید قابل سریال‌سازی باشد
می‌توان مقادیر غیرسریال‌سازی را دریافت کرد، به شرطی که بررسی نشوند
نباید داده‌های زمان اجرا مانند cookies() را به توابع کش‌شونده ارسال کرد

برچسب‌گذاری و بازسازی کش

استفاده از updateTag

برای بازسازی فوری کش در همان درخواست:

export async function getCart() {
  'use cache'
  cacheTag('cart')
  // fetch cart data
}

export async function updateCart(itemId) {
  'use server'
  // update cart
  updateTag('cart')
}

استفاده از revalidateTag

برای بازسازی با تأخیر و رفتار stale-while-revalidate:

export async function getPosts() {
  'use cache'
  cacheTag('posts')
  // fetch posts
}

export async function createPost(post) {
  'use server'
  // create post
  revalidateTag('posts', 'max')
}

جمع‌بندی

کامپوننت‌های کش‌شونده در Next.js امکان کنترل دقیق رندر و حافظه کش را فراهم می‌کنند. با ترکیب مرزهای Suspense، استریمینگ، و دستور 'use cache' می‌توان اپلیکیشن‌هایی سریع، پویا و قابل نگهداری ساخت که هم تجربه کاربری عالی دارند و هم عملکرد بهینه.