آشنایی با روش‌های رندر Next.js: CSR، SSR، SSG، ISR

دریابید که این چهار روش تحویل صفحه چگونه متفاوت هستند و چه زمانی از هر کدام استفاده کنید.

رندر فرآیند تبدیل کد React به HTML است. روش رندرینگی که انتخاب می کنید بستگی به داده هایی دارد که با آنها کار می کنید و اینکه چقدر به عملکرد اهمیت می دهید.

در Next.js، رندر بسیار متنوع است. شما می توانید صفحات را در سمت مشتری یا سمت سرور، به صورت ایستا یا افزایشی رندر کنید.

به نحوه کار این روش ها و عملکرد هر کدام نگاهی بیندازید.

رندر سمت سرور

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

مرورگر این درخواست را برای هر لینکی که کاربر روی آن کلیک می کند، انجام می دهد، به این معنی که سرور هر بار درخواست را پردازش می کند.

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

از getServerSideProps برای بازسازی صفحه هر بار که کاربر درخواست می کند، استفاده کنید.

export default function Home({ data }) {
  return (
    <main>
      // Use data
    </main>
  );
}
 
export async function getServerSideProps() {
  // Fetch data from external api
 const res = await fetch('https://.../data')
  const data = await res.json()
 
  // Will be passed to the page component as props
  return { props: { data } }
}

getServerSideProps فقط روی سرور اجرا می شود و به این صورت اجرا می شود:

هنگامی که یک کاربر مستقیماً به صفحه دسترسی پیدا می کند، در زمان درخواست اجرا می شود و صفحه با ابزارهایی که برمی گرداند از قبل رندر می شود.
هنگامی که کاربر از طریق پیوند Next به صفحه دسترسی پیدا می کند، مرورگر درخواستی را به سروری که آن را اجرا می کند ارسال می کند.

مطلب مرتبط: سوپ زیبا در مقابل سلنیوم: کدام ابزار خراش دادن وب را باید استفاده کنید؟

در نسخه جدید، می‌توانید رندر سمت سرور را با استفاده از واکشی داده‌های پویا در صفحه یا طرح‌بندی انتخاب کنید.

واکشی داده‌های پویا درخواست‌های fetch() هستند که به‌طور خاص با تنظیم گزینه cache روی «no-store» از ذخیره‌سازی انصراف می‌دهند.

fetch('https://...', { cache: 'no-store' });

همچنین، اعتبار مجدد را روی 0 تنظیم کنید:

fetch('https://...', { next: { revalidate: 0 } });

این ویژگی در حال حاضر در نسخه بتا است، بنابراین به خاطر داشته باشید. می‌توانید اطلاعات بیشتری درباره واکشی داده‌های پویا در اسناد بتا Next.js 13 بخوانید.

رندر سمت مشتری

زمانی که نیاز به به‌روزرسانی مکرر داده‌ها دارید یا نمی‌خواهید صفحه خود را از قبل رندر کنید، باید از رندر سمت مشتری (CSR) استفاده کنید. شما می توانید CSR را در سطح صفحه یا سطح جزء پیاده سازی کنید. در سطح صفحه، Next.js داده‌ها را در زمان اجرا واکشی می‌کند و وقتی در سطح مؤلفه انجام می‌شود، داده‌ها را روی mount واکشی می‌کند. به همین دلیل، CSR می تواند به کندی عملکرد کمک کند.

از قلاب useEffect() برای رندر کردن صفحات در کلاینت به این صورت استفاده کنید:

import { useState, useEffect } from 'react'

function Home() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(false)
 
  useEffect(() => {
    setLoading(true)
 
    fetch('/api/get-data')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [])
 
  if (isLoading) return <p>Loading...</p>
  if (!data) return <p>No data</p>
 
  return (
    <div>
      // Use data
    </div>
  )
}

همچنین می توانید از قلاب SWR استفاده کنید. داده‌ها را در حافظه پنهان ذخیره می‌کند و در صورت کهنه شدن آن‌ها را مجدداً تأیید می‌کند.

import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())

function Home() {
  const { data, error } = useSWR('/api/data', fetcher)
  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>
 
  return (
    <div>
      // Use data
    </div>
  )
}

در Next.js 13، باید با افزودن دستورالعمل «use Client» در بالای فایل از یک مؤلفه مشتری استفاده کنید.

"use client";

export default () => {
  return (
      <div>
       // Client component
      </div>
  );
};

تفاوت بین SSR و CSR این است که داده ها در هر درخواست صفحه روی سرور در SSR واکشی می شوند در حالی که داده ها در سمت مشتری در CSR واکشی می شوند.

