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

ما هو ISR؟

ISR هي طريقة عرض هجينة في Next.js. إنه يجدد الصفحات الثابتة على فترات زمنية محددة ، مما يساعد في تحسين محركات البحث ويحسن تجربة المستخدم من خلال الحفاظ على محتوى محدث دون إعادة بناء الموقع بأكمله.

كيف يحسن ISR SEO وتجربة المستخدم؟

إذا كنت قد استخدمت React.js أو تطبيق صفحة واحدة تقليدية (SPA) ، فأنت تعلم أن هناك عادة ملف HTML واحد فقط في منتجع صحي. عندما يزور المستخدم لأول مرة موقع ويب للسبا ، يرسل المنتجع الصحي ملف HTML الحد الأدنى (في React ، وعادة ما يكون هذا index.html). بعد ذلك ، يجلب CSS و JavaScript والموارد الأخرى اللازمة للصفحة المطلوبة. ثم يتم تقديم هذه الموارد ودمجها في HTML بمجرد وصولها إلى العميل (المتصفح). ومع ذلك ، كما ذكرنا سابقًا ، يحتوي ملف HTML الأولي الذي تم إرساله بواسطة SPA على محتوى ضئيل أو معدوم.

الآن ، تخيل روبوت Google يطلب موقع الويب بدلاً من المستخدم. في حين أن روبوتات Google الحديثة يمكنها تنفيذ JavaScript لاسترداد المحتوى ، إلا أن الاعتماد فقط على ذلك يمكن أن يؤثر سلبًا على كبار المسئولين الاقتصاديين. قد يرى الروبوت HTML الأولي على أنه فارغ ، مما قد يؤخر فهرسة محتوى الصفحة ، وربما يضر تصنيفات البحث الخاصة بك.

Next.js يحل هذا باستخدام تقنيات تقديم من جانب الخادم ، مثل تقديم الخادم قبل الإعادة. سنتحدث عن تقديم التفاصيل في وقت لاحق ، ولكن إليك نظرة عامة موجزة. مع تقديم الخادم المسبق ، يتم إنشاء HTML لكل مسار على الخادم وإرسالها مباشرة إلى العميل. عادة ما يتم تجميع ملفات CSS و JavaScript وتخزينها مؤقتًا.

لذلك ، عندما يزور المستخدم أو Google Bot الموقع ، يرون على الفور صفحة تم تقديمها بالكامل. هذا يحسن تحسين محركات البحث (SEO) لأن بوت Google يمكنه رؤية المحتوى على الفور في HTML. كما أنه يعزز تجربة المستخدم عن طريق تسريع تحميلات الصفحة ، مما يعني أنه لا يتعين على المستخدمين الانتظار حتى يتم تحميل المحتوى ديناميكيًا.

كيف يعمل ISR؟

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

الآن ، دعنا نقول أنك تنفذ ISR على صفحة قائمة المدونات الخاصة بك وتعيين وقت إعادة التحقق إلى 60 ثانية. يمكنك بناء مشروعك لأول مرة ، ويبدأ مؤقت إعادة التحقق. يزور المستخدم موقع الويب الخاص بك ، ويذهب إلى صفحة قائمة المدونة ، ويرى القائمة الحالية للمدونات. وفي الوقت نفسه ، تنشر منشورًا جديدًا للمدونة ، ولكن نظرًا لأنه لا يزال هناك 20 ثانية متبقية في نافذة 60 ثانية ، فإن المستخدمين الجدد الذين يزورون الموقع لن يروا المدونة الجديدة بعد.

بمجرد انتهاء 60 ثانية ، فإن ISR يتحقق من البيانات الجديدة ، ويرى أن هناك منشورًا جديدًا للمدونة ، ويعيد إعادة توليد الصفحة الثابتة بالمحتوى المحدث. ثم يقوم بتخزين الإصدار الجديد على الخادم. إليك شيء مهم يجب ملاحظته: بينما يقوم ISR بتجديد الصفحة ، لا يزال المستخدمون يرون الإصدار القديم حتى يصبح الإصدار الجديد جاهزًا. لذلك ، بعد انتهاء ISR ، سيشاهد أي زوار جدد الصفحة المحدثة ، لكن المستخدمين الذين كانوا موجودين بالفعل على الموقع قبل إعادة التحقق من صحة سيظلون يرون الصفحة القديمة ما لم يتم تحديثها.

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

كيفية تنفيذ ISR في جهاز توجيه التطبيق

لتنفيذ ISR (تجديد ثابت ثابت) في جهاز توجيه التطبيق ، من المهم معرفة أنه يجب استخدام ISR في مكونات الخادم ، وليس مكونات العميل. وذلك لأن ISR هي طريقة لإعادة تقديم الخادم ، وليست طريقة من جانب العميل. لذلك ، يجب عليك وضع ISR في ملفات مثل التطبيق/المدونة/page.tsx أو التطبيق/المدونة/page.jsx.

] يجب أن يكون مكون الخادم قادرًا على جلب بيانات جديدة من أجل تجديد الصفحة ، وإلا ، لن تحدث أي تحديثات.

لتمكين ISR ، كل ما عليك فعله هو إضافة خاصية REDALADED إلى طريقة الجلب. إذا كنت تفضل استخدام AxiOS بدلاً من الجلب ، فلا يزال بإمكانك استخدامه عن طريق تكوين الطلب بشكل مشابه ، ولكن في الوقت الحالي ، سألتزم باستخدام Fetch. ربما سأشرح لاحقًا كيفية القيام بذلك باستخدام Axios.

قدمت مثالًا مع ملف TSX و JSX Fiel:

هذا مثال على التنفيذ في ملف TSX

هذا مثال على التنفيذ في ملف JSX:

كيفية تنفيذ ISR في جهاز توجيه الصفحة؟

لتنفيذ ISR في جهاز توجيه الصفحة ، يجب عليك تصدير GetStaticProps من المكون الخاص بك وإضافة خاصية RELIDADIDED إلى هذه الوظيفة. يتم تشغيل هذه الوظيفة فقط أثناء تقديم جانب الخادم ، لذلك تحتاج إلى التأكد من الاتصال بـ API داخل GetStaticProps. كما هو مذكور في القسم السابق ، يمكنك استخدام Fetch أو Axios لجلب بياناتك ، ولكن ضع في اعتبارك أنه يجب إجراء استدعاء API داخل GetStaticProps ، وإلا فلن يعمل ISR.

مرة أخرى ، يتم تنفيذ هذه الوظيفة على الخادم ، وليس العميل. إليك مثال لإظهار:

هذا مثال على التنفيذ في ملف TSX:

هذا مثال على التنفيذ في ملف JSX:

خاتمة

ISR في Next.js هي طريقة تقديم الخادم التي تحسن كل من SEO وتجربة المستخدم.

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

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

شكرًا لك على قراءة هذه المدونة ، وآمل أن تكون قد استمتعت بها!