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

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

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

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

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

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، راجع توثيق جلب البيانات.