در Next.js، دو روش محبوب برای تولید صفحات وب وجود دارد: SSR (Server-Side Rendering) و SSG (Static Site Generation). هر یک از این روش‌ها دارای مزایا و معایب خاص خود هستند که در ادامه توضیح داده می‌شود:

1. SSR (Server-Side Rendering):

  • عملکرد: در این روش، صفحات در زمان درخواست (Request) به سرور، روی سرور ساخته شده و به مرورگر ارسال می‌شوند.
  • نحوه کار: هر بار که کاربر صفحه‌ای را درخواست می‌کند، سرور آن صفحه را رندر می‌کند و محتوای HTML را به کاربر می‌فرستد.
  • مزایا:
  • محتوای به‌روز و بهینه شده برای هر درخواست کاربر.
  • مناسب برای صفحاتی که نیاز به داده‌های پویا (Dynamic Data) دارند.
  • معایب:
  • زمان بارگذاری اولیه بیشتر است زیرا هر بار صفحه باید از نو ساخته شود.
  • فشار بیشتری بر روی سرور وارد می‌شود به دلیل اینکه باید هر بار صفحه را تولید کند.

2. SSG (Static Site Generation):

  • عملکرد: صفحات به صورت ایستا (Static) در زمان Build (زمان تولید) ساخته می‌شوند و به صورت فایل‌های HTML در سرور ذخیره می‌شوند.
  • نحوه کار: صفحات در زمان Build یک‌بار ساخته می‌شوند و به‌صورت فایل‌های ایستا در سرور نگهداری می‌شوند. هنگام درخواست کاربر، این صفحات از سرور به مرورگر ارسال می‌شوند.
  • مزایا:
  • سرعت بالا در زمان بارگذاری صفحات چون از قبل تولید شده‌اند.
  • فشار کمتری بر روی سرور به دلیل اینکه صفحات از قبل آماده شده‌اند.
  • معایب:
  • محتوای صفحات ممکن است قدیمی باشد، زیرا فقط در زمان Build بروزرسانی می‌شود.
  • برای داده‌های پویا و تغییرات مداوم مناسب نیست.

انتخاب بین SSR و SSG:

  • اگر نیاز به محتوای پویا دارید که باید به‌روز باشد و برای هر درخواست کاربر تغییر کند، SSR مناسب‌تر است.
  • اگر سایت شما بیشتر شامل محتوای ثابت (Static) است که تغییرات زیادی ندارد، SSG انتخاب بهتری است چون سرعت بارگذاری بیشتری دارد و بار کمتری بر روی سرور وارد می‌کند.

برای درک بهتر تفاوت بین SSR و SSG در Next.js، یک مثال کد ساده برای هر یک از این دو روش ارائه می‌دهم.

SSR (Server-Side Rendering):

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

// pages/ssr.js

import React from 'react';

function SSRPage({ data }) {
  return (
    <div>
      <h1>Server-Side Rendering (SSR) Example</h1>
      <p>Data from API:</p>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

// این تابع در سمت سرور اجرا می‌شود و داده‌ها را به صفحه ارسال می‌کند.
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // داده‌ها به عنوان props به صفحه ارسال می‌شوند.
  };
}

export default SSRPage;

SSG (Static Site Generation):

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

// pages/ssg.js

import React from 'react';

function SSGPage({ data }) {
  return (
    <div>
      <h1>Static Site Generation (SSG) Example</h1>
      <p>Data from API:</p>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

// این تابع در زمان build اجرا می‌شود و داده‌ها به صورت استاتیک ذخیره می‌شوند.
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // داده‌ها به عنوان props به صفحه ارسال می‌شوند.
  };
}

export default SSGPage;

توضیحات:

  • SSR: در مثال SSR، تابع getServerSideProps در هر درخواست به صفحه اجرا می‌شود. این تابع داده‌ها را از API می‌گیرد و صفحه را بر اساس آن داده‌ها به صورت پویا تولید می‌کند.
  • SSG: در مثال SSG، تابع getStaticProps فقط یک بار در زمان build اجرا می‌شود. داده‌ها به صورت استاتیک در صفحه ذخیره می‌شوند و صفحه به سرعت بارگذاری می‌شود.

با این دو مثال می‌توانید تفاوت عملی بین SSR و SSG را در Next.js مشاهده کنید.