فارسی

قدرت بازسازی استاتیک تدریجی (ISR) در Next.js را برای ساخت سایت‌های استاتیک پویا که به مخاطبان جهانی خدمات می‌دهند، با ارائه به‌روزرسانی‌های آنی بدون افت عملکرد، کشف کنید.

بازسازی استاتیک تدریجی Next.js: سایت‌های استاتیک پویا برای مخاطبان جهانی

در چشم‌انداز همیشه در حال تحول توسعه وب، ارائه تجربیات کاربری فوق‌سریع و در عین حال حفظ محتوای تازه و پویا، یک چالش اساسی است. تولید سایت استاتیک (SSG) سنتی، عملکردی باورنکردنی ارائه می‌دهد اما اغلب برای سازگاری با محتوایی که به طور مکرر به‌روز می‌شود، با مشکل مواجه است. در مقابل، رندر سمت سرور (SSR) پویایی را فراهم می‌کند اما می‌تواند باعث تأخیر شود. Next.js، یک فریمورک پیشرو در React، این شکاف را با ویژگی نوآورانه خود به زیبایی پر می‌کند: بازسازی استاتیک تدریجی (ISR). این مکانیزم قدرتمند به توسعه‌دهندگان اجازه می‌دهد تا سایت‌های استاتیکی بسازند که حس پویایی دارند و بهترین‌های هر دو دنیا را برای مخاطبان جهانی فراهم می‌کنند.

درک نیاز به سایت‌های استاتیک پویا

برای دهه‌ها، وب‌سایت‌ها در طیفی بین کاملاً استاتیک و کاملاً پویا عمل کرده‌اند. تولید سایت استاتیک (SSG) هر صفحه را در زمان ساخت (build time) از پیش رندر می‌کند که منجر به زمان بارگذاری فوق‌العاده سریع و سئوی عالی می‌شود. با این حال، برای محتوایی که به طور مکرر تغییر می‌کند - مانند مقالات خبری، به‌روزرسانی محصولات تجارت الکترونیک یا فیدهای رسانه‌های اجتماعی - SSG نیازمند بازسازی کامل سایت و استقرار مجدد در هر بار به‌روزرسانی محتوا است که اغلب غیرعملی و زمان‌بر است. این محدودیت، SSG را برای بسیاری از برنامه‌های کاربردی واقعی با نیازهای محتوایی آنی یا نزدیک به آنی، نامناسب می‌سازد.

از سوی دیگر، رندر سمت سرور (SSR) صفحات را برای هر درخواست در سرور رندر می‌کند. در حالی که این کار تضمین می‌کند که محتوا همیشه به‌روز است، اما بار سرور را افزایش می‌دهد و می‌تواند منجر به بارگذاری اولیه کندتر صفحات شود زیرا سرور درخواست را پردازش می‌کند. برای مخاطبان جهانی که در مکان‌های جغرافیایی و شرایط شبکه مختلف پراکنده شده‌اند، SSR می‌تواند تفاوت‌های عملکردی را تشدید کند.

سناریوی ایده‌آل برای بسیاری از برنامه‌های وب مدرن، سایتی است که از مزایای عملکردی فایل‌های استاتیک بهره می‌برد اما همچنین می‌تواند آخرین اطلاعات را به محض در دسترس قرار گرفتن منعکس کند. این دقیقاً همان جایی است که بازسازی استاتیک تدریجی Next.js می‌درخشد.

بازسازی استاتیک تدریجی (ISR) چیست؟

بازسازی استاتیک تدریجی (ISR) یک ویژگی در Next.js است که به شما امکان می‌دهد صفحات استاتیک را پس از ساخته شدن و استقرار سایت، به‌روز کنید. برخلاف SSG سنتی که برای انعکاس تغییرات محتوا نیاز به بازسازی کامل دارد، ISR شما را قادر می‌سازد تا صفحات جداگانه را در پس‌زمینه بدون ایجاد اختلال در تجربه کاربر یا نیاز به استقرار مجدد کامل سایت، بازسازی کنید. این امر از طریق یک مکانیزم قدرتمند اعتبارسنجی مجدد (revalidation) به دست می‌آید.

هنگامی که یک صفحه با ISR تولید می‌شود، Next.js یک فایل HTML استاتیک را ارائه می‌دهد. وقتی کاربری پس از یک دوره زمانی مشخص آن صفحه را درخواست می‌کند، Next.js می‌تواند به طور بی‌صدا صفحه را در پس‌زمینه بازسازی کند. اولین کاربری که پس از دوره اعتبارسنجی مجدد صفحه را درخواست می‌کند، ممکن است نسخه قدیمی و کش‌شده را دریافت کند، در حالی که کاربران بعدی نسخه جدید و به‌روز شده را دریافت خواهند کرد. این فرآیند تضمین می‌کند که سایت شما برای اکثر کاربران عملکرد بالایی دارد در حالی که به تدریج محتوا را به‌روز می‌کند.

