پیاده‌سازی ISR در Next.js – بازسازی تدریجی صفحات استاتیک با زمان‌بندی و کنترل مسیر

مقدمه

Incremental Static Regeneration (ISR) در Next.js به شما اجازه می‌دهد صفحات استاتیک را به‌صورت تدریجی و بدون build مجدد کل سایت به‌روزرسانی کنید. این روش باعث کاهش بار سرور، بهبود عملکرد و مدیریت بهتر کش می‌شود.

مثال پایه

در مسیر app/blog/[id]/page.tsx می‌توان تنظیم زیر را انجام داد:

export const revalidate = 60 // بازسازی هر ۶۰ ثانیه

export async function generateStaticParams() {
  const posts = await fetch('https://api.vercel.app/blog').then(res => res.json())
  return posts.map(post => ({ id: String(post.id) }))
}

export default async function Page({ params }) {
  const { id } = await params
  const post = await fetch(`https://api.vercel.app/blog/${id}`).then(res => res.json())
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

صفحات شناخته‌شده در زمان build تولید می‌شوند و پس از ۶۰ ثانیه، درخواست بعدی باعث بازسازی پس‌زمینه‌ای صفحه می‌شود.

بازسازی زمان‌دار

برای مثال، در مسیر /blog می‌توان تنظیم زیر را انجام داد:

export const revalidate = 3600 // بازسازی هر ساعت

export default async function Page() {
  const data = await fetch('https://api.vercel.app/blog')
  const posts = await data.json()
  return (
    <main>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </main>
  )
}

بازسازی بر اساس مسیر با revalidatePath

برای بازسازی دقیق‌تر، می‌توان از revalidatePath استفاده کرد:

'use server'
import { revalidatePath } from 'next/cache'

export async function createPost() {
  revalidatePath('/posts') // بازسازی مسیر /posts
}

بازسازی بر اساس برچسب با revalidateTag

برای کنترل دقیق‌تر داده‌ها، می‌توان از revalidateTag استفاده کرد:

fetch('https://api.vercel.app/blog', {
  next: { tags: ['posts'] }
})

و سپس:

'use server'
import { revalidateTag } from 'next/cache'

export async function createPost() {
  revalidateTag('posts') // بازسازی داده‌های دارای برچسب posts
}

استفاده از unstable_cache

برای اتصال به پایگاه داده:

import { unstable_cache } from 'next/cache'

const getCachedPosts = unstable_cache(
  async () => await db.select().from(posts),
  ['posts'],
  { revalidate: 3600, tags: ['posts'] }
)

مدیریت خطاها

در صورت بروز خطا در بازسازی، دادهٔ قبلی از کش ارائه می‌شود و در درخواست بعدی بازسازی مجدد انجام می‌شود.

تنظیم محل ذخیره کش

می‌توان محل ذخیره کش را برای اشتراک‌گذاری بین چند سرور یا ذخیره پایدار تنظیم کرد.

اشکال‌زدایی در توسعه

برای بررسی کش در محیط local:

// next.config.js
module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

// .env
NEXT_PRIVATE_DEBUG_CACHE=1

ملاحظات مهم

• ISR فقط در runtime Node.js پشتیبانی می‌شود
• در Static Export پشتیبانی نمی‌شود
• اگر یکی از fetchها دارای revalidate=0 یا no-store باشد، صفحه به‌صورت پویا رندر می‌شود
• در بازسازی on-demand، rewriteهای مسیر اجرا نمی‌شوند

پشتیبانی پلتفرم‌ها

نوع استقرار	پشتیبانی
Node.js Server	✅
Docker Container	✅
Static Export	❌
Adapters	وابسته به پلتفرم

جمع‌بندی

با استفاده از ISR در Next.js می‌توان صفحات استاتیک را به‌صورت تدریجی و هوشمند بازسازی کرد. این روش باعث بهبود عملکرد، کاهش زمان build و ارائه محتوای به‌روز بدون بار اضافی سرور می‌شود.