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

در این مقاله به بررسی انواع روش‌های رندرینگ در Next.js شامل Server-Side Rendering (SSR)، Static Site Generation (SSG)، Incremental Static Regeneration (ISR) و Client-Side Rendering (CSR) می‌پردازیم و نحوه پیاده‌سازی هر یک را به تفصیل توضیح می‌دهیم.

1. Server-Side Rendering (SSR)

تعریف SSR

رندرینگ سمت سرور (SSR) به معنای تولید محتوای HTML در سرور و ارسال آن به مرورگر کاربر است. این فرآیند به این صورت است که برای هر درخواست کاربر، سرور محتوا را آماده کرده و یک صفحه کامل HTML را به مرورگر ارسال می‌کند.

Next.js این نوع رندرینگ را از طریق متد getServerSideProps پیاده‌سازی می‌کند. این متد به طور خودکار در هر بار درخواست صفحه اجرا می‌شود و از آنجا که HTML قبل از ارسال به کاربر تولید می‌شود، صفحات SSR به طور کامل SEO-friendly هستند.

کاربرد SSR

• SEO برتر: چون محتوای HTML در لحظه تولید و به موتورهای جستجو ارسال می‌شود.
• محتوای به‌روز: برای صفحات پویا و نیازمند داده‌های لحظه‌ای بسیار مناسب است.

نحوه پیاده‌سازی

برای پیاده‌سازی SSR در Next.js، کافی است متد getServerSideProps را در یک فایل صفحه مشخص استفاده کنید:

//-------------------------------------------------------------------
// Programmer       : Ebrahim Shafiei (EbraSha)
// Email            : [email protected]
//-------------------------------------------------------------------

// Fetch data from an API using SSR
export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  // Passing fetched data as props to the page component
  return {
    props: {
      data, // Send to Page
    },
  };
}

const Page = ({ data }) => {
  return (
    <div>
      <h1>Server-Side Rendering Example</h1>
      <p>{data.description}</p>
    </div>
  );
};

export default Page;

در این مثال، داده‌ها در سمت سرور واکشی شده و سپس در صفحه نمایش داده می‌شوند. این نوع رندرینگ به دلیل تولید محتوا به صورت لحظه‌ای مناسب صفحاتی است که نیاز به داده‌های به‌روز دارند.

2. Static Site Generation (SSG)

تعریف SSG

تولید صفحات استاتیک (SSG) فرآیندی است که در آن صفحات وب در زمان Build تولید می‌شوند و به صورت استاتیک ذخیره می‌شوند. در این روش، محتوا تنها یک بار در زمان ساخت برنامه تولید می‌شود و هر بار که کاربر صفحه‌ای را باز کند، همان صفحه از قبل آماده و استاتیک به او نمایش داده می‌شود.

Next.js برای پیاده‌سازی SSG از متد getStaticProps استفاده می‌کند. این روش به دلیل اینکه صفحات از قبل آماده شده‌اند، عملکرد بسیار سریعی را ارائه می‌دهد و برای صفحاتی که محتوای آنها تغییر نمی‌کند یا به ندرت به‌روزرسانی می‌شوند، ایده‌آل است.

کاربرد SSG

• بهبود سرعت و عملکرد: چون صفحات از قبل ساخته شده و آماده‌اند، سرعت بارگذاری بالایی دارند.
• SEO عالی: صفحات از قبل به صورت HTML کامل تولید شده و برای موتورهای جستجو بهینه هستند.

نحوه پیاده‌سازی

//-------------------------------------------------------------------
// Programmer       : Ebrahim Shafiei (EbraSha)
// Email            : [email protected]
//-------------------------------------------------------------------

// Fetch static data during the build time
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/static-data');
  const data = await res.json();

  // Return data as props at build time
  return {
    props: {
      data, // These data are passed to the page as props during build time
    },
  };
}

