يعد SSR (العرض من جانب الخادم) طريقة أخرى لإنشاء الصفحات في Next.js. في هذه المقالة، أريد أن أشرح ما هو SSR، وكيف يعمل، وكيفية تنفيذه في كل من جهاز توجيه الصفحة وجهاز توجيه التطبيقات لمشروع Next.js.

ما هو إصلاح القطاع الأمني؟

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

كيف يعمل إصلاح القطاع الأمني ​​(SSR)؟

عند استخدام SSR في Next.js، في كل مرة يطلب المستخدم صفحة يتم فيها تنفيذ SSR، يتم إنشاء الصفحة بعد تقديم الطلب. وهذا يعني أنه يتعين على المستخدم الانتظار حتى يقوم Next.js بإنشاء المحتوى الثابت وتجميعه مرة أخرى لكل طلب. بمجرد أن تصبح الصفحة الثابتة جاهزة، يمكن للمستخدم رؤية الصفحة المطلوبة.

من المهم ملاحظة أن SSR يعمل فقط على الخادم، ويقوم بإنشاء صفحة ثابتة لكل طلب، لذلك لا يعمل أثناء عملية إنشاء المشروع.

كيفية تنفيذ SSR في جهاز توجيه التطبيق

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

على سبيل المثال، إذا كانت لديك صفحة ثابتة وقمت بجلب البيانات من واجهة برمجة التطبيقات (API)، فستستخدم هذه الصفحة SSR بشكل افتراضي. من المهم ملاحظة أنه عند استخدام SSR، لا يتم تجميع الصفحة أو عرضها مسبقًا في وقت الإنشاء وإذا كنت تستخدم صفحة ديناميكية في مشروعك، فستستخدم SSG بشكل افتراضي إذا لم تقم بإحضار أي بيانات. ولكن عند الجلب من واجهة برمجة التطبيقات، سيتم التبديل إلى SSR، ومرة ​​أخرى، لن يتم تجميع أي صفحات ثابتة أثناء وقت الإنشاء.

هذا مثال على تنفيذ SSR في مسار ثابت:

import React from 'react';

const AboutPage = async () => {
  // Fetch data from an API or any server-side source
  const data = getDataFromApi();

  return (
    

      
About Us
      
{data}
    
  );
};

export default AboutPage;

كيفية تنفيذ SSR في جهاز توجيه الصفحة

لتنفيذ SSR في جهاز توجيه الصفحة، تحتاج إلى إنشاء وظيفة getServerSideProps في ملفك. سيتم استدعاء هذه الوظيفة بعد كل طلب مستخدم. إذا كنت تستخدم مسارًا ديناميكيًا، مثل ملف [id]، فستحتاج أيضًا إلى استخدام getServerSideProps في ملفك. تأخذ هذه الوظيفة وسيطة، تسمى غالبًا سياقًا، يمكنك من خلاله استرداد المعرف، وقيمة الصفحة الديناميكية. يتم استدعاء هذه الوظيفة بواسطة الخادم عند كل طلب مستخدم.

هذا مثال على التنفيذ في ملف tsx :

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export const getServerSideProps: GetServerSideProps = async () => {
  const data = getDataFromApi();
  return {
    props: {
      data,
    },
  };
};

export default AboutPage;

هذا مثال على التنفيذ في ملف jsx :

const AboutPage = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export async function getServerSideProps() {
  const data = getDataFromApi();

  return {
    props: {
      data,
    },
  };
}

export default AboutPage;

خاتمة

يُعد SSR طريقة مفيدة لتجميع أو إنشاء صفحات ثابتة، لكن ذلك لا يحدث أثناء وقت الإنشاء. عندما تحتاج إلى تحديث صفحتك بناءً على كل طلب مستخدم حتى يتمكن المستخدمون من رؤية أحدث البيانات، يمكنك استخدام SSR. ومع ذلك، من المهم ملاحظة أن الأمر قد يستغرق وقتًا أطول وليس بنفس سرعة الطرق الأخرى مثل SSG (إنشاء الموقع الثابت) أو ISR (التجديد الثابت التزايدي) لأنه ينشئ صفحة ثابتة لكل طلب مستخدم.

أتمنى أن تستمتع بهذا المقال! إذا كان لديك أي أسئلة، فلا تتردد في سؤالي. إذا كنت تريد أن تقرأ عن ISR وSSG، يمكنك الاطلاع على مقالاتي حولهما هنا لـ ISR وهنا لـ SSG. إذا كنت تريد معرفة المزيد عن كل شيء، يمكنك متابعة موقع الويب الخاص بي.

شكرا لقرائتكم! وداعا الآن!