فهم الـ SSR والـ SSG والـ CSR والـ ISR في Next.js

تطوير تطبيقات الويب يتطلب من المطورين المفاضلة بين عدة أساليب لتقديم وتوليد الصفحات، كل واحد منها يقدم مزايا محددة تتناسب مع متطلبات التطبيقات المختلفة. Next.js، الإطار الشهير في بيئة JavaScript، يوفر أربعة من هذه الأساليب: Server Side Rendering (SSR), Static Site Generation (SSG), Client Side Rendering (CSR), و Incremental Static Regeneration (ISR). في هذا المقال، سنستعرض هذه الأساليب بالتفصيل مع ذكر أمثلة عملية لكل منها.

اليك عرض لكل منها مع مميزاته وعيوبه وأفضل الحالات للاستخدام:

SSR - Server-Side Rendering

SSR هو عملية انتاج الصفحة على (الخادم - server ) عند كل طلب، وإرسال HTML المكتمل إلى (العميل - client ).

المزايا:

• تحسين السيو (SEO) بفضل تقديم المحتوى كاملاً لمحركات البحث.
• تحسين أداء الصفحة عند الطلب الأول.
• التعامل مع البيانات الديناميكية/المتغيرة بسهولة.

العيوب:

• وقت تحميل الصفحة قد يكون أطول نظرًا لوقت المعالجة على (الخادم - server ).
• تحميل أعلى على (الخادم - server ).

أفضل الحالات للاستخدام:

• المواقع التي تحتوي على محتوى متغير بشكل متكرر.
• تطبيقات تتطلب تحسين SEO مثل المدونات والمتاجر الإلكترونية.

مثال:

// pages/ssr.js
import React from 'react';

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

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

const SSRPage = ({ data }) => {
  return (
    <div>
      <h1>Server-Side Rendering (SSR)</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default SSRPage;

SSG - Static Site Generation

SSG هو عملية توليد الصفحات كملفات HTML ثابتة أثناء عملية البناء، وإرسالها إلى (العميل - client ) عند الطلب.

المزايا:

• أداء سريع جدًا عند الطلب.
• تقليل الحمل على (الخادم - server ).
• مناسب للمحتوى الذي يتغير بشكل نادر.

العيوب:

• التحديثات الديناميكية (عند تغير البيانات) تتطلب عملية بناء جديدة.
• قد يكون غير مناسب للمحتوى المتغير بشكل متكرر.

أفضل الحالات للاستخدام:

• المدونات والمواقع الإخبارية التي لا تتغير محتوياتها بشكل مستمر.
• صفحات الهبوط (Landing Pages) والمواقع الترويجية.

مثال:

// pages/ssg.js
import React from 'react';

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

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

const SSGPage = ({ data }) => {
  return (
    <div>
      <h1>Static Site Generation (SSG)</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default SSGPage;

CSR - Client-Side Rendering

CSR هو عملية عرض الصفحة على (العميل - client ) باستخدام JavaScript بعد تحميل الصفحة الأولية من (الخادم - server ).

المزايا:

• تقليل الحمل على (الخادم - server ) بشكل كبير.
• تحسين تجربة المستخدم مع التحديثات الديناميكية.

العيوب:

• تحسين SEO أقل مقارنة بـ SSR و SSG.
• قد يتأثر أداء الصفحة الأولية بسبب تحميل JavaScript.

أفضل الحالات للاستخدام:

• تطبيقات الويب التفاعلية.
• التطبيقات التي تعتمد على تفاعل المستخدم بشكل كبير.

مثال:

// pages/csr.js
import React, { useEffect, useState } from 'react';

const CSRPage = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Client-Side Rendering (CSR)</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default CSRPage;

ISR - Incremental Static Regeneration

ISR هو عملية توليد الصفحات كملفات HTML ثابتة أثناء عملية البناء مع القدرة على إعادة توليد الصفحات بشكل ديناميكي عند الطلب بعد فترة زمنية معينة.

المزايا:

• الجمع بين مزايا SSG و SSR.
• تحسين الأداء مع القدرة على التعامل مع البيانات الديناميكية.

العيوب:

• تعقيد إضافي في إعداد عملية إعادة التوليد.

أفضل الحالات للاستخدام:

• المواقع التي تحتاج إلى توازن بين الأداء وتحديث البيانات.
• المواقع الإخبارية والمتاجر الإلكترونية التي تحتاج إلى تحديث مستمر للبيانات.

مثال:

// pages/isr.js
import React from 'react';

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
      revalidate: 10, // سيتم إعادة توليد الصفحة كل 10 ثوانٍ
    },
  };
}

const ISRPage = ({ data }) => {
  return (
    <div>
      <h1>Incremental Static Regeneration (ISR)</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default ISRPage;

الخاتمة

تعتمد أفضل طريقة لاختيار طريقة عرض الصفحات في Next.js على نوع التطبيق واحتياجاته. SSR مفيد للمحتوى الديناميكي وتحسين SEO، بينما يوفر SSG أداءً ممتازًا للمحتوى الثابت. CSR مناسب للتطبيقات التفاعلية، بينما يجمع ISR بين الأداء والتحديث الديناميكي. من خلال فهم هذه الفروقات، يمكنك اتخاذ القرار الأفضل لتطوير تطبيقاتك باستخدام Next.js. أبضا يمكنك الدمج بينهم في تطبيق واحد، عند تحديد أولويات التطبيق في لكل صغحة.

المصادر

• Next.js Documentation