‏Next.js مقابل Astro: كم نسبة صفحتك تفاعلية؟

الصياغة الصادقة لهذه المقارنة سؤال واحد: ما نسبة صفحتكم التي عليها أن تفعل شيئًا بعد التحميل؟

أجيبوا عنه، وتحلّ المقارنة نفسها إلى حدّ بعيد.

نقطة البداية عند كلٍّ منهما

يعرض Astro إلى HTML ولا يرسل جافاسكربت. التفاعلية تُفعَّل لكل مكوّن على حدة - جزيرة - وكل ما خارجها ترميز ثابت. صفحةٌ فيها مربّع بحث ترسل مربّع البحث.

يعرض Next.js إلى HTML ويرسل بيئة تشغيل React. تتيح Server Components إبقاء المكوّنات بعيدًا عن العميل، فتصير الحزمة صغيرة، لكن خطّ الأساس ليس صفرًا، والانضباط مسؤوليتكم. موضع حدّ العميل هو كامل الفرق بين صفحة Next.js رشيقة وأخرى ثقيلة.

إذن: يبدأ Astro من الصفر وتضيفون، ويبدأ Next.js ببيئة تشغيل وتطرحون. وفي صفحة معظمها ثابت، يفوز البدء من الصفر، والفارق ليس ضئيلًا.

والفارق قابل للقياس لا مجرّد بلاغة. هذا الموقع لا يُرسل شيفرة عميل خاصة به على أي مسار، ومع ذلك يحمل في الزيارة الأولى نحو 186 كيلوبايت مضغوطة من زمن تشغيل إطار العمل. وهذا قريب من الأرضية بالنسبة لإطار React، وهي أرضية لا توجد أصلًا في صفحة Astro بلا جزر. وهل يهمّ ذلك؟ يتوقّف كليًّا على من يزوركم: على اتّصال سريع يختفي الفارق، وعلى هاتف أندرويد متوسّط في سوق تحاولون دخوله يكون جزءًا مرئيًّا من زمن الوصول إلى التفاعل.

كم من التحكّم في الترطيب يمنح كلٌّ منهما

هنا يفترق النموذجان عمليًّا لا مبدئيًّا.

جزر Astro تُعلَن بتوجيه يقول متى يجري الترطيب: فورًا، أو حين يكون المتصفّح خاملًا، أو حين يدخل المكوّن مجال الرؤية. والأخير هو المثير: مكوّن أسفل الصفحة لا يكلّف شيئًا حتى يصل إليه أحد، والتعبير عن ذلك سمة واحدة.

ولا يملك Next.js مفتاحًا مكافئًا لكل مكوّن. فمكوّن العميل يُرطَّب كجزء من الشجرة التي ينتمي إليها. أنتم تتحكّمون في ما يُرسَل، وهي الرافعة الأقوى، لكنكم لا تحصلون على «أرسل هذا وشغّله لاحقًا» دون اللجوء إلى استيراد ديناميكي وكتابة سلوك التحميل بأنفسكم.

لا نموذج منهما أفضل بإطلاق. نموذج Astro أدقّ حبيبيّة لصفحة معظمها محتوى ثابت مع أجزاء حيّة قليلة. ونموذج Next.js أفضل حين تكون الأجزاء التفاعلية هي الصفحة.

أين يكون Astro الجواب الأفضل

• التوثيق والمدوّنات والمواقع التسويقية. محتوى مع أجزاء تفاعلية قليلة. تتعامل مجموعات المحتوى في Astro مع الـ frontmatter والمحتوى المُنمَّط و markdown أصالةً، وإلا فهي كومة صغيرة من الشيفرة اللاصقة.
• كل موضع تكون فيه ميزانية الجافاسكربت هي القيد. شبكات بطيئة، وأجهزة رخيصة، وأسواق كبيرة يكون فيها الهاتف الوسيط ليس حديثًا.
• مواقع فيها مكوّنات من أكثر من إطار عمل. Astro محايد فعلًا. أداة React وأداة Svelte في صفحة واحدة أمرٌ عادي لا بطولي.

