Data Fetching یا واکشی داده خارجی در نکست جی اس Next js

تولید استاتیک را می توان با داده و بدون داده انجام داد.

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

اما، برای برخی از صفحات، ممکن است نتوانید HTML را بدون واکشی fetching داده های خارجی ارائه دهید. شاید لازم باشد API خارجی واکشی کنید یا پایگاه داده خود را جستجو کنید. Next.js از این مورد یعنی – تولید استاتیک با داده – پشتیبانی می کند.

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

در Next.js، وقتی یک کامپوننت صفحه را صادر می‌کنید، می‌توانید تابعی async به نام getStaticProps اکسپورت کنید . اگر این کار را انجام دادید، پس:

  • getStaticProps در زمان ساخت build در زمان تولید production اجرا می شود و …
  • در داخل تابع، می‌توانید داده‌های خارجی را واکشی کرده و آن‌ها را به عنوان props به صفحه ارسال کنید.

ابتدا به تصویر زیر توجه فرمایید و سپس کد مربوطه را ببینید:

اکنون کد زیر را بررسی کنید:”

export default function Home(props) { ... }
export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...
  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

همانطور که در کد بالا میبینید که یک کامپوننت به نام Home داریم که ارگومان props میگیرد و سپس یک تابع غیرهمزمان async به نام getStaticProps ایجاد کردیم که قرار است از بیرون داده را در قالبی مانند API یا از دیتابیس یا چیزهای دیگر بگیرد. این داده هایی که میگیرد را درون یک متغیر ثابت به نام data ذخیره میکند و در قسمت بازگشتی تابع یعنی return مقادیر پراپس را به کامپوننت Home ارسال میکند. اگر این نوشته ها را متوجه نشوید یعنی نیاز دارید به ری اکت بازگردید و درباره کامپوننتهای ری اکت و ارسال مقادیر پراپس مطالعه کنید.

به طور ویژه ، getStaticProps به شما امکان می‌دهد به Next.js بگویید: «سلام، این صفحه وابستگی‌هایی از نوع داده دارد – بنابراین وقتی این صفحه را در زمان ساخت پیش رندر pre-render می‌کنی، ابتدا مطمئن باش که آنها را در نظر گرفته ای!»

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *