getServerSideProps

getServerSideProps هي دالة في Next.js تُستخدم لجلب البيانات وعرض محتويات الصفحة في وقت الطلب.

مثال

يمكنك استخدام getServerSideProps عن طريق تصديرها من مكون صفحة. المثال التالي يوضح كيفية جلب البيانات من واجهة برمجة تطبيقات خارجية في getServerSideProps، وتمرير البيانات إلى الصفحة كـ props:

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getServerSideProps = (async () => {
  // جلب البيانات من واجهة برمجة تطبيقات خارجية
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // تمرير البيانات إلى الصفحة عبر props
  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>

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

export async function getServerSideProps() {
  // جلب البيانات من واجهة برمجة تطبيقات خارجية
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  // تمرير البيانات إلى الصفحة عبر props
  return { props: { repo } }
}

export default function Page({ repo }) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

متى يجب استخدام getServerSideProps؟

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

إذا لم تكن بحاجة إلى جلب البيانات في وقت الطلب، أو تفضل تخزين البيانات مؤقتًا وعرض HTML مسبقًا، نوصي باستخدام getStaticProps.

السلوك

• تعمل getServerSideProps على الخادم.
• يمكن تصدير getServerSideProps فقط من صفحة.
• تُرجع getServerSideProps بيانات JSON.
• عندما يزور المستخدم صفحة، سيتم استخدام getServerSideProps لجلب البيانات في وقت الطلب، ويتم استخدام البيانات لعرض HTML الأولي للصفحة.
• يمكن رؤية props الممررة إلى مكون الصفحة على العميل كجزء من HTML الأولي. هذا للسماح للصفحة بأن يتم ترطيبها (hydrate) بشكل صحيح. تأكد من عدم تمرير أي معلومات حساسة لا يجب أن تكون متاحة على العميل في props.
• عندما يزور المستخدم الصفحة عبر next/link أو next/router، يرسل Next.js طلب API إلى الخادم، الذي يقوم بتشغيل getServerSideProps.
• لا تحتاج إلى استدعاء مسار API في Next.js لجلب البيانات عند استخدام getServerSideProps لأن الدالة تعمل على الخادم. بدلاً من ذلك، يمكنك استدعاء نظام إدارة المحتوى (CMS) أو قاعدة بيانات أو واجهات برمجة تطبيقات خارجية مباشرة من داخل getServerSideProps.

جيد أن تعرف:

• راجع مرجع API لـ getServerSideProps للمعلمات وـ props التي يمكن استخدامها مع getServerSideProps.
• يمكنك استخدام أداة إزالة الكود في Next.js للتحقق مما يتم إزالته من حزمة العميل.

التعامل مع الأخطاء

إذا حدث خطأ داخل getServerSideProps، سيتم عرض ملف pages/500.js. راجع وثائق صفحة 500 لمعرفة المزيد حول كيفية إنشائه. أثناء التطوير، لن يتم استخدام هذا الملف وسيتم عرض شاشة أخطاء التطوير بدلاً من ذلك.

حالات خاصة

التخزين المؤقت مع عرض جانب الخادم (SSR)

يمكنك استخدام رؤوس التخزين المؤقت (Cache-Control) داخل getServerSideProps لتخزين الردود الديناميكية مؤقتًا. على سبيل المثال، باستخدام stale-while-revalidate.

// تعتبر هذه القيمة جديدة لمدة عشر ثوانٍ (s-maxage=10).
// إذا تم تكرار الطلب خلال الثواني العشر التالية، ستظل القيمة المخزنة مؤقتًا جديدة.
// إذا تم تكرار الطلب قبل 59 ثانية، ستكون القيمة المخزنة مؤقتًا قديمة ولكنها ستظل معروضة (stale-while-revalidate=59).
//
// في الخلفية، سيتم إجراء طلب إعادة تحقق لملء التخزين المؤقت بقيمة جديدة.
// إذا قمت بتحديث الصفحة، سترى القيمة الجديدة.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

ومع ذلك، قبل اللجوء إلى cache-control، نوصي بالتحقق مما إذا كان getStaticProps مع ISR مناسبًا أكثر لاستخدامك.