استفاده از قابلیت ISR

ISR یا Incremental Static Regeneration یک ویژگی در NextJS است که به شما اجازه می‌دهد تا صفحات استاتیک را به صورت انتخابی و بدون نیاز به بازسازی کل سایت، به‌روزرسانی کنید. این قابلیت ترکیبی از مزایای Static Site Generation (SSG) و انعطاف‌پذیری Server-Side Rendering (SSR) را ارائه می‌دهد. در واقع، عملکرد ISR به شکل زیر است:

• ساخت تدریجی صفحات: صفحات استاتیک می‌توانند پس از بیلد اولیه سایت، در صورت نیاز (با request کاربر)، build یا به‌روز شوند.
• پیکربندی از طریق revalidate: شما می‌توانید زمان‌بندی به‌روزرسانی صفحات را با استفاده از ویژگی revalidate تعیین کنید. برای مثال، اگر مقدار revalidate را برابر با ۱۰ قرار دهید، صفحه هر ۱۰ ثانیه یک‌بار به‌روزرسانی می‌شود.
• پاسخ‌دهی سریع: در زمان درخواست کاربر، نسخه موجود در کش به سرعت ارائه می‌شود و به‌روزرسانی‌ها به صورت پس‌زمینه انجام می‌شوند.

همانطور که گفته شد، ISR امکان به‌روزرسانی صفحات استاتیک به‌صورت انتخابی و بدون نیاز به بازسازی کل سایت را فراهم می‌کند. این کار با استفاده از یک ویژگی کلیدی به نام revalidate در متد getStaticProps انجام می‌شود. مقدار revalidate تعیین می‌کند که یک صفحه استاتیک چه زمانی نیاز به بازسازی در پس‌زمینه دارد. زمانی که کاربران از صفحه‌ای بازدید می‌کنند، اگر زمان تعیین‌شده در revalidate گذشته باشد، یک نسخه جدید از صفحه ساخته می‌شود، در حالی که کاربران همچنان نسخه قدیمی را مشاهده می‌کنند.

در این فرآیند، NextJS از کش (Cache) برای ارائه سریع نسخه موجود صفحه استفاده می‌کند. این باعث می‌شود تا کاربران تجربه سریعی داشته باشند، حتی اگر داده‌های صفحه در حال به‌روزرسانی باشد. هنگامی که فرآیند بازسازی کامل شد، نسخه جدید جایگزین نسخه قدیمی می‌شود و برای درخواست‌های بعدی ارائه خواهد شد. این ویژگی برای وب‌سایت‌هایی که شامل محتوای متغیر یا صفحات زیادی هستند، مانند فروشگاه‌های آنلاین یا سایت‌های خبری، بسیار ایده‌آل است.

مثال زیر نحوه پیاده‌سازی ISR را نشان می‌دهد. این کد داده‌ها را از یک API فرضی دریافت کرده و هر ۱۰ ثانیه، صفحه را به‌روز می‌کند:

// pages/isr-example.js

export async function getStaticProps() {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then((res) => res.json());

  return {
    props: { data },
    revalidate: 10, // updates every 10 seconds
  };
}

const ISRExample = ({ data }) => {
  return (
    <div>
      <h1>ISR Example</h1>
      <p><strong>Title:</strong> {data.title}</p>
      <p><strong>Body:</strong> {data.body}</p>
    </div>
  );
};

export default ISRExample;

در پروژه‌های واقعی ممکن است داده‌ها ناقص باشند یا API به درستی پاسخ ندهد. در چنین مواردی، می‌توانید مانند قطعه کد زیر، عمل کنید:

export async function getStaticProps() {
  try {
    const data = await fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((res) => res.json());

    if (!data) {
      return {
        notFound: true, // display 404 page
      };
    }

    return {
      props: { data },
      revalidate: 10, // update every 10 seconds
    };
  } catch (error) {
    console.error('Error fetching data:', error);
    return {
      props: { data: null },
      revalidate: 10,
    };
  }
}

از آنجایی که فضای نوشتن در حالتِ پیش‌فرضِ Writable، متغیر است و در حالت فایل‌سیستم ReadOnly فضایی برای نوشتن وجود ندارد؛ ممکن است که به افزایش فضا برای ذخیره‌سازی صفحات ساخته شده مبتنی بر ISR، نیاز داشته باشید. برای این کار کافیست تا طبق مراحل زیر، عمل کنید:

با انجام کارهای فوق، فضای پوشه مدنظر، افزایش خواهد یافت.