البداية · فصل ١

يعني إيه Astro وليه موجود؟

content sites · MPA · server-first · islands · zero JS
🎯 الهدف: تفرّق موقع المحتوى عن تطبيق المتصفح، وتعرف ليه Astro بيطلّع HTML جاهز ويأجّل الـ JavaScript.

موقع محتوى مش تطبيق جوّه المتصفح

Astro معمول لمواقع المحتوى هو البطل: مدونة، لاندينج، توثيق، بورتفوليو، متجر واجهته صفحات، موقع شركة. الزائر عايز يقرأ بسرعة، ومحرك البحث عايز HTML واضح من أول طلب.

أُطر كتير اتبنت الأول عشان تطبيقات جوّه المتصفح: داشبورد، شات، كانبان. النموذج ده اسمه SPA: الصفحة فاضية تقريبًا، وجافاسكربت يبني الواجهة بعد التحميل. Astro ماشي على النموذج التاني، MPA: كل رابط صفحة HTML كاملة، والانتقال الافتراضي تحميل عادي.

الافتراضي في Astro إن الصفحة توصل HTML و CSS، ومن غير JavaScript للزائر.

خمس قرارات بتمشي المذكرة كلها

١. المحتوى الأول

لو النجاح متوقف على إن النص يوصل بسرعة، HTML الجاهز أحسن من تطبيق بيتبني في المتصفح.

٢. السيرفر الأول

الرندر الغالي يحصل على السيرفر أو وقت البناء. جهاز الزائر يستلم الناتج.

٣. سريع من غير مجهود

مفيش جافاسكربت للزائر لحد ما تطلبه أنت. مش العكس.

٤. HTML مألوف

ملف .astro هو HTML زائد شوية. لو بتكتب HTML، بتكتب مكوّن Astro.

٥. التعقيد اختياري

تقدر تخلّص موقع بـ HTML و CSS. React أو Vue أو Svelte بتضيفهم لما حتة محتاجة حالة وتفاعل، مش لكل الصفحة.

معمارية الجزر

الصفحة جزيرة كبيرة من HTML ثابت. جوّاها جزر صغيرة: مكوّنات واجهة بتتبعت للمتصفح وتشتغل هناك. كل جزيرة ليها أمر صريح يقول امتى تشتغل. من غير الأمر ده، حتى مكوّن React بيترندر HTML على السيرفر ومش بينزّل جافاسكربت بتاعه.

Astro مش مربوط بإطار واحد. نفس المشروع يقدر يستخدم React و Svelte و Vue و Preact و Solid ومكوّنات الويب، كل واحد في الجزيرة بتاعته.

خلّصت الفصل لما

🧠 اختبر نفسك
١) مكوّن React جوّه صفحة Astro من غير client: بينزّل جافاسكربت؟
لأ. بيترندر HTML على السيرفر، والجافاسكربت بتاعه مش بيطلع للزائر.
٢) Astro SPA ولا MPA افتراضيًا؟
MPA. كل صفحة HTML، والرابط العادي بيعمل تحميل.
٣) ينفع أكتر من إطار واجهة في نفس المشروع؟
أيوه. كل إطار في جزره، والصفحة الأم تفضل Astro.