وقتی با نکست کار میکنیم میخواهیم سرور ساید رندرینگ انجام دهیم. برای اینکار از متد های ان استفاده میکنیم. دو متد getStaticProps و getStaticPaths همراه هم می ایند و همان طور که از نامشان پیداست برای تولید صفحات static بکار میروند. یعنی SSG که مخفف static site generation اما اگر دنبال SSR که Server Side Rendering هستیم باید از متد getServerSideProps استفاده کنیم.

خواندن از دیتابیس در هر بار یا فقط یکبار؟

وقتی میخواهیم generate کنیم یعنی SSG انجام دهیم یعنی همان صفحات html را در هنگام next build بسازیم و دیگر از دیتابیس اطلاعات به روز شده را نخوانیم (فقط در هنگام بیلد خوانده میشود و صفحه html با همان داده ها ساخته میشود و دیگر دیتابیس خوانده نمیشود)

اگر میخواهید مدام داده های دیتابیس را به روز رسانی کنید و از ان طرف محتوای جدید ببینید باید از SSR استفاده کنید که با متد getServerSideProps انجام میشود. اما هنوز نکته ای وجود دارد.

معرفی ادرس لینک ها به نکست

وقتی میخواهیم SSG انجام دهیم با متد getStaticPaths تمام path ها و url هایی که باید html برایش ساخته شود را میسازیم و با return کردن انها را به نکست معرفی میکنیم. انگاه نکست میفهمد که باید فقط برای این ادرس ها html تولید کند و بقیه ادرس ها را به صفحه 404 ارجاع دهد.

مدیریت ارور 404

اما زمانیکه میخواهیم SSR انجام دهیم دیگر از این متد استفاده نمیکنیم و ادرسهای path یا همان url ها را به نکست معرفی نمیکنیم. پس از کجا بفهمد باید کدام صفحه را به 404 ارجاع دهد؟ اینجاست که خودمان بصورت دستی این ارور را مدیریت میکنیم. (در غیراینصورت ارور هنگام بیلد خواهیم داشت)

داخل متد نوشته میشود:

import fetch from 'node-fetch'

...

//
export async function getServerSideProps({req, params, res}) {
   
  try {
       
    var data = await fetch('https://example.com/api/data')
    return {props: {data}}

  } catch (error) {
    res.statusCode = 404
    return {props: {}}
  }

}

داخل کمپوننت نوشته میشود: (سعی کنید از کمپوننت های فانکشن استفاده کنید تا کلاس)

import ErrorPage from 'next/error'

...

if(!props.data) {
    return (<ErrorPage statusCode={404} />)
}

با ری اکت و componentDidMount چطور میشود؟

اگر میخواهید از داخل کمپوننتی که با کلاس extends شده به ری اکت و متد componentDidMount بیایید و عملیات fetch data را انجام دهید. اطلاعات جدید وارد صفحه میشوند و نمایش داده میشوند اما CSR یا همان client side rendering خواهند بود و در سئو بی تاثیر هستند. فقط برای طراحی صفحات پنل ادمین و تنظیماتش مناسب هستند.