چگونه ISR کار می‌کند: مکانیزم اعتبارسنجی مجدد

هسته ISR در ویژگی اعتبارسنجی مجدد (revalidation) آن نهفته است. هنگامی که یک صفحه را با ISR تعریف می‌کنید، یک زمان revalidate (بر حسب ثانیه) مشخص می‌کنید. این زمان تعیین می‌کند که Next.js هر چند وقت یکبار باید تلاش کند تا آن صفحه خاص را در پس‌زمینه بازسازی کند.

بیایید این جریان را بررسی کنیم:

  1. زمان ساخت (Build Time): صفحه در زمان ساخت به صورت استاتیک تولید می‌شود، درست مانند SSG معمولی.
  2. اولین درخواست: یک کاربر صفحه را درخواست می‌کند. Next.js فایل HTML استاتیک تولید شده را ارائه می‌دهد.
  3. انقضای کش: پس از گذشت دوره revalidate مشخص شده، کش صفحه کهنه (stale) در نظر گرفته می‌شود.
  4. درخواست بعدی (کهنه): کاربر بعدی که پس از انقضای کش صفحه را درخواست می‌کند، نسخه *کهنه* اما همچنان کش‌شده صفحه را دریافت می‌کند. این برای حفظ عملکرد حیاتی است.
  5. اعتبارسنجی مجدد در پس‌زمینه: به طور همزمان، Next.js بازسازی صفحه را در پس‌زمینه آغاز می‌کند. این شامل واکشی آخرین داده‌ها و رندر مجدد صفحه است.
  6. به‌روزرسانی کش: پس از اتمام بازسازی در پس‌زمینه، نسخه جدید و به‌روز شده صفحه جایگزین نسخه کهنه در کش می‌شود.
  7. درخواست بعدی: کاربر بعدی که صفحه را درخواست می‌کند، نسخه جدید و به‌روز شده را دریافت خواهد کرد.

این فرآیند به‌روزرسانی پلکانی تضمین می‌کند که وب‌سایت شما حتی در حین تازه‌سازی محتوا، بسیار در دسترس و با عملکرد بالا باقی می‌ماند.

مفاهیم کلیدی:

پیاده‌سازی ISR در Next.js

پیاده‌سازی ISR در برنامه Next.js شما ساده است. شما معمولاً آن را در تابع getStaticProps خود پیکربندی می‌کنید.

مثال: یک پست وبلاگ با به‌روزرسانی‌های مکرر

وبلاگی را در نظر بگیرید که در آن ممکن است پست‌ها با اصلاحات جزئی یا اطلاعات جدید به‌روز شوند. شما می‌خواهید این به‌روزرسانی‌ها نسبتاً سریع منعکس شوند، اما لزوماً برای هر کاربر به صورت آنی نباشد.

در اینجا نحوه پیکربندی ISR برای صفحه پست وبلاگ آمده است:

// pages/posts/[slug].js

import { useRouter } from 'next/router'

export async function getStaticPaths() {
  // دریافت تمام اسلاگ‌های پست‌ها برای پیش‌رندر کردن آن‌ها در زمان ساخت
  const posts = await fetch('https://your-api.com/posts').then(res => res.json());

  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));

  return {
    paths,
    fallback: 'blocking', // یا true یا false بسته به نیاز شما
  };
}

export async function getStaticProps({ params }) {
  // دریافت داده‌های پست خاص برای اسلاگ فعلی
  const post = await fetch(`https://your-api.com/posts/${params.slug}`).then(res => res.json());

  return {
    props: {
      post,
    },
    // فعال‌سازی ISR: این صفحه را هر ۶۰ ثانیه مجدداً اعتبارسنجی کن
    revalidate: 60, // بر حسب ثانیه
  };
}

function PostPage({ post }) {
  const router = useRouter();

  // اگر صفحه هنوز تولید نشده باشد، این نمایش داده می‌شود
  if (router.isFallback) {
    return 
Loading...
; } return (

{post.title}

{post.content}

{/* جزئیات دیگر پست */}
); } export default PostPage;

در این مثال:

درک `fallback` با ISR

گزینه fallback در getStaticPaths نقش مهمی در هنگام استفاده از ISR ایفا می‌کند:

