استاد کشینگ در Next.js – با use cache، use cache: private و use cache: remote

۱. فعال‌سازی Cache Components

در فایل next.config.ts:

const nextConfig = {
  cacheComponents: true,
}

۲. `use cache` – محتوای استاتیک و اشتراکی

مناسب برای صفحات بلاگ، محصولات، و محتوای بازاریابی.

• پیش‌پردازش در زمان build
• کش اشتراکی بین همه کاربران
• بدون نیاز به کوکی یا header

نمونه کش کردن کامپوننت

'use cache'

export async function Bookings({ type = 'haircut' }) {
  const data = await fetch(`/api/bookings?type=${type}`).then(r => r.json())
  return <div>{data.length} bookings</div>
}

تنظیم زمان اعتبار کش

cacheTag('posts')
cacheLife({ stale: 60 })

۳. `use cache: private` – داده‌های شخصی‌سازی‌شده

مناسب برای داشبورد کاربر، پیشنهادات شخصی، و داده‌هایی که به کوکی یا header وابسته‌اند.

• کش فقط برای هر کاربر
• استفاده از cookies() یا headers()
• قابل استفاده در context دینامیک

نمونه توصیه‌های شخصی

'use cache: private'
const sessionId = (await cookies()).get('session-id')?.value || 'guest'
return fetch(`/api/recs?product=${productId}&session=${sessionId}`)

۴. `use cache: remote` – داده‌های اشتراکی و دینامیک

مناسب برای قیمت‌ها، آنالیتیکس، و داده‌هایی که در زمان اجرا تولید می‌شوند.

• کش اشتراکی بین کاربران
• قابل استفاده بعد از await connection()
• ذخیره در cache handler سمت سرور

نمونه قیمت محصول

'use cache: remote'
cacheTag(`price-${productId}`)
cacheLife({ expire: 3600 })

۵. جدول مقایسه

ویژگی	use cache	use cache: private	use cache: remote
پیش‌پردازش در build	✅	❌	❌
استفاده از کوکی	❌	✅	❌
استفاده بعد از connection()	❌	✅	✅
کش اشتراکی	✅	❌	✅
مناسب برای	SEO و بلاگ	داشبورد کاربر	قیمت و آمار

۶. قوانین تو در تویی

• 'use cache' می‌تواند شامل 'use cache: remote' باشد
• 'use cache: remote' می‌تواند شامل خودش باشد
• نامعتبر: 'use cache: private' نباید شامل 'use cache: remote' باشد

۷. مثال واقعی: صفحه محصول فروشگاه

ترکیب سه نوع کش برای محصول، قیمت، و توصیه‌ها.

await getProduct(id) // use cache
await getPrice(id)   // use cache: remote
await getRecs(id)    // use cache: private

۸. Bonus: `use server` و `use client`

• 'use server': برای توابع سمت سرور
• 'use client': برای کامپوننت‌های تعاملی