12- Data Fetching در Next.js 14+ (fetch با cache, next: { revalidate })

بگذارید با یک مثال ساده شروع کنم:

فرض کنید داری یک وب‌سایت فروشگاهی می‌سازی. توی صفحه اصلی، لیست محصولات رو باید از سرور بگیریم. سوال اینجاست: چند وقت یک بار این اطلاعات رو از سرور بگیریم؟

۱. کش کردن پیش‌فرض (Cache)

jsx

// در سرور کامپوننت (Server Component)
async function getProducts() {
  const res = await fetch('https://api.example.com/products')
  return res.json()
}

export default async function ProductsPage() {
  const products = await getProducts()
  return <ProductList products={products} />
}

اینجا fetch به طور پیش‌فرض داده‌ها رو کش (Cache) میکنه. یعنی:

• اولین درخواست: داده از API گرفته میشه و توی کش سرور ذخیره میشه

• درخواست‌های بعدی: داده از کش برگردونده میشه (خیلی سریع‌تر)

این برای محصولاتی که زیاد تغییر نمی‌کنند عالیه!

۲. بازسازی خودکار با revalidate

حالا فرض کن قیمت محصولات ممکنه هر روز عوض بشه. می‌خوای هر ۶۰ ثانیه یک بار اطلاعات به‌روز بشه:

jsx

async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { 
      revalidate: 60  // هر ۶۰ ثانیه یک بار ریفرش میشه
    }
  })
  return res.json()
}

این یعنی چی؟

• تا ۶۰ ثانیه: داده از کش میاد (سریع)

• بعد از ۶۰ ثانیه: درخواست بعدی، داده جدید از API گرفته میشه و کش به‌روز میشه

• به این حالت ISR (Incremental Static Regeneration) می‌گن

۳. بدون کش (همیشه تازه)

برای اطلاعات حساس مثل وضعیت سبد خرید کاربر:

jsx

async function getCart() {
  const res = await fetch('https://api.example.com/cart', {
    cache: 'no-store'  // هیچ کشی نمیشه
  })
  return res.json()
}

هر بار که صفحه درخواست بشه، اطلاعات جدید از سرور گرفته میشه.

خلاصه برای مصاحبه:

نکته طلایی:

Next.js 14 این قابلیت رو داخل fetch بومی مرورگر قرار داده. نیازی به کتابخونه جداگانه نیست. و همه اینها در Server Components اتفاق می‌افته، یعنی داده‌ها قبل از رسیدن به مرورگر کاربر، توی سرور آماده میشن.

مثال ترکیبی توی یه پروژه واقعی:

jsx

// app/products/page.jsx
export default async function ProductsPage() {
  // ۱. اطلاعات عمومی - کش میشه
  const products = await fetch('https://api.ir/products', {
    next: { revalidate: 3600 } // هر ۱ ساعت
  }).then(res => res.json())
  
  // ۲. وضعیت کاربر - همیشه تازه
  const user = await fetch('https://api.ir/user/me', {
    cache: 'no-store'
  }).then(res => res.json())
  
  return (
    <>
      <UserStatus user={user} />
      <ProductGrid products={products} />
    </>
  )
}

این روش به ما کمک میکنه تا سرعت و تازگی داده‌ها رو همزمان داشته باشیم.