اعرض المصدر لتأكيد عمل SSR في Next.js

كيفية التحقق مما إذا كان SSR يعمل في تطبيق Next.js

هل قمت بإعداد تطبيق Next.js الجديد الخاص بك؟ رائعة!

دعنا الآن نتحقق من أن التطبيق يعمل كما نتوقع أن يعمل. إنه تطبيق Next.js ، لذا يجب أن يكون كذلكقدم جانب الخادم.

إنها إحدى نقاط البيع الرئيسية لـ Next.js: إذا أنشأنا موقعًا باستخدام Next.js ، فسيتم عرض صفحات الموقع على الخادم ، الذي يسلم HTML إلى المتصفح.

هذا له 3 فوائد رئيسية:

لا يحتاج العميل إلى إنشاء مثيل لـ React للعرض ، مما يجعل الموقع أسرع للمستخدمين.
ستقوم محركات البحث بفهرسة الصفحات دون الحاجة إلى تشغيل JavaScript من جانب العميل. شيء ما بدأت به Google ، ولكن اعترفت علانية بأنها عملية أبطأ (ويجب عليك مساعدة Google قدر الإمكان ، إذا كنت تريد الحصول على ترتيب جيد.
يمكنك الحصول على العلامات الوصفية للوسائط الاجتماعية ، وهي مفيدة لإضافة صور المعاينة ، وتخصيص العنوان والوصف لأي من صفحاتك المشتركة على Facebook و Twitter وما إلى ذلك.

دعونا نلقي نظرة على مصدر التطبيق. باستخدام Chrome ، يمكنك النقر بزر الماوس الأيمن في أي مكان في الصفحة والضغط علىاظهر مصدر الصفحة.

إذا قمت بعرض مصدر الصفحة ، فسترى ملف<div><h1>Airbnb clone</h1></div>مقتطف في HTMLbody، إلى جانب مجموعة من ملفات JavaScript - حزم التطبيقات.

لا نحتاج إلى إعداد أي شيء ، SSR (التقديم من جانب الخادم) يعمل بالفعل لدينا.

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

تحميل مجانيكتيب Next.js

اعرض المصدر لتأكيد عمل SSR في Next.js

كيفية التحقق مما إذا كان SSR يعمل في تطبيق Next.js

المزيد من البرامج التعليمية التالية: