Next.js مقابل Astro: كم نسبة صفحتك تفاعلية؟
لا يرسل Astro أي جافاسكربت حتى تطلبه أنت. أما Next.js فيرسل بيئة تشغيل React ويترك لك تقليصها. هذا الفرق وحده يحسم معظم المسألة.
الصياغة الصادقة لهذه المقارنة سؤال واحد: ما نسبة صفحتكم التي عليها أن تفعل شيئًا بعد التحميل؟
أجيبوا عنه، وتحلّ المقارنة نفسها إلى حدّ بعيد.
نقطة البداية عند كلٍّ منهما
يعرض Astro إلى HTML ولا يرسل جافاسكربت. التفاعلية تُفعَّل لكل مكوّن على حدة - جزيرة - وكل ما خارجها ترميز ثابت. صفحةٌ فيها مربّع بحث ترسل مربّع البحث.
يعرض Next.js إلى HTML ويرسل بيئة تشغيل React. تتيح Server Components إبقاء المكوّنات بعيدًا عن العميل، فتصير الحزمة صغيرة، لكن خطّ الأساس ليس صفرًا، والانضباط مسؤوليتكم. موضع حدّ العميل هو كامل الفرق بين صفحة Next.js رشيقة وأخرى ثقيلة.
إذن: يبدأ Astro من الصفر وتضيفون، ويبدأ Next.js ببيئة تشغيل وتطرحون. وفي صفحة معظمها ثابت، يفوز البدء من الصفر، والفارق ليس ضئيلًا.
أين يكون Astro الجواب الأفضل
- التوثيق والمدوّنات والمواقع التسويقية. محتوى مع أجزاء تفاعلية قليلة. تتعامل مجموعات المحتوى في Astro مع الـ frontmatter والمحتوى المُنمَّط و markdown أصالةً، وإلا فهي كومة صغيرة من الشيفرة اللاصقة.
- كل موضع تكون فيه ميزانية الجافاسكربت هي القيد. شبكات بطيئة، وأجهزة رخيصة، وأسواق كبيرة يكون فيها الهاتف الوسيط ليس حديثًا.
- مواقع فيها مكوّنات من أكثر من إطار عمل. Astro محايد فعلًا. أداة React وأداة Svelte في صفحة واحدة أمرٌ عادي لا بطولي.
أين يكون Next.js الجواب الأفضل
- حالة عميل مشتركة عبر الصفحة. سلّة، أو لوحة مرشّحات تقود شبكة عناصر، أو محرّر. جزر Astro معزولة بحكم التصميم؛ وجعلها تتحادث يعني اللجوء إلى مخزن حالة خارج إطار العمل، وعندها تكونون تبنون ما يفعله React أصلًا.
- واجهات التطبيق خلف تسجيل الدخول. كل ما يتغيّر فيه معظم الصفحة بحسب المستخدم، وتُحسم فيه استراتيجية العرض لكل مسار لا لكل مكوّن.
- الثابت والديناميكي معًا في قاعدة شيفرة واحدة. كتالوج يجب توليده وقت البناء، وصفحة دفع يجب ألّا تكون كذلك. نموذج العرض مصمَّم لهذا الانقسام تحديدًا.
الفخّ الذي في المنتصف
الحالة التي تسوء هي الموقع الذي يبدأ محتوًى ثم ينمو داخله تطبيق. موقع توثيق يضيف بيئة تجريب. موقع تسويقي يضيف مُهيّئًا، ثم منطقة حساب.
تتعامل الجزر مع واحدة من هذه. أما ثلاثٌ منها تتشارك الحالة فهي النقطة التي تبدأ عندها الفرق بكتابة جسرها الخاص - وطبقة حالة مصنوعة يدويًا بين جزر معزولة أسوأ من جواب أيٍّ من الإطارين.
إن كنتم ترون هذا المسار وقت الاختيار فزنوه. وإن كنتم لا ترونه حقًا، فـ Astro هو الخطأ الأرخص: مغادرة موقع ثابت أسهل من مغادرة تطبيق.
ما ليست المسألة عنه
تحسين محركات البحث. كلاهما ينتج HTML معروضًا على الخادم. لا أفضلية جوهرية لأحدهما، وما يحسم الترتيب فعلًا - الروابط الأساسية وخرائط الموقع، والبيانات المهيكلة، و Core Web Vitals - عملكم أنتم في كليهما.
السرعة. أفضلية Astro في وزن الصفحة حقيقية، وهي عن الجافاسكربت لا عن العرض. موقع Next.js مبنيّ جيدًا بحدّ عميل منضبط سريعٌ. والمُهمَل ليس كذلك، وكذلك موقع Astro مُهمَل فيه خمس جزر لا لزوم لها.
وإن كان جواب السؤال الافتتاحي "لا شيء تقريبًا"، فقد لا تحتاجون إطار React أصلًا.