const StaticPage = ({ data }) => {
  return (
    <div>
      <h1>Static Site Generation Example</h1>
      <p>{data.description}</p>
    </div>
  );
};

export default StaticPage;

در این مثال، داده‌ها در زمان build واکشی شده و در یک صفحه استاتیک نمایش داده می‌شوند. برای صفحاتی که نیازی به بروزرسانی مکرر ندارند، SSG انتخاب بهتری است.

3. Incremental Static Regeneration (ISR)

تعریف ISR

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

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

کاربرد ISR

• بهترین از هر دو جهان: ترکیبی از سرعت بالای SSG و پویایی SSR.
• صفحات با محتوای متغیر کم: برای صفحاتی که به ندرت تغییر می‌کنند اما هنوز نیاز به بروزرسانی دارند.

نحوه پیاده‌سازی

//-------------------------------------------------------------------
// Programmer       : Ebrahim Shafiei (EbraSha)
// Email            : [email protected]
//-------------------------------------------------------------------

// Fetch static data with the ability to regenerate it
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  // Static page will be regenerated every 10 seconds
  return {
    props: {
      data, // Static data is transferred to the page
    },
    revalidate: 10, // The page is regenerated every 10 seconds
  };
}

const ISRPage = ({ data }) => {
  return (
    <div>
      <h1>Incremental Static Regeneration Example</h1>
      <p>{data.description}</p>
    </div>
  );
};

export default ISRPage;

در این مثال، صفحه هر 10 ثانیه یک‌بار بروزرسانی می‌شود و محتوای جدید در صورت وجود به کاربران نمایش داده می‌شود.

4. Client-Side Rendering (CSR)

تعریف CSR

رندرینگ سمت کلاینت (CSR) فرآیندی است که در آن محتوای صفحه به صورت کامل در مرورگر کاربر رندر می‌شود. در این روش، تنها یک HTML خالی به مرورگر ارسال می‌شود و سپس با بارگیری فایل‌های JavaScript و داده‌های لازم، محتوای صفحه به تدریج رندر می‌شود.

CSR به طور معمول برای صفحات پویا و تعاملی مناسب است که نیاز به بارگذاری و به‌روزرسانی داده‌ها به صورت real-time دارند.

کاربرد CSR

• تعاملات پویا: برای صفحات تعاملی یا برنامه‌هایی که نیاز به به‌روزرسانی‌های لحظه‌ای دارند، مناسب است.
• زمان بارگذاری اولیه بالاتر: چون تمام داده‌ها پس از بارگیری JavaScript واکشی می‌شوند.

نحوه پیاده‌سازی

//-------------------------------------------------------------------
// Programmer       : Ebrahim Shafiei (EbraSha)
// Email            : [email protected]
//-------------------------------------------------------------------

import { useEffect, useState } from 'react';

// Component uses client-side rendering to fetch data after loading
const CSRPage = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from API after the component mounts
    fetch('https://api.example.com/data')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  if (!data) return <p>Loading...</p>; // Display "Loading" text until the data is loaded


  return (
    <div>
      <h1>Client-Side Rendering Example</h1>
      <p>{data.description}</p>
    </div>
  );
};

export default CSRPage;

CSR به طور خودکار در React پیاده‌سازی می‌شود و نیازی به متد خاصی ندارد. با این حال، شما می‌توانید داده‌ها را در متدهای مانند useEffect واکشی کنید:

در این مثال، داده‌ها پس از بارگذاری صفحه واکشی و به کاربر نمایش داده می‌شوند.

Next.js به توسعه‌دهندگان انعطاف‌پذیری لازم را برای انتخاب بهترین روش رندرینگ بر اساس نیازهای پروژه می‌دهد. هر یک از روش‌های SSR، SSG، ISR و CSR مزایا و معایب خود را دارند و برای شرایط خاصی مناسب هستند.انتخاب روش مناسب به پروژه و نیازهای خاص شما بستگی دارد.