هنگامی که در حال ساخت یک برنامه کاربردی که توسط Next.js پشتیبانی می‌شود هستیم احتمالاً باید داده‌ها را از یک فایل، یک مسیر API داخلی یا یک API خارجی fetch کنیم.علاوه بر این، تعیین بهترین روش برای data fetching در برنامه Next.js خود می‌تواند کمی گیج کننده باشد. مخصوصا که ایجاد درخواست API در داخل تابع رندر کامپوننت‌های ما انجام نمی‌شود.

در این مقاله قصد داریم تا متدهای fetch کردن داده‌های سمت سرور را باهم بررسی کنیم تا بتوانیم مناسب‌ترین متد برای برنامه خود را انتخاب کنیم. برای هر متد یک مثال، مزایای آن متد و کاربردی که دارند را مورد بررسی قرار داده‌ایم. این امکان وجود دارد که در یک برنامه از چندین متد استفاده کنیم.

متدهای زیر داده‌ها را در زمان ساخت یا در هر درخواست قبل از ارسال داده به کلاینت fetch می‌کنند.

getStaticProps (Static Generation)

Fetch کردن داده‌ها در زمان ساخت.

متد getStaticPropsرا می‌توانیم در داخل یک صفحه برای fetch کردن داده‌ها در زمان ساخت استفاده کنیم، مثلا زمانی که دستورnext buildرا اجرا می‌کنیم. این متد داده‌ها را از زمانی که برنامه ساخته می‌شود، تا زمانی که درخواست دیگری اجرا نشود به‌روزرسانی نمی‌کند. به عنوان مثال:

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

مزایا

• این متد صفحه را قادر می‌سازد تا به صورت ایستا ساخته شود و در یک زمان بارگذاری کوتاه و سریع همه متدهای لازم برای data fetching را تولید می‌کند.
• اگر هر صفحه در برنامه ما از getStaticProps(یا سایر متدهای data fetching در سمت سرور) استفاده نکند، Next.js می‌تواند آن را با استفاده از next export به HTML ایستا export کند. اگر بخواهیم یک سایت استاتیک ایجاد کنیم که بتواند در مکان‌هایی مانند صفحات GitHub میزبانی شود، این کار بسیار سودمند است.
• داده‌ها قبل از رسیدن به کلاینت رندر می‌شوند و این موضوع برای SEO بسیار مفید است.

مثال کاربردی

تصور کنید یک وبلاگ شخصی داریم که صفحات را از فایل‌های MD(Markdown) در زمان ساخت رندر می‌کند. getStaticPropsمی‌تواند فایل‌ها را بخواند و داده‌ها را در زمان ساخت به کامپوننت صفحه منتقل کند. وقتی در یک قسمت وبلاگ تغییر ایجاد می‌کنیم، سایت را rebuild می‌کنیم تا بتوانیم تغییرات را ببینیم.

getServerSideProps (Server-side Rendering)

Fetch کردن داده‌ها در هر درخواست.

متد getServerSidePropsهر بار که کاربر صفحه را درخواست می‌کند، داده‌ها را fetch می‌کند. این متد برخلاف لود صفحه و fetch داده‌ها در سمت کلاینت، داده‌ها را قبل از ارسال صفحه به کلاینت fetch می‌کند. اگر کلاینت درخواست بعدی را ارائه دهد، داده‌ها دوباره fetch می‌شوند.

به عنوان مثال:

export async function getServerSideProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

مزایا

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

مثال کاربردی

getServerSidePropsبرای ساختن برنامه‌ای مناسب است که کلاینت را ملزم می‌کند تا به‌روزترین اطلاعات را ببیند، اما زمانی که کلاینت در صفحه است، به‌روزرسانی انجام نمی‌شود. برای مثال، اگر صفحه‌ای در سایت شخصی‌ خود داریم که آخرین اطلاعات مربوط ما در GitHub commit را نشان می‌دهد. در این صورت می‌خواهیم هر بار که صفحه‌ مشاهده می‌شود این داده‌ها fetch شوند.

getInitialProps (Server-side Rendering)

Fetch کردن داده‌ها در هر درخواست.

متد getInitialPropsدر گذشته راه اصلی برای data fetching در برنامه Next.js در سمت سرور بود. اما از نسخه Next.js 9.3 به بعد روش‌هایی که در قسمت‌های قبلی درمورد آن‌ها صحبت کردیم جایگزین این متد شدند. اما ما آن را در این مقاله بررسی کرده‌ایم زیرا:

• هنوز هم می‌توانیم از آن استفاده کنیم، اما توصیه می‌شود متدهای getStaticPropsو getServerSidePropsرا به‌کار بگیریم. زیرا این دو متد به ما این امکان را می‌دهند تا از بین fetch داده‌های ایستا یا سمت سرور یکی را انتخاب کنیم.
• داشتن آشنایی با متد getInitialPropsمی‌تواند مفید باشد. مثلا زمانی که برای حل یک مشکل در اینترنت سرچ می‌کنیم و ممکن است با راه‌حلی روبه‌رو شویم که از این متد استفاده کرده است. در این صورت درک آن راه‌حل ساده‌تر خواهد بود.

به عنوان مثال:

function Page({ stars }) {
  return <div>Next stars: {stars}</div>
}

Page.getInitialProps = async (ctx) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default Page

مزایا

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

مثال کاربردی

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

چگونه تصمیم بگیریم که از کدام متد باید استفاده کنیم؟

وقتی از Next.js استفاده می‌کنیم هدف ما همیشه این است که هر صفحه را استاتیک کنیم. این بدان معنی است که ما سعی می‌کنیم تا از استفاده از getServerSidePropsاجتناب کرده و بیشتر getStaticPropsرا به کار بگیریم. با این حال، اگر داده‌هایی که fetch می‌کنیم اغلب در حال تغییر و به‌روزرسانی هستند، مطمئناً از getServerSidePropsاستفاده خواهیم کرد. اما بهتر است هرگز سمت متدgetInitialPropsنرویم.

بنابراین ما به طور معمول از متد getStaticPropsاستفاده می‌کنیم و اگر این متد باعث قدیمی شدن داده‌ها می‌شود، متدgetServerSidePropsرا جایگزین می‌کنیم.

جمع‌بندی

در این مقاله سه متد Next.js برای data fetching در زمان ایجاد درخواست یا قبل از درخواست کلاینت را باهم بررسی کردیم.