العرض من جانب الخادم (SSR)

يُشار إليه أيضًا باسم "SSR" أو "التقديم الديناميكي (Dynamic Rendering)".

إذا كانت الصفحة تستخدم العرض من جانب الخادم (SSR)، فإن HTML للصفحة يتم إنشاؤه في كل طلب.

لاستخدام العرض من جانب الخادم (SSR) لصفحة ما، تحتاج إلى تصدير (export) دالة غير متزامنة (async) تسمى getServerSideProps. سيتم استدعاء هذه الدالة من قبل الخادم في كل طلب.

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

export default function Page({ data }) {
  // عرض البيانات...
}

// يتم استدعاؤها في كل طلب
export async function getServerSideProps() {
  // جلب البيانات من واجهة برمجة تطبيقات خارجية
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // تمرير البيانات إلى الصفحة عبر الخاصيات (props)
  return { props: { data } }
}

كما ترى، فإن getServerSideProps مشابه لـ getStaticProps، لكن الفرق هو أن getServerSideProps يتم تشغيله في كل طلب بدلاً من وقت البناء.

لمعرفة المزيد حول كيفية عمل getServerSideProps، راجع توثيق جلب البيانات.