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