برای ISR، fallback: 'blocking' یا fallback: true به طور کلی مناسب‌تر هستند، زیرا به مسیرهای پویای جدید اجازه می‌دهند تا در صورت تقاضا تولید شوند و سپس از ISR بهره‌مند شوند.

مزایای ISR برای مخاطبان جهانی

مزایای ISR به ویژه هنگام ارائه خدمات به مخاطبان جهانی برجسته است:

۱. عملکرد بهبود یافته در سراسر جغرافیا

با ارائه فایل‌های استاتیک پیش‌رندر شده، ISR تضمین می‌کند که کاربران، صرف نظر از موقعیت مکانی خود، زمان بارگذاری سریع را تجربه کنند. استراتژی stale-while-revalidate به این معنی است که حتی در هنگام به‌روزرسانی محتوا، اکثر کاربران همچنان صفحات کش‌شده و سریع‌البارگذاری را دریافت می‌کنند، که تأثیر تأخیر شبکه و زمان پردازش سرور را به حداقل می‌رساند. این برای حفظ تعامل با کاربران در مناطقی با زیرساخت اینترنت ضعیف‌تر حیاتی است.

۲. محتوای نزدیک به آنی بدون سربار SSR

برای محتوایی که نیاز به به‌روزرسانی مکرر دارد اما به دقت مطلق آنی نیاز ندارد (مانند قیمت سهام، فیدهای خبری، موجودی محصول)، ISR یک مصالحه عالی ارائه می‌دهد. شما می‌توانید یک دوره اعتبارسنجی مجدد کوتاه (مثلاً ۳۰-۶۰ ثانیه) تنظیم کنید تا به به‌روزرسانی‌های نزدیک به آنی دست یابید بدون نگرانی‌های مربوط به مقیاس‌پذیری و عملکرد مرتبط با SSR مداوم.

۳. کاهش بار سرور و هزینه‌ها

از آنجایی که صفحات عمدتاً از یک CDN (شبکه توزیع محتوا) یا هاستینگ فایل استاتیک ارائه می‌شوند، بار روی سرورهای اصلی شما به طور قابل توجهی کاهش می‌یابد. ISR تنها در طول دوره اعتبارسنجی مجدد بازسازی سمت سرور را فعال می‌کند که منجر به هزینه‌های میزبانی کمتر و مقیاس‌پذیری بهبود یافته می‌شود. این یک مزیت قابل توجه برای برنامه‌هایی است که حجم ترافیک بالایی از مکان‌های مختلف جهانی را تجربه می‌کنند.

۴. رتبه‌بندی سئوی بهبود یافته

خزنده‌های موتورهای جستجو وب‌سایت‌های سریع‌البارگذاری را ترجیح می‌دهند. توانایی ISR در ارائه سریع و کارآمد دارایی‌های استاتیک به طور مثبتی به سئو کمک می‌کند. علاوه بر این، با تازه نگه داشتن محتوا، ISR به موتورهای جستجو کمک می‌کند تا آخرین اطلاعات شما را ایندکس کنند و قابلیت کشف را برای مخاطبان جهانی شما بهبود بخشد.

۵. مدیریت محتوای ساده‌شده

سازندگان و مدیران محتوا می‌توانند محتوا را بدون نیاز به فعال کردن بازسازی کامل سایت به‌روز کنند. هنگامی که محتوا در CMS شما به‌روز شد و توسط فرآیند ISR واکشی شد، تغییرات پس از چرخه اعتبارسنجی مجدد بعدی در سایت منعکس خواهد شد. این کار گردش کار انتشار محتوا را ساده می‌کند.

چه زمانی از ISR استفاده کنیم (و چه زمانی نه)

ISR یک ابزار قدرتمند است، اما مانند هر فناوری دیگری، بهتر است در زمینه مناسب استفاده شود.

موارد استفاده ایده‌آل برای ISR:

چه زمانی ISR ممکن است بهترین گزینه نباشد:

استراتژی‌ها و ملاحظات پیشرفته ISR

در حالی که پیاده‌سازی اولیه ISR ساده است، استراتژی‌ها و ملاحظات پیشرفته‌ای برای بهینه‌سازی استفاده از آن، به ویژه برای مخاطبان جهانی، وجود دارد.

۱. استراتژی‌های بی‌اعتبار کردن کش (فراتر از مبتنی بر زمان)

در حالی که اعتبارسنجی مجدد مبتنی بر زمان، رویکرد پیش‌فرض و رایج‌ترین است، Next.js راه‌هایی برای فعال کردن اعتبارسنجی مجدد به صورت برنامه‌نویسی ارائه می‌دهد. این زمانی بسیار ارزشمند است که می‌خواهید محتوا به محض وقوع یک رویداد به‌روز شود (مثلاً یک وب‌هوک CMS به‌روزرسانی را فعال می‌کند).

