getServerSideProps

عند تصدير دالة تسمى getServerSideProps (العرض من جانب الخادم - SSR) من صفحة، سيقوم Next.js بتهيئة عرض هذه الصفحة مسبقًا في كل طلب باستخدام البيانات التي تُرجعها الدالة getServerSideProps. هذا مفيد إذا كنت تريد جلب بيانات تتغير بشكل متكرر، وتريد تحديث الصفحة لعرض أحدث البيانات.

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getServerSideProps = (async (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}) satisfies GetServerSideProps<{
  repo: Repo
}>

export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return repo.stargazers_count
}

export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}

export default function Page({ repo }) {
  return repo.stargazers_count
}

يمكنك استيراد وحدات في النطاق العلوي لاستخدامها في getServerSideProps. الوحدات المستوردة لن يتم تضمينها لجانب العميل. هذا يعني أنه يمكنك كتابة كود خاص بالخادم مباشرة في getServerSideProps، بما في ذلك جلب البيانات من قاعدة البيانات الخاصة بك.

معامل Context

معامل context هو كائن يحتوي على المفاتيح التالية:

قيم الإرجاع لـ getServerSideProps

يجب أن تُرجع دالة getServerSideProps كائنًا يحتوي على أي من الخصائص التالية:

props

كائن props هو زوج مفتاح-قيمة، حيث يتم استقبال كل قيمة بواسطة مكون الصفحة. يجب أن يكون كائنًا قابلًا للتسلسل بحيث يمكن تسلسل أي خاصيات يتم تمريرها باستخدام JSON.stringify.

export async function getServerSideProps(context) {
  return {
    props: { message: `Next.js رائع` }, // سيتم تمريرها إلى مكون الصفحة كخاصيات
  }
}

notFound

القيمة المنطقية notFound تسمح للصفحة بإرجاع حالة 404 وصفحة 404. مع notFound: true، سترجع الصفحة 404 حتى إذا كانت هناك صفحة تم إنشاؤها بنجاح من قبل. هذا مخصص لدعم حالات الاستخدام مثل المحتوى الذي ينشئه المستخدم ويتم إزالته بواسطة مؤلفه.

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

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

  return {
    props: { data }, // سيتم تمريرها إلى مكون الصفحة كخاصيات
  }
}

redirect

كائن redirect يسمح بإعادة التوجيه إلى موارد داخلية وخارجية. يجب أن يتطابق مع الشكل { destination: string, permanent: boolean }. في بعض الحالات النادرة، قد تحتاج إلى تعيين رمز حالة مخصص لعملاء HTTP القديمة لإعادة التوجيه بشكل صحيح. في هذه الحالات، يمكنك استخدام خاصية statusCode بدلاً من خاصية permanent، ولكن ليس الاثنين معًا.

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

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return {
    props: {}, // سيتم تمريرها إلى مكون الصفحة كخاصيات
  }
}

سجل الإصدارات