تعرَّف على مزايا استخدام AMP في تطبيق Next.js وعيوبه
AMP هو إطار عمل لمكوّنات الويب يحسّن أوقات تحميل الصفحات. يتوافق Next.js مع AMP بشكل تلقائي.
ماذا ستتعلّم؟
يصف هذا الدليل أولاً بإيجاز كيفية ضمان AMP لتحميل الصفحات بسرعة، ثم يشرح الطرق المختلفة التي يمكنك من خلالها إتاحة AMP في تطبيق Next.js، ثم يساعدك في تحديد النهج الأفضل لك.
الجمهور المستهدف لهذا الدليل هو مطوّر تطبيقات ويب قرر استخدام Next.js ولكنه غير متأكد مما إذا كان سيدعم AMP.
كيفية ضمان AMP لتحميل الصفحات بسرعة
تتّبع صفحات AMP استراتيجيتَين رئيسيتَين لضمان السرعة:
- رمز HTML لصفحات AMP: هو شكل محدود من HTML يجعل بعض التحسينات إلزامية ويحظر الأنماط الهيكلية التي تؤدي إلى البطء. يمكنك الاطّلاع على طريقة عمل AMP للحصول على نظرة عامة عالية المستوى على التحسينات والقيود.
- ذاكرة التخزين المؤقت لصفحات AMP: هي ذاكرة تخزين مؤقت للمحتوى تستخدمها بعض محركات البحث، مثل Google وBing، وتعتمد على العرض المسبق لتسريع تحميل الصفحات. يمكنك الاطّلاع على أسباب توفّر ذاكرة التخزين المؤقت لصفحات AMP لمعرفة المزيد عن مزايا ذاكرة التخزين المؤقت ومقايضاتها، وعلى كيف يتم تخزين صفحة AMP الخاصة بي مؤقتًا؟ لفهم كيفية تخزين صفحات AMP مؤقتًا.
كيفية استخدام AMP في Next.js
هناك طريقتان لاستخدام AMP في Next.js:
- يتيح لك نهج Hybrid AMP إنشاء نسخة AMP مصاحبة لأي صفحة Next.js.
- يتيح لك نهج صفحات AMP فقط جعل صفحة AMP الخيار الوحيد للصفحة.
على الرغم من أنّ Next.js يُعتبر عادةً إطار عمل React، من المهم أن تفهم أنّه عند استخدام Next.js لعرض صفحات AMP، لن يعود بإمكانك تشغيل مكوّنات React من جهة العميل لأنّ مكوّنات React ليست مكوّنات AMP صالحة. بعبارة أخرى، لم يعُد Next.js إطار عمل React، بل أصبح محرّك نماذج من جهة الخادم لإنشاء صفحات AMP.
كيفية تحديد ما إذا كان يجب استخدام نهج AMP المختلط أو نهج AMP فقط
إذا كنت مهتمًا بأداء التحميل، يمكن أن تكون صفحة AMP فقط طريقة جيدة للتأكّد من أنّ صفحتك يتم تحميلها بسرعة وتبقى سريعة. ولكن هناك مشكلة: لضمان السرعة، تحظر AMP بعض الأنماط المعمارية وعناصر HTML التي غالبًا ما تؤدي إلى بطء الصفحات. على سبيل المثال، لا تسمح صفحات AMP باستخدام JavaScript المتزامن المخصّص لأنّ الموارد التي تحظر العرض هي سبب شائع لبطء تحميل الصفحات.
لمعرفة ما إذا كان نهج "صفحات AMP فقط" مناسبًا لك، عليك تحديد ما إذا كان من الممكن تمثيل كل الرموز البرمجية للواجهة الأمامية في رمز HTML لصفحات AMP:
- يمكنك الاطّلاع على طريقة عمل AMP لفهم القيود البنيوية العالية المستوى وعمليات التحسين الإلزامية في AMP.
- يمكنك الاطّلاع على علامات HTML لمعرفة علامات HTML التي تسمح بها صفحات AMP والتي تحظرها، وتصفُّح كتالوج مكوّنات AMP للاطّلاع على المكوّنات المخصّصة التي أنشأها منتدى AMP لحلّ حالات الاستخدام الشائعة، والاطّلاع على amp-script لمعرفة كيفية استخدام JavaScript المخصّصة لتنفيذ الميزات التي لا تتيحها صفحات AMP حاليًا.
حتى إذا لم يكن نهج استخدام صفحات AMP فقط مناسبًا لصفحتك، قد يكون من المفيد استخدام صفحات AMP كلما أمكن ذلك، نظرًا لسرعة رمز HTML لصفحات AMP وذاكرة التخزين المؤقت لصفحات AMP. يوفّر نهج Hybrid AMP في Next.js طريقة لعرض صفحات AMP بشكل مشروط. ومع ذلك، فإنه يؤدي أيضًا إلى ارتفاع تكلفة الصيانة لأنه يتطلب منك الاحتفاظ بنسختين من كل صفحة.
الخاتمة
تضمن صفحات AMP أن يكون موقعك الإلكتروني سريعًا ويحافظ على سرعته من خلال فرض الأنماط التي تؤدي إلى السرعة وحظر الأنماط التي تؤدي إلى البطء. رمز HTML لصفحات AMP وذاكرة التخزين المؤقت لصفحات AMP هما الطريقتان الرئيسيتان اللتان تضمن بهما صفحات AMP السرعة. ولكن قبل اعتماد صفحات AMP، عليك التأكّد من أنّها تستوفي جميع متطلبات موقعك الإلكتروني.