ونقطة مجموعات المحتوى تستحقّ التوسّع، لأنها أكثر ما يوفّر الوقت في موقع محتوى. بيانات أوّليّة ذات أنواع صريحة، مُتحقَّق منها وقت البناء، بحيث يصل الخطأ خطأَ بناءٍ لا عنوانًا فارغًا في الإنتاج - هذا ما ينتهي كل موقع محتوى إلى بنائه. في Next.js هو اختيار مكتبة وبعض الشيفرة الرابطة؛ طبقة المحتوى في هذا الموقع بضع مئات من الأسطر من ذلك بالضبط. وفي Astro هو إطار العمل نفسه.

أين يكون Next.js الجواب الأفضل

• حالة عميل مشتركة عبر الصفحة. سلّة، أو لوحة مرشّحات تقود شبكة عناصر، أو محرّر. جزر Astro معزولة بحكم التصميم؛ وجعلها تتحادث يعني اللجوء إلى مخزن حالة خارج إطار العمل، وعندها تكونون تبنون ما يفعله React أصلًا.
• واجهات التطبيق خلف تسجيل الدخول. كل ما يتغيّر فيه معظم الصفحة بحسب المستخدم، وتُحسم فيه استراتيجية العرض لكل مسار لا لكل مكوّن.
• الثابت والديناميكي معًا في قاعدة شيفرة واحدة. كتالوج يجب توليده وقت البناء، وصفحة دفع يجب ألّا تكون كذلك. نموذج العرض مصمَّم لهذا الانقسام تحديدًا.

الفخّ الذي في المنتصف

الحالة التي تسوء هي الموقع الذي يبدأ محتوًى ثم ينمو داخله تطبيق. موقع توثيق يضيف بيئة تجريب. موقع تسويقي يضيف مُهيّئًا، ثم منطقة حساب.

تتعامل الجزر مع واحدة من هذه. أما ثلاثٌ منها تتشارك الحالة فهي النقطة التي تبدأ عندها الفرق بكتابة جسرها الخاص - وطبقة حالة مصنوعة يدويًا بين جزر معزولة أسوأ من جواب أيٍّ من الإطارين.

إن كنتم ترون هذا المسار وقت الاختيار فزنوه. وإن كنتم لا ترونه حقًا، فـ Astro هو الخطأ الأرخص: مغادرة موقع ثابت أسهل من مغادرة تطبيق.

وعدم التماثل هذا هو جوهر القرار عمليًّا. نقل المحتوى من Astro إلى Next.js هو في الأساس نقل ملفات Markdown وإعادة كتابة القوالب - المحتوى نفسه قابل للنقل، والروابط لا يلزم أن تتغيّر. أما إخراج تطبيق من إطار عمل فإعادة كتابة. وحين يتقارب خياران، ينبغي أن يفوز الخيار الذي يكون الخطأ فيه أرخص.

ما ليست المسألة عنه

تحسين محركات البحث. كلاهما ينتج HTML معروضًا على الخادم. لا أفضلية جوهرية لأحدهما، وما يحسم الترتيب فعلًا - الروابط الأساسية وخرائط الموقع، والبيانات المهيكلة، و Core Web Vitals - عملكم أنتم في كليهما.

السرعة. أفضلية Astro في وزن الصفحة حقيقية، وهي عن الجافاسكربت لا عن العرض. موقع Next.js مبنيّ جيدًا بحدّ عميل منضبط سريعٌ. والمُهمَل ليس كذلك، وكذلك موقع Astro مُهمَل فيه خمس جزر لا لزوم لها.

وإن كان جواب السؤال الافتتاحي "لا شيء تقريبًا"، فقد لا تحتاجون إطار React أصلًا.