شما می‌توانید از تابع res.revalidate(path) در یک تابع serverless یا مسیر API برای اعتبارسنجی مجدد یک صفحه خاص به صورت دستی استفاده کنید.

// pages/api/revalidate.js

export default async function handler(req, res) {
  // بررسی یک توکن مخفی برای اطمینان از اینکه فقط درخواست‌های مجاز می‌توانند اعتبارسنجی مجدد کنند
  if (req.query.secret !== process.env.REVALIDATE_SECRET) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    // اعتبارسنجی مجدد صفحه پست خاص
    await res.revalidate('/posts/my-updated-post');
    return res.json({ revalidated: true });
  } catch (err) {
    // اگر خطایی رخ دهد، Next.js به ارائه صفحه کهنه ادامه خواهد داد
    return res.status(500).send('Error revalidating');
  }
}

این مسیر API می‌تواند توسط CMS شما یا سرویس دیگری هر زمان که محتوای مرتبط با /posts/my-updated-post تغییر کرد، فراخوانی شود.

۲. مسیرهای پویا و `fallback` در عمل

انتخاب گزینه fallback مناسب بسیار مهم است:

۳. انتخاب زمان اعتبارسنجی مجدد مناسب

زمان revalidate باید یک تعادل باشد:

هنگام تنظیم این مقدار، تحمل مخاطبان خود را برای محتوای کهنه و فرکانس به‌روزرسانی داده‌های خود را در نظر بگیرید.

۴. ادغام با یک CMS هدلس

ISR با سیستم‌های مدیریت محتوای (CMS) هدلس مانند Contentful، Strapi، Sanity یا WordPress (با REST API آن) به خوبی کار می‌کند. CMS هدلس شما می‌تواند هنگام انتشار یا به‌روزرسانی محتوا وب‌هوک‌ها را فعال کند، که سپس می‌تواند مسیر API Next.js شما را (همانطور که در بالا نشان داده شد) برای اعتبارسنجی مجدد صفحات تحت تأثیر فراخوانی کند. این یک گردش کار قوی و خودکار برای محتوای استاتیک پویا ایجاد می‌کند.

۵. رفتار کش CDN

Next.js ISR با CDN شما کار می‌کند. هنگامی که یک صفحه تولید می‌شود، معمولاً از CDN ارائه می‌شود. زمان revalidate بر زمانی که سرورهای لبه CDN کش را کهنه در نظر می‌گیرند تأثیر می‌گذارد. اگر از یک پلتفرم مدیریت شده مانند Vercel یا Netlify استفاده می‌کنید، آنها بخش زیادی از این ادغام را به طور یکپارچه انجام می‌دهند. برای تنظیمات CDN سفارشی، اطمینان حاصل کنید که CDN شما برای احترام به هدرهای کش Next.js پیکربندی شده است.

مثال‌های جهانی و بهترین شیوه‌ها

بیایید ببینیم چگونه ISR می‌تواند در یک زمینه جهانی به کار رود:

بهترین شیوه‌های کلیدی جهانی:

مشکلات رایج و نحوه جلوگیری از آنها

در حالی که ISR قدرتمند است، اگر با دقت پیاده‌سازی نشود، می‌تواند منجر به رفتار غیرمنتظره‌ای شود:

نتیجه‌گیری: آینده محتوای استاتیک پویا

بازسازی استاتیک تدریجی Next.js نشان‌دهنده یک پیشرفت قابل توجه در ساخت برنامه‌های وب مدرن و با عملکرد بالا است. این ویژگی به توسعه‌دهندگان قدرت می‌دهد تا محتوای پویا و به‌روز را با سرعت و مقیاس‌پذیری سایت‌های استاتیک ارائه دهند، و آن را به یک راه‌حل ایده‌آل برای مخاطبان جهانی با نیازها و انتظارات متنوع تبدیل می‌کند.

با درک نحوه کار ISR و مزایای آن، می‌توانید وب‌سایت‌هایی بسازید که نه تنها سریع هستند بلکه به طور هوشمندانه به اطلاعات در حال تغییر پاسخ می‌دهند. چه در حال ساخت یک پلتفرم تجارت الکترونیک، یک پورتال خبری یا هر سایتی با محتوای به‌روزرسانی مکرر باشید، پذیرش ISR به شما امکان می‌دهد تا از منحنی جلوتر بمانید، کاربران خود را در سراسر جهان خوشحال کنید و منابع توسعه و میزبانی خود را بهینه کنید.

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