وضعیت‌های پاسخ سفارشی و تغییر مسیر در Next.js getServerSideProps

NextJS یک چارچوب جاوا اسکریپت است که از ReactJS برای رندر کردن رابط کاربری در برنامه های وب استفاده می کند. این فریم ورک دارای بسیاری از ویژگی‌های عالی مانند رندر سمت سرور، تولید سایت استاتیک، بهینه‌سازی تصویر، مسیریابی و بسیاری موارد دیگر است. اما چیزی وجود دارد که من را به شدت آزار می دهد و آن رسیدگی به خطاها در رندر سمت سرور است. به همین دلیل است که در ادامه این مقاله به بررسی این مشکل خواهیم پرداخت.

1. معرفی سریع رندر سمت سرور با getServerSideProps

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

export default function ServerSideProps({ person }) {
  const { firstName, lastName } = person;

  return (
    <>
      Hello {firstName} {lastName}
    </>
  )
}

export async function getServerSideProps(context) {
  return {
    props: {
      person: { firstName: "John", lastName: "Doe" }
    }, // will be passed to the page component as props
  }
}

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

2. 404، صفحه یافت نشد

در مثال بالا، ممکن است متوجه شده باشید که چگونه تابع getServerSideProps شی را برمی گرداند و داده های مورد نیاز برای کامپوننت تحت خاصیتی به نام props ذخیره می شود. این تنها ملکی نیست که می تواند برگرداند. ویژگی دیگری که می تواند برگرداند notFound نام دارد که نوع آن Boolean است. اگر این مقدار را درست تنظیم کنید، مقدار کد وضعیت پاسخ 404 است و صفحه مناسب نمایش داده می شود. این می تواند صفحه پیش فرض NextJS 404 باشد یا می توانید صفحه 404 سفارشی خود را ایجاد کنید.

export async function getServerSideProps(context) {
  const personId = context.params.id;

  if(personId === "4") {
    return {
      notFound: true,
    }
  }

  const personData = await fetchData(personId);
  return {
    props: {
      person: personData
    },
  }
}

به مثال بالا نگاه کنید که فقط متد getServerSideProps را نشان می دهد. فرض کنید ما همان مؤلفه ReactJS قبلی را داریم و می دانیم که شخصی با مقدار id 4 وجود ندارد. در آن صورت، تمام چیزی که برمی‌گرداند یک شی با این ویژگی است که روی true تنظیم شده است. در موارد دیگر، می‌توانیم به صراحت آن را روی false قرار دهیم، اما این مقدار پیش‌فرض است و نیازی به آن نیست.

3. پاسخ کد وضعیت سفارشی

مثال قبلی وضعیتی را نشان می‌دهد که باید صفحه‌ای را که یافت نشد برگردانیم. اما چه اتفاقی می افتد زمانی که ما نیاز به ارسال برخی از خطاهای سفارشی داریم؟ اینجاست که همه چیز به هم می‌ریزد. هیچ بازگشتی برای مقادیر وضعیت سفارشی وجود ندارد. اما ترفندهایی وجود دارد که می توانیم از آنها استفاده کنیم. تابع getServerSideProps یک آرگومان واحد، زمینه را دریافت می کند. و در میان ویژگی های دیگر، یک شی پاسخ دریافت می کند. در آنجا می توانیم مقادیر کد وضعیت خاصی را تنظیم کنیم.

export async function getServerSideProps(context) {
  const personId = context.params.id;

  if (personId === "4") {
    return { notFound: true, }
  }

  if (personId === "5") {
    context.res.statusCode = 503;
    return {
      props: {
        error: { status: 503, message: "Service unavailable" }
      }
    }
  }

  const personData = await fetchData(personId);
  return {
    props: {
      person: personData
    },
  }
}

آنچه در بالا ممکن است متوجه شوید، پس از تنظیم وضعیت، من همچنین props را تنظیم کردم. دلیل آن این است که مگر اینکه notFound را برگردانید، NextJS همچنان سعی می‌کند کامپوننت اصلی شما را رندر کند. و این بدان معناست که ما همچنین باید جزء صفحه خود را تنظیم کنیم.

export default function ServerSideProps({person, error}) {
  if (error) {
    return (
      <div><b>{error.status}</b> {error.message}</div>
    )
  }
  const {firstName, lastName} = person;

  return (
    <div>
      Hello {firstName} {lastName}
    </div>
  )
}

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

4. تغییر مسیر را برگردانید

آخرین موردی که باید پوشش داده شود تغییر مسیر است. قبلاً اشاره کردم که تابع getServerSideProps یک شی را برمی گرداند که می تواند دارای props و notFound باشد. یکی دیگر وجود دارد و آن یکی برای تغییر مسیر استفاده می شود.

if (personId === "6") {
  return {
    redirect: {
      destination: '/server-side-props/errors/1',
      permanent: false,
    }
  }
}

می‌توانیم مثال بالا را به تابع getServerSideProps خود اضافه کنیم، و اگر سعی کنید URL را برای شخصی با مقدار 6 باز کنید، شما را به صفحه شخصی با شناسه 1 هدایت می‌کند. ممکن است متوجه شوید، ویژگی دیگری وجود دارد که نام دارد. دائمی این یکی برای انتخاب وضعیت تغییر مسیر مورد استفاده قرار می گیرد تا مرورگرها و موتورهای جستجو بتوانند برای همیشه یا فقط این یک بار تغییر مسیر را در حافظه پنهان ذخیره کنند. True به معنای کش آن و تغییر مسیر برای همیشه است (وضعیت 308) و false یعنی فقط تغییر مسیر دهید و کش نکنید (وضعیت 307).

نتیجه

رندر سمت سرور یک ویژگی بسیار مفید است که مزایای بسیاری را در اختیار ما قرار می دهد. با این حال، گاهی اوقات در نرم افزار، همه چیز به اشتباه پیش می رود. درخواست‌ها با شکست مواجه می‌شوند، اتصال پایگاه داده قطع می‌شود، API شخص ثالث در دسترس نیست و باید بتوانیم آن موقعیت‌ها را به درستی مدیریت کنیم. امیدوارم این مقاله به شما در این زمینه کمک کند. کد استفاده شده در مثال های بالا را می توان در مخزن GitHub من یافت.

برای اطلاعات بیشتر، می توانید من را دنبال کنید توییتر، لینکدین، گیت هاب یا اینستاگرام.