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()
  // تمرير البيانات إلى الصفحة عبر الخصائص
  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()
  // تمرير البيانات إلى الصفحة عبر الخصائص
  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 الصفحة بشكل صحيح. تأكد من عدم تمرير أي معلومات حساسة لا يجب أن تكون متاحة على العميل في الخصائص.
• عندما يزور المستخدم الصفحة عبر next/link أو next/router، يرسل Next.js طلب API إلى الخادم، الذي يقوم بتشغيل getServerSideProps.
• لا تحتاج إلى استدعاء مسار API في Next.js لجلب البيانات عند استخدام getServerSideProps لأن الدالة تعمل على الخادم. بدلاً من ذلك، يمكنك استدعاء نظام إدارة المحتوى (CMS)، قاعدة بيانات، أو واجهات برمجة تطبيقات خارجية مباشرة من داخل getServerSideProps.

معلومة مفيدة:

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

معالجة الأخطاء

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

حالات خاصة

وقت التشغيل على الحافة (Edge Runtime)

يمكن استخدام getServerSideProps مع كل من وقت تشغيل بدون خادم ووقت تشغيل الحافة، ويمكنك تعيين الخصائص في كليهما.

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

يمكنك تعيين وقت التشغيل بشكل صريح لكل صفحة عن طريق تعديل config، على سبيل المثال:

export const config = {
  runtime: 'nodejs', // أو "edge"
}

export const getServerSideProps = async () => {}

التخزين المؤقت مع عرض جانب الخادم (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 أكثر ملاءمة لحالة استخدامك.