getStaticProps در نکست جی اس چگونه کار میکند

`getStaticProps` یک تابع خاص در Next.js است که به شما امکان می‌دهد داده‌های استاتیک را در زمان ساخت (build time) صفحه دریافت کنید و آنها را به عنوان props به کامپوننت مربوطه ارسال کنید. این کار باعث می‌شود که صفحه در هنگام درخواست مشاهده توسط کاربر، داده‌های استاتیک مربوطه بلافاصله در دسترس باشند و زمان بارگیری صفحه به طور قابل توجهی کاهش یابد.

برای استفاده از `getStaticProps`، ابتدا باید یک تابع با همین نام در صفحه مورد نظر ایجاد کنید. این تابع باید یک شیء با ویژگی `props` را بازگرداند. این ویژگی `props` حاوی داده‌های استاتیک است که باید به کامپوننت ارسال شود.

مثال زیر نحوه استفاده از `getStaticProps` را نشان می‌دهد:

import React from 'react';

export default function MyPage({ data }) {
  // استفاده از داده در کامپوننت
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

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

  // بازگرداندن داده‌های استاتیک به عنوان props
  return {
    props: {
      data
    }
  };
}

در این مثال، تابع `getStaticProps` با استفاده از `fetch` داده‌های استاتیک را از یک API دریافت می‌کند و آنها را به عنوان `props` به کامپوننت `MyPage` ارسال می‌کند. سپس در کامپوننت، می‌توانید از این داده‌ها استفاده کنید.

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

وقتی شما از getStaticProps استفاده می‌کنید، تابع باید به صورت async تعریف شده باشد و یک شیء دارای خصوصیت props را برگرداند. این شیء props حاوی داده‌های استاتیکی است که به صفحه مربوطه منتقل می‌شود.

در نمونه کدی که ارائه شده است، getStaticProps برای دریافت داده‌های مورد نیاز برای نمایش صفحه استفاده شده است. با استفاده از این داده‌ها، می‌توانید محتوا و اطلاعات مورد نیاز صفحه را تنظیم کنید.

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

با استفاده از تابع getStaticProps در Next.js می‌توانید به صورت داینامیک داده‌های استاتیک را برای هر صفحه‌ای در وبلاگ خود دریافت کنید. این کار به شما امکان می‌دهد تا محتوا و اطلاعات مورد نیاز صفحه را بر اساس داده‌های استاتیکی که دریافت می‌کنید، تنظیم کنید.

با استفاده از getStaticProps، می‌توانید بازبینی کنید که آیا داده‌ها باید در زمان ساخت موجود باشند و در صفحه نمایش داده شوند یا نه. به عبارت دیگر، شما می‌توانید محتوا را به صورت پیش‌نمایش در حالت ساخت (build time) بارگذاری کنید و از زمان ساخت برای ارائه صفحات سریع و بهینه استفاده کنید.

در مثالی که ارائه شده است، تابع getStaticProps برای دریافت داده‌های مورد نیاز صفحه به صورت استاتیک استفاده می‌شود. این تابع ممکن است به سرور یا منبع داده دیگر متصل شده و داده‌های مربوطه را دریافت کند. سپس این داده‌ها در props قرار می‌گیرند و به عنوان خروجی تابع برگشت داده می‌شوند. این props به صفحه مربوطه منتقل می‌شود و می‌توانید آن را برای تنظیم محتوا و نمایش اطلاعات مورد نیاز استفاده کنید.

مزیت استفاده از getStaticProps در نکست چیست؟

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

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