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

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

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

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

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

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

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

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

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

يصدّرتقصيروظيفةبيت({ بيانات }) {
يعود (
<رئيسي>
 // يستخدم





instagram viewer


بيانات
</main>
 );
}
يصدّرغير متزامنوظيفةgetServerSideProps() {
// إحضار البيانات من واجهة برمجة التطبيقات الخارجية
مقدار ثابت الدقة = انتظر جلب ('https://.../data')
مقدار ثابت البيانات = انتظر res.json ()
// سيتم تمريرها إلى مكون الصفحة كدعامات
يعود { الدعائم: { بيانات } }
}

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

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

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

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

أحضر('https://...'، { مخبأ: 'لا متجر' });

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

أحضر('https://...'، {next: {revalidate: 0}})؛

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

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

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

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

يستورد {useState ، useEffect} من 'تتفاعل'
وظيفةبيت() {
مقدار ثابت [data، setData] = useState (باطل)
مقدار ثابت [isLoading، setLoading] = useState (خطأ شنيع)
useEffect (() => {
 setLoading (حقيقي)


أحضر('/api/get-data')
 ثم ((الدقة) => res.json ())
 ثم ((البيانات) => {
 setData (بيانات)
 setLoading (خطأ شنيع)
 })
 }, [])


إذا (isLoading) يعود <ص>تحميل...</ ص>
 إذا تم إرجاع (! البيانات) <ص>لايوجد بيانات</ ص>
يعود (
<شعبة>
 // يستخدمبيانات
</div>
 )
}

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

يستورد useSWR من "SWR"
const fetcher = (... args) => إحضار (... args). ثم ((الدقة) => res.json ())
وظيفةبيت() {
مقدار ثابت {data، error} = useSWR ('/api/data '، fetcher)
 إذا (خطأ) يعود <شعبة>فشل في التحميل</div>
 إذا تم إرجاع (! البيانات) <شعبة>تحميل...</div>
يعود (
<شعبة>
 // يستخدمبيانات
</div>
 )
}

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

"يستخدمعميل";
يصدّرتقصير () => {
يعود (
<شعبة>
// مكون العميل
</div>
 );
};

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

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

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

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

يصدّرتقصيروظيفةبيت({ بيانات }) {
يعود (
<رئيسي>
 // يستخدمبيانات
</main>
 );
}
يصدّرغير متزامنوظيفةgetStaticProps() {
// إحضار البيانات من واجهة برمجة التطبيقات الخارجية في وقت الإنشاء
مقدار ثابت الدقة = انتظر جلب ('https://.../data') 
مقدار ثابت البيانات = انتظر res.json ()
// سيتم تمريرها إلى مكون الصفحة كدعامات
يعود { الدعائم: { بيانات } }
}

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

يصدّرغير متزامنوظيفةgetStaticProps() {
 // يتصلوظيفةلأحضربياناتمنقاعدة البيانات
مقدار ثابت البيانات = انتظر getDataFromDB ()
يعود { الدعائم: { بيانات } }
}

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

غير متزامنوظيفةاحصل على البيانات() {
مقدار ثابت الدقة = انتظر جلب ('https://.../data');
يعود res.json () ؛
}
يصدّرتقصيرغير متزامنوظيفةبيت() {
مقدار ثابت البيانات = انتظر احصل على البيانات()؛
يعود (
<رئيسي>
 // يستخدمبيانات
</main>
 );
}

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

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

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

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

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

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

يصدّرغير متزامنوظيفةgetStaticProps() {
مقدار ثابت الدقة = انتظر جلب ('https://.../data')
مقدار ثابت البيانات = انتظر res.json ()
يعود {
 الدعائم: {
 بيانات،
 },
 إعادة التحقق: 60
 }
}

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

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

أحضر('https://.../data'، {next: {revalidate: 60}})؛

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

كيفية اختيار طريقة العرض

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

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