استراتيجيات جلب البيانات في NextJS

وهذه هي:

• العرض من جانب العميل: CSR,
• عرض من جانب الخادم: SSR,
• عرض الموقع الثابت: SSG,
• التجديد الثابت التزايدي: التجديد الثابت المتزايد: ISR.

يوفر NextJS، على عكس تطبيق React العادي، ميزة تسمى العرض المسبق. هذا يعني أنه يتم عرض HTML المعروض مسبقًا أثناء التحميل الأولي. في تطبيقات React التقليدية، يتم تحميل التطبيق بالكامل وعرضه من جانب العميل. ثم، بعد أن يقوم JS الكود يتم تحميله، يصبح التطبيق تفاعليًا.

التوليد الثابت

في SSG، يتم إنشاء HTML في وقت الإنشاء ويعاد استخدامه لكل طلب. بعد إنشاء بنية الإنتاج، سيعيد كل طلب استخدام ملف HTML الذي تم إنشاؤه بشكل ثابت.

هناك أيضًا نوعان من التوليد الثابت: مع البيانات وبدونها.

في الحالة الأولى، سيتم إنشاء HTML بعد جلب البيانات عن طريق حل الوعد. في هذه الحالة، يمكننا استخدام طريقة جلب البيانات getStaticProps... ولكن فقط إذا كنت تستخدم Next.js 9.3 أو أحدث. إذا لم يكن الأمر كذلك، ففكر في ترقيته، لأن طريقة getInitialProps الأقدم لم يعد يوصى بها وسيتم إهمالها. تُستدعى هذه الطريقة أيضًا في كل تنقل من جانب العميل لذا فهي ليست فعالة إذا كنت لا تريد جلب البيانات في كل طلب.

تصدير دالة غير متزامنة getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  إرجاع {
    الخصائص: { المشاركات },
  };
} 

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

تصدير دالة غير متزامنة getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  إرجاع {
    الدعائم: {
      المشاركات,
    },
    إعادة التحقق: 30,
  };
}

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

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

تصدير async const getStaticProps = ({ params }) => { {
  const res = await fetch(>https://jsonplaceholder.typicode.com/posts/${params.id});
  const post = انتظر res.json();
  إرجاع {
    الدعائم: { post },
  };
}

تصدير دالة غير متزامنة getStaticPaths() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  const paths = posts.map(({ id })) => ({ params: { id: `${id}'} } }));
  إرجاع {
    المسارات,
    احتياطي: خطأ,
  };
}

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

دعنا الآن نحدد مسارات ما قبل الإنشاء:

تصدير الدالة غير المتزامنة getStaticPaths() {
  إرجاع {
    المسارات: [{المعرف: {المعرف: {"1"}، {المعرف: {المعرف: {"2"} }],
    احتياطي: خطأ,
  };
}

بعد تشغيل عملية التصدير التالية، يمكننا أن نلاحظ في كلتا الحالتين (مع وجود عدد محدود من المسارات وبدونه) وجود عدد مختلف من المشاركات الموجودة في منشوراتي-التطبيق-التطبيق.

دعنا الآن نلقي نظرة فاحصة على المعلمة الاحتياطية الحاسمة والمطلوبة. إنها تحدد ما يجب فعله إذا لم يتم عرض الصفحة مسبقًا في وقت الإنشاء. إذا تم تعيينها على صواب، فسيتم تشغيل getStaticProps وإنشاء تلك الصفحة. إذا كانت خطأ، سنحصل على 404 بعد محاولة تحميل ذلك المسار المحدد. أمر آخر: لا يمكن تصدير الصفحات التي تحتوي على مسارات احتياطية ممكَّنة في getStaticPaths.

يمكنك العثور أدناه على نتائج محاولة تحميل نفس الصفحة الديناميكية في كلتا الحالتين:

الحالة الأولى (بدون مسارات محدودة)

الحالة الثانية (مع ضبط المسارات المحدودة والاحتياطي على خطأ)

الحالة الثانية (مع ضبط المسارات المحدودة والاحتياطية على صواب)

العرض من جانب الخادم

الفرق الرئيسي مع SSG: يتم إنشاء HTML جديد عند كل طلب. يُستخدم في الغالب عندما نقوم بجلب بعض البيانات الخارجية. في هذه الحالة، ليست هناك حاجة لإعادة إنشاء التطبيق في كل مرة نريد فيها تحديث البيانات من الخادم.

تصدير دالة غير متزامنة getServerSideProps() { {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  إرجاع {
    الخصائص: {
      المشاركات,
    },
  };
}

تبدو طريقة getServerSideProps مشابهة جدًا لطريقة getStaticProps. الفرق هو أن طريقة getServerSideProps تعمل على كل طلب، بينما تعمل طريقة getStaticProps مرة واحدة في وقت الإنشاء.

العرض من جانب العميل

مع العرض من جانب العميل، يكون التحميل الأولي للصفحة بطيئًا بعض الشيء. يحدث الاتصال مع الخادم في وقت التشغيل. يمكنك القيام بذلك بطريقة أكثر تقليدية:

const Blog = () = () => { {


 const [posts, setPosts] = useState([]);
  استخدام التأثير(()() => { {
    const fetchData = غير متزامن () => { {
      const res = انتظر إحضار (
     "https://jsonplaceholder.typicode.com/posts");
      const posts = await res.json();
      تعيين المشاركات(المشاركات);
    };
    fetchData();
  }, []);

أيضًا، يمكننا استخدام حل آخر هو "swr" - مكتبة خطافات React لجلب البيانات بواسطة Vercel*، والتي يوصي بها منشئو NextJS بشدة. يرمز SWR إلى الحالة أثناء إعادة التحقق.

^* مصدر البيانات: SWR من فيركل

استورد استخدمSWR من "swr";


const Blog = () => {
 const fetcher = (url) => fetch(url).then((r) => r.json());
 const { data: posts = []، خطأ } = useSWR(
    "https://jsonplaceholder.typicode.com/posts", fetcher);
 إذا (خطأ) إرجاع <div>فشل تحميل المنشورات</div>;
 إذا (!posts.length.length) إرجاع <div>التحميل...</div>;
 إرجاع (
    <>
      {posts.map((post)) =&gt; (
            {عنوان المنشور})
        ))}
    </>
}

الملخص

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

اختصار

• getServerSideProps - عندما تحتاج إلى عرض التطبيق مسبقًا عند كل طلب بالبيانات التي تم جلبها
• GetStaticProps - عندما يمكن جلب البيانات مرة واحدة في وقت الإنشاء واستخدامها في كل طلب دون تحديث
• getInitialProps - غير مستحسن، سيتم إهمالها
• getStaticPaths - للعرض المسبق للمسارات الديناميكية

اقرأ المزيد:

واجهة برمجة تطبيقات القضبان و CORS. اندفاعة من الوعي

لماذا يجب عليك (على الأرجح) استخدام Typescript؟

أعلى كود جودة في مشروع SaaS الخاص بك. لماذا يجب أن تهتم بها كمؤسس (غير تقني)؟