مطلب مرتبط: ایجاد یک جدول زمانی تعاملی با CSS و جاوا اسکریپت

تولید سایت استاتیک

با تولید سایت ایستا (SSG)، صفحه یک بار در طول زمان ساخت داده ها را واکشی می کند. صفحات ایجاد شده توسط استاتیک بسیار سریع هستند و عملکرد خوبی دارند زیرا همه صفحات از قبل ساخته شده اند. بنابراین SSG برای صفحاتی که از محتوای ثابت مانند صفحات فروش یا وبلاگ ها استفاده می کنند عالی است.

در Next.js، باید تابع getStaticProps را در صفحه ای که می خواهید به صورت ایستا رندر کنید صادر کنید.

export default function Home({ data }) {
  return (
    <main>
      // Use data
    </main>
  );
}
 
export async function getStaticProps() {
  // Fetch data from external API at build time
  const res = await fetch('https://.../data') 
  const data = await res.json()
 
  // Will be passed to the page component as props
 return { props: { data } }
}

همچنین می توانید از پایگاه داده داخل getStaticProps پرس و جو کنید.

export async function getStaticProps() {
  // Call function to fetch data from database
  const data = await getDataFromDB()
  return { props: { data } }
}

در Next.js 13، رندر ایستا پیش‌فرض است و محتوا واکشی و ذخیره می‌شود، مگر اینکه گزینه caching را خاموش کنید.

async function getData() {
  const res = await fetch('https://.../data');
  return res.json();
}

export default async function Home() {
  const data = await getData();

  return (
    <main>
      // Use data
    </main>
  );
}

درباره رندر استاتیک در Next.js 13 از اسناد بیشتر بیاموزید.

تولید افزایشی-استاتیکی

مواقعی وجود دارد که می خواهید از SSG استفاده کنید اما همچنین می خواهید محتوا را به طور منظم به روز کنید. اینجاست که تولید استاتیک افزایشی (ISG) کمک می کند.

مطلب مرتبط: چرا Go جایگاهی را در فهرست 10 زبان برنامه نویسی برتر TIOBE به دست آورده است

ISG به شما این امکان را می دهد که صفحات استاتیک را پس از ساختن آنها پس از بازه زمانی مشخص شده ایجاد یا به روز کنید. به این ترتیب، لازم نیست کل سایت را فقط صفحاتی که به آن نیاز دارند، بازسازی کنید.

ISG مزایای SSG را با مزیت اضافه ارائه محتوای به روز به کاربران حفظ می کند. ISG برای صفحاتی در سایت شما که داده‌های در حال تغییر را مصرف می‌کنند عالی است. به عنوان مثال، می‌توانید از ISR برای ارائه پست‌های وبلاگ استفاده کنید تا هنگام ویرایش پست‌ها یا اضافه کردن پست‌های جدید، وبلاگ به‌روز بماند.

برای استفاده از ISR، prop revalidate را به تابع getStaticProps در یک صفحه اضافه کنید.

export async function getStaticProps() {
  const res = await fetch('https://.../data')
  const data = await res.json()
 
  return {
    props: {
      data,
    },
    revalidate: 60
  }
}

در اینجا، Next.js زمانی که درخواستی پس از 60 ثانیه وارد می شود، سعی می کند صفحه را بازسازی کند. درخواست بعدی منجر به پاسخ با صفحه به روز شده خواهد شد.

در Next.js 13، از revalidate در fetch مانند زیر استفاده کنید:

fetch('https://.../data', { next: { revalidate: 60 } });

می‌توانید فاصله زمانی را روی هر چیزی که با داده‌هایتان بهترین کار را انجام می‌دهد، تنظیم کنید.

نحوه انتخاب روش رندرینگ

تا کنون با چهار روش رندر در Next.js آشنا شده اید – CSR، SSR، SSG و ISG. هر یک از این روش ها برای شرایط مختلف مناسب است. CSR برای صفحاتی مفید است که به داده های تازه نیاز دارند، جایی که سئوی قوی نگران کننده نیست. SSR همچنین برای صفحاتی که داده‌های پویا مصرف می‌کنند عالی است، اما سئو دوستانه‌تر است.

SSG برای صفحاتی مناسب است که داده‌های آنها بیشتر ثابت است، در حالی که ISG برای صفحاتی که حاوی داده‌هایی هستند که می‌خواهید در فواصل زمانی به‌روزرسانی شوند، بهترین است. SSG و ISG از نظر عملکرد و سئو عالی هستند زیرا داده ها از قبل واکشی شده اند و می توانید آن ها را کش کنید.