فهم طرق عرض Next.js: CSR و SSR و SSG و ISR

القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة.

التقديم هو عملية تحويل كود React إلى HTML. تعتمد طريقة العرض التي تختارها على البيانات التي تعمل بها ومدى اهتمامك بالأداء.

في Next.js ، يكون العرض شديد التنوع. يمكنك عرض الصفحات من جانب العميل أو الخادم ، بشكل ثابت أو متزايد.

---

---

ألق نظرة على كيفية عمل هذه الطرق وكيفية أداء كل منها.

اجعل فيديو اليوم

التقديم من جانب الخادم

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

يقوم المتصفح بإجراء هذا الطلب لكل ارتباط ينقر عليه المستخدم مما يعني أن الخادم يعالج الطلب في كل مرة.

هذا يمكن أن يقلل من أداء الموقع. ومع ذلك ، يعتبر العرض من جانب الخادم مثاليًا للصفحات التي تستهلك بيانات ديناميكية.

استخدم getServerSideProps لإعادة إنشاء الصفحة في كل مرة يطلبها المستخدم.

---

---

export default function Home({ data }) { 
  return ( 
    <main> 
      // Use data 
    </main> 
  ); 
} 
  
export async function getServerSideProps() { 
  // Fetch data from external api 
 const res = await fetch('https://.../data') 
  const data = await res.json() 
  
  // Will be passed to the page component as props 
  return { props: { data } } 
} 

يعمل getServerSideProps فقط على الخادم وهذه هي الطريقة التي يعمل بها:

• عندما يصل المستخدم إلى الصفحة مباشرة ، يتم تشغيلها في وقت الطلب ويتم تقديم الصفحة مسبقًا بالدعائم التي تعيدها.
• عندما يصل المستخدم إلى الصفحة من خلال رابط التالي ، يرسل المتصفح طلبًا إلى الخادم الذي يقوم بتشغيلها.

في الإصدار الجديد ، يمكنك الاشتراك في العرض من جانب الخادم باستخدام عمليات جلب البيانات الديناميكية في صفحة أو تخطيط.

---

---

عمليات جلب البيانات الديناميكية هي طلبات fetch () تقوم على وجه التحديد بإلغاء الاشتراك في التخزين المؤقت عن طريق تعيين خيار ذاكرة التخزين المؤقت على 'no-store'.

fetch('https://...', { cache: 'no-store' }); 

بدلاً من ذلك ، قم بتعيين إعادة التحقق على 0:

شاشة زرقاء تالفة الأجهزة الخاطئة الصفحة

fetch('https://...', { next: { revalidate: 0 } }); 

هذه الميزة في مرحلة تجريبية حاليًا ، لذا ضع ذلك في الاعتبار. يمكنك قراءة المزيد حول عمليات جلب البيانات الديناميكية في ملف Next.js 13 beta docs .

التقديم من جانب العميل

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

استخدم ال خطاف useEffect () لعرض صفحات على العميل مثل هذا:

import { useState, useEffect } from 'react' 
function Home() { 
  const [data, setData] = useState(null) 
  const [isLoading, setLoading] = useState(false) 
  
  useEffect(() => { 
    setLoading(true) 
  
    fetch('/api/get-data') 
      .then((res) => res.json()) 
      .then((data) => { 
        setData(data) 
        setLoading(false) 
      }) 
  }, []) 
  
  if (isLoading) return <p>Loading...</p> 
  if (!data) return <p>No data</p> 
  
  return ( 
    <div> 
      // Use data 
    </div> 
  ) 
} 

يمكنك أيضًا استخدام خطاف SWR. يقوم بتخزين البيانات مؤقتًا وإعادة التحقق منها في حالة ما إذا أصبحت قديمة.

import useSWR from 'swr' 
const fetcher = (...args) => fetch(...args).then((res) => res.json()) 
function Home() { 
  const { data, error } = useSWR('/api/data', fetcher) 
  if (error) return <div>Failed to load</div> 
  if (!data) return <div>Loading...</div> 
  
  return ( 
    <div> 
      // Use data 
    </div> 
  ) 
} 

في Next.js 13 ، تحتاج إلى استخدام مكون عميل عن طريق إضافة التوجيه 'use client' في أعلى الملف.

"use client"; 
export default () => { 
  return ( 
      <div> 
       // Client component 
      </div> 
  ); 
}; 

يتمثل الاختلاف بين SSR و CSR في أنه يتم جلب البيانات في كل طلب صفحة على الخادم في SSR بينما يتم جلب البيانات من جانب العميل في CSR.

إنشاء موقع ثابت

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

في Next.js ، يجب عليك تصدير وظيفة getStaticProps في الصفحة التي تريد عرضها بشكل ثابت.

export default function Home({ data }) { 
  return ( 
    <main> 
      // Use data 
    </main> 
  ); 
} 
  
export async function getStaticProps() { 
  // Fetch data from external API at build time 
  const res = await fetch('https://.../data')  
  const data = await res.json() 
  
  // Will be passed to the page component as props 
 return { props: { data } } 
} 

يمكنك أيضًا الاستعلام عن قاعدة البيانات داخل getStaticProps.

export async function getStaticProps() { 
  // Call function to fetch data from database 
  const data = await getDataFromDB() 
  return { props: { data } } 
} 

في Next.js 13 ، يكون العرض الثابت هو الإعداد الافتراضي ، ويتم جلب المحتوى وتخزينه مؤقتًا إلا إذا قمت بتعيين خيار التخزين المؤقت على إيقاف التشغيل.

async function getData() { 
  const res = await fetch('https://.../data'); 
  return res.json(); 
} 
export default async function Home() { 
  const data = await getData(); 
  return ( 
    <main> 
      // Use data 
    </main> 
  ); 
} 

تعلم المزيد عن عرض ثابت في Next.js 13 من المستندات.

جيل ثابت تزايدي

هناك أوقات تريد فيها استخدام SSG ولكنك تريد أيضًا تحديث المحتوى بانتظام. هذا هو المكان الذي يساعد فيه التوليد الثابت المتزايد (ISG).

كيف تعمل النتيجة المفاجئة

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

تحتفظ ISG بمزايا SSG مع ميزة إضافية تتمثل في تقديم محتوى محدث للمستخدمين. ISG مثالية لتلك الصفحات على موقعك التي تستهلك البيانات المتغيرة. على سبيل المثال ، يمكنك استخدام ISR لتقديم مشاركات المدونة بحيث تظل المدونة محدثة عند تحرير المنشورات أو إضافة منشورات جديدة.

لاستخدام ISR ، أضف خاصية إعادة التحقق إلى وظيفة getStaticProps على الصفحة.

export async function getStaticProps() { 
  const res = await fetch('https://.../data') 
  const data = await res.json() 
  
  return { 
    props: { 
      data, 
    }, 
    revalidate: 60 
  } 
} 

هنا ، سيحاول Next.js إعادة إنشاء الصفحة عندما يأتي الطلب بعد 60 ثانية. سينتج عن الطلب التالي استجابة بالصفحة المحدثة.

في Next.js 13 ، استخدم إعادة التحقق في الجلب مثل هذا:

fetch('https://.../data', { next: { revalidate: 60 } }); 

يمكنك ضبط الفاصل الزمني على أي شيء يعمل بشكل أفضل مع بياناتك.

كيفية اختيار طريقة التقديم

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

SSG مناسب للصفحات التي تكون بياناتها ثابتة في الغالب بينما ISG هي الأفضل للصفحات التي تحتوي على بيانات تريد تحديثها على فترات. تعد SSG و ISG رائعة من حيث الأداء وتحسين محركات البحث نظرًا لأن البيانات يتم جلبها مسبقًا ويمكنك تخزينها مؤقتًا.