إطار Astro (astro.build) هو إطار عمل مفتوح المصدر لبناء مواقع الويب، يولّد صفحات HTML جاهزة مسبقًا ولا يرسل جافاسكريبت إلى متصفح الزائر إلا في الأجزاء التي تحتاجها فعلًا. هذا يجعله مناسبًا للمواقع كثيفة المحتوى — مواقع الشركات، المدوّنات، صفحات الخدمات والوجهات — أكثر من التطبيقات التفاعلية خلف تسجيل الدخول. في Zerak نبني مواقع عملائنا في الخليج ومصر على Astro، وهذا المقال يشرح الأسباب، ويشرح أيضًا الحالات التي لا يصلح فيها.
ما هو Astro (استرو)؟ وتوضيح سريع لمن وصل هنا بالخطأ
Astro إطار عمل للويب يكتب فيه المطوّر صفحاته بمكوّنات، فيخرج الناتج صفحات HTML وCSS جاهزة، ويُضاف جافاسكريبت فقط حيث يوجد تفاعل حقيقي.
قبل المتابعة: كلمة "استرو" بالعربية تُستخدم أيضًا لسمّاعات ASTRO للألعاب، ولعبة Astro Bot، ولأسماء تجارية وفندقية متفرقة. هذا المقال عن إطار تطوير المواقع Astro فقط، ومرجعه الرسمي astro.build.
Astro مشروع مفتوح المصدر تحت رخصة MIT، تقوده Astro Technology Company ومجتمع واسع من المساهمين، وصدر إصداره المستقر الأول في 2022 (وثائق Astro الرسمية، astro.build). كونه تحت رخصة MIT يعني عمليًا أنه مجاني، وأن الكود الناتج ملك لمن بناه، بلا رسوم ترخيص ولا ارتباط بمزوّد واحد.
كيف يعمل Astro: فكرة "الجزر" بلغة مفهومة
Astro يبني الصفحة مرة واحدة وقت النشر، ثم يسلّمها كما هي لكل زائر — بدل أن يعيد الخادم تركيبها من قاعدة بيانات عند كل زيارة.
التوليد المسبق للصفحات بدل بنائها عند كل زيارة
في موقع ووردبريس التقليدي، كل زيارة لصفحة "خدماتنا" تعني: طلب يصل إلى الخادم، PHP يعمل، استعلامات إلى قاعدة بيانات MySQL، القالب يُركَّب، ثم تُرسل الصفحة. وصفحة "خدماتنا" لم تتغير منذ ثلاثة أشهر.
في Astro، هذه الصفحة تُولَّد ملف HTML واحد وقت البناء (Static Site Generation)، ويُوزَّع من شبكة توصيل محتوى. الأثر العملي ثلاثي: وقت استجابة الخادم يكاد يختفي، الاستضافة أرخص لأن لا قاعدة بيانات ولا PHP يعملان، والموقع لا ينهار تحت موجة زيارات مفاجئة لأنه لا يحسب شيئًا.
جزر المكوّنات (Islands): تفاعل في أجزاء محددة فقط
"جزر المكوّنات" (Astro Islands) تعني أن الصفحة في أصلها HTML ساكن، وداخلها جزر محدودة تعمل بجافاسكريبت.
خذ صفحة رحلة سياحية: العنوان، الوصف، الصور، البرنامج اليومي، قائمة التنقل، تذييل الصفحة — كل هذا نص وصور لا يحتاج سطر جافاسكريبت واحد. أما نموذج الحجز بتقويم التواريخ، أو سلة المشتريات، أو فلتر البحث، فيحتاج. Astro يرسل كود الجزيرة وحدها، ويترك بقية الصفحة نظيفة. النتيجة أن حجم جافاسكريبت المُحمَّل على الجوال يصبح جزءًا صغيرًا مما تحمّله صفحة مبنية بالكامل على إطار تطبيقات.
ماذا يعني "صفر جافاسكريبت افتراضيًا" عمليًا
يعني أن المكوّن لا يُرسل معه أي جافاسكريبت إلى المتصفح ما لم يطلب المطوّر ذلك صراحةً. الوضع الافتراضي هو الصفحة الخفيفة، والثقل خيار واعٍ لا نتيجة إهمال — وهذا عكس المعتاد، حيث يتراكم الجافاسكريبت بإضافة بعد إضافة حتى لا يعرف أحد ما الذي يحمّله الموقع.
ميزة أخرى عملية: Astro لا يفرض مكتبة واجهة واحدة. يمكن استخدام React أو Vue أو Svelte أو Preact داخل المشروع نفسه، أو الاستغناء عنها جميعًا. بالنسبة لصاحب الموقع هذا يعني أنه غير محبوس مع تقنية واحدة إن تغيّر الفريق بعد سنتين.
لماذا يهم هذا في السوق الخليجي والمصري: أرقام حقيقية
لأن غالبية مواقع الشركات في المنطقة بطيئة على الجوال بفارق كبير عن حدّ جوجل، وهذه ليست انطباعًا بل قياسًا.
في سبتمبر 2026 نشرنا في Zerak بحث حالة مواقع الشركات في الخليج 2026: أخذنا 2,399 نشاطًا تجاريًا من خرائط جوجل في دبي وأبوظبي والرياض وجدة والدوحة ومدينة الكويت، عبر عشرة قطاعات يومية، وفحصنا كل موقع مُدرج — 1,232 موقعًا فريدًا.
على عيّنة عشوائية من 384 موقعًا عاملًا، قِسنا الأداء بأداة Google PageSpeed Insights، وكانت النتائج:
| المقياس | النتيجة |
|---|---|
| وسيط درجة الأداء على الجوال | 60 من 100 |
| مواقع تحت 50 | 22% |
| مواقع تبلغ 90 فأكثر | 8% |
| وسيط زمن ظهور المحتوى الرئيسي (LCP) | 6.1 ثانية |
| مواقع تتجاوز 4 ثوانٍ | 68% |
| مواقع تحت حدّ 2.5 ثانية "الجيد" | 13% |
المصدر: بحث Zerak، State of Gulf Business Websites 2026، سبتمبر 2026. ومقياس LCP (Largest Contentful Paint) هو أحد مؤشرات Core Web Vitals، وحدّ "جيد" عنده 2.5 ثانية بحسب توثيق جوجل على web.dev.
من البحث نفسه: ووردبريس يشغّل 42% من هذه المواقع، و51% من المواقع العاملة بلا نسخة عربية إطلاقًا (ترتفع إلى 70% في دبي، وتنخفض إلى 26% في الرياض).
وهنا تلزم الأمانة: البطء ليس ذنب ووردبريس. موقع ووردبريس مضبوط جيدًا، على استضافة محترمة، بقالب خفيف وصور محسّنة، يمكن أن يكون سريعًا. ما يُبطئ المواقع فعليًا هو تراكم الإضافات، القوالب التي تحمّل كل شيء احتياطًا، الاستضافة المشتركة الرخيصة، والصور المرفوعة بمقاسها الأصلي. لكن بنية تولّد HTML مسبقًا تحذف فئة كاملة من هذه الأسباب من الجذر: لا قاعدة بيانات تُستعلم وقت الزيارة، ولا إضافات تضيف سكربتات دون علمك.
Astro وموقع عربي/إنجليزي: الجزء الذي لا يكتب عنه أحد
موقع الشركة في الخليج ومصر يحتاج لغتين بجودة متساوية، لا نسخة إنجليزية وترجمة ملصقة فوقها — وهذا بالضبط ما يُبنى جيدًا على Astro لأن كل صفحة تُولَّد مسبقًا وتعرف نظيرتها في اللغة الأخرى.
شجرتان /ar و/en وعلامات hreflang
نبني شجرتي مسارات منفصلتين (`src/pages/ar/` و`src/pages/en/`) وملفات محتوى منفصلة لكل لغة، لا حقول ترجمة داخل نفس السجل. كل صفحة عربية لها نظيرتها الإنجليزية بمعرّف مشترك، فيُولَّد وسم hreflang تلقائيًا في الاتجاهين:
```html <link rel="alternate" hreflang="ar" href="https://example.com/ar/services" /> <link rel="alternate" hreflang="en" href="https://example.com/en/services" /> ```
الخطأ الشائع الذي نراه كثيرًا: نسختان منشورتان بلا ربط بينهما، فتتنافسان على الاستعلامات نفسها ويختار جوجل إحداهما ويتجاهل الأخرى. مع التوليد المسبق تُحلّ المشكلة بنيويًا لأن الروابط تُنتَج من نفس مصدر البيانات وقت البناء، لا يدويًا صفحةً صفحة. تفاصيل تفسير جوجل لـ hreflang منشورة في توثيق Google Search Central، وهي المرجع الذي ينبغي الرجوع إليه عند أي تغيير.
RTL والخطوط العربية
الاتجاه يُضبط على مستوى الصفحة لا على عناصر متفرقة:
```html <html lang="ar" dir="rtl"> ```
ثم — وهذه النقطة التي تُهمَل — تُكتب الأنماط بخصائص CSS المنطقية: `margin-inline-start` بدل `margin-left`، و`padding-inline-end` بدل `padding-right`، و`inset-inline-start` بدل `left`. بهذه الطريقة تنقلب الواجهة كاملة باتجاه الصفحة، ولا نضطر لصيانة ملفَّي أنماط أو "ملف إصلاحات RTL" يكبر مع كل صفحة جديدة.
الخطوط مسألة أداء لا ذوق فقط: ملفات الخطوط العربية أثقل من اللاتينية لأن عدد المحارف والأشكال المتصلة أكبر. لذلك نحدّ عدد الأوزان المحمّلة (وزنان غالبًا: عادي وعريض)، ونحمّل الخط بصيغة woff2 مع `font-display: swap` حتى لا يبقى النص غير مرئي أثناء التحميل. خط عربي بأربعة أوزان يمكن وحده أن يأكل ثانية من زمن LCP على اتصال جوّال متوسط.
المحتوى المزدوج بلا تكرار يربك جوجل
النسخة العربية ليست ترجمة حرفية للإنجليزية. العميل في الرياض يبحث بصيغة مختلفة عن العميل نفسه بالإنجليزية، والعناوين والأسئلة ينبغي أن تُكتب عربيًا من الأصل. على مستوى البنية: صفحة واحدة قانونية (canonical) لكل لغة، وربط hreflang متبادل، وخريطة موقع تتضمن النسختين. بهذا لا يرى جوجل محتوى مكررًا، بل نسختين موجّهتين لجمهورين.
Astro مقابل ووردبريس لموقع شركة
لا يوجد فائز مطلق: Astro يتفوّق على الأداء والأمان والاستقرار، وووردبريس يتفوّق على مرونة التحرير الذاتي واتساع الإضافات وسهولة إيجاد من يصونه.
| المعيار | Astro | ووردبريس |
|---|---|---|
| سرعة الصفحة | HTML مُولَّد مسبقًا، جافاسكريبت في الجزر فقط — نقطة الانطلاق سريعة افتراضيًا | يمكن أن يكون سريعًا مع ضبط جيد، لكن الأداء يتدهور مع تراكم الإضافات والقوالب الثقيلة |
| الأمان والتحديثات | لا قاعدة بيانات ولا PHP وقت التشغيل؛ سطح الهجوم أصغر بكثير | نظام ناضج لكنه هدف شائع؛ يحتاج تحديثات منتظمة للنواة والقوالب والإضافات |
| تعديل المحتوى بلا مطوّر | يحتاج نظام إدارة محتوى منفصلًا أو لوحة تحكم تُبنى مع الموقع | الأقوى هنا: محرر ناضج، صلاحيات مستخدمين، مراجعات، تحرير مباشر للصفحات |
| التكلفة الشهرية | استضافة ملفات ساكنة منخفضة التكلفة وقابلة للتوسّع | استضافة تعمل بـ PHP وقاعدة بيانات، وقد تُضاف رسوم إضافات وقوالب مدفوعة |
| الإضافات الجاهزة | نظام تكاملات أصغر؛ الوظائف غير القياسية تُبنى | الأوسع بفارق كبير — إضافة جاهزة لكل حاجة تقريبًا |
| المتاجر والوظائف الديناميكية | ممكن عبر التصيير عند الطلب (SSR) أو محرك متاجر منفصل | حلول متاجر وعضويات وحجوزات جاهزة ومستعملة على نطاق واسع |
نقطة الأمان ليست نظرية. كتبنا تفصيلًا عن حالة فتحنا فيها موقع عميل فوجدنا 1,370 منشور سبام — موقع ووردبريس تُرك بلا تحديثات ولا متابعة. الحادثة واقعة بعينها ولا نعمّمها على ووردبريس ككل؛ الدرس فيها عن الإهمال لا عن المنصة، لكنها تبيّن أن موقعًا بلا قاعدة بيانات ولا لوحة دخول عامة لا يمكن أن يُصاب بهذا النوع من الاختراق أصلًا.
العيب الحقيقي لـ Astro يجب أن يُقال بوضوح: الموقع المبني عليه لا يأتي بمحرر محتوى جاهز. إما أن يُربط بنظام إدارة محتوى منفصل، أو تُبنى له لوحة تحكم. في خطة Zerak الشهرية، كل عميل يحصل على لوحة يعدّل بها نصوص الموقع وصوره بنفسه، إضافة إلى التعديلات الشهرية الصغيرة التي ننفذها له؛ التفاصيل في صفحة الأسعار.
أما كلفة بناء موقع شركة في الإمارات أو السعودية عمومًا فهي متفاوتة جدًا، وما يرفعها هو عدد الصفحات، وجود لغتين كاملتين، الربط بأنظمة خارجية (حجز، مخزون، محاسبة)، ووجود متجر. هذه هي البنود التي ينبغي أن تسأل عنها في أي عرض سعر.
متى لا يناسبك Astro
Astro ليس الخيار الصحيح في أربع حالات واضحة على الأقل:
- موقع يعتمد على إضافات ووردبريس بعينها. إن كان عملك قائمًا على نظام عضويات أو منصة حجوزات جاهزة لها إضافة ناضجة في ووردبريس، فإعادة بنائها من الصفر إنفاق بلا عائد.
- فريق داخلي يعرف ووردبريس فقط ويريد استقلالًا كاملًا. إذا كان في الشركة من ينشر ويعدّل يوميًا بلا مطوّر، وتدريبه على سير عمل جديد غير وارد، فالأداة التي يتقنها أفضل من الأداة الأسرع.
- تطبيق ويب تفاعلي بالكامل خلف تسجيل دخول. لوحة تحكم، نظام حجز داخلي، منصة اشتراكات — هذه يناسبها إطار تطبيقات، لا إطار محتوى. هنا نبني أنظمة أعمال بأدوات مختلفة؛ انظر خدماتنا.
- كتالوج ضخم بآلاف المنتجات التي تتغيّر أسعارها ومخزونها لحظيًا. إعادة بناء كل صفحة عند كل تغيير غير عملية بالتوليد الساكن وحده.
مع ذلك، لا يصح تقديم Astro كأداة لمواقع ساكنة فقط: فهو يدعم التصيير عند الطلب (Server-Side Rendering) للصفحات التي تحتاج بيانات لحظية، فيمكن مزج صفحات مُولَّدة مسبقًا مع صفحات تُبنى عند الطلب داخل المشروع نفسه (وثائق Astro، astro.build). القرار يكون لكل صفحة لا للموقع كله.
كيف تبدأ: تجربة Astro بنفسك أو تسليم المهمة
إن كنت مطوّرًا، ثلاث خطوات تكفي للتجربة: ثبّت إصدار Node.js المدعوم كما هو محدّد في وثائق Astro، شغّل أمر إنشاء المشروع `npm create astro@latest`، ثم انشر مجلد الإخراج على أي استضافة ملفات ساكنة. راجع astro.build للمتطلبات الدقيقة ولخيارات النشر، فهي تتغيّر مع الإصدارات.
وإن كنت صاحب نشاط، فاسم الإطار ليس ما يهمك. ما يهمك ثلاث نتائج قابلة للقياس: صفحة تظهر محتواها الرئيسي في أقل من 2.5 ثانية على الجوال، نسخة عربية مكتوبة من الأصل لا ترجمة ملصقة، ونطاق ومحتوى مسجّلان باسمك من اليوم الأول. اسأل عن هذه الثلاثة في أي عرض، أيًا كانت التقنية المقترحة.
Zerak يعمل عن بُعد مع شركات في دبي والرياض والقاهرة والدوحة ومدينة الكويت، ويبني مواقعها ومتاجرها وأنظمتها ويتولّى تشغيلها وظهورها في البحث — Built. Kept. Found. يمكنك رؤية موقع Golden Gulf كمثال، أو قراءة كيف نبني موقعك خطوة بخطوة.
ابدأ بفحص مجاني لموقعك على seo.zerak.io، أو تواصل عبر صفحة التواصل أو واتساب أو البريد hello@zerak.io.
الأسئلة الشائعة
ما الفرق بين Astro و Next.js؟
Next.js إطار تطبيقات مبني على React، مصمّم للواجهات التفاعلية والتطبيقات التي تعتمد حالة المستخدم. Astro إطار موجّه للمحتوى، يرسل HTML ساكنًا ولا يحمّل جافاسكريبت إلا في الجزر. لا أحدهما "أفضل" مطلقًا: اختر Next.js لتطبيق خلف تسجيل دخول، وAstro لموقع شركة أو مدوّنة أو كتالوج محتوى.
هل Astro مجاني؟
نعم. Astro مشروع مفتوح المصدر تحت رخصة MIT، بلا رسوم ترخيص ولا نسخة مدفوعة من الإطار نفسه. التكلفة التي تدفعها هي تكلفة البناء والاستضافة والصيانة، وهي قائمة مع أي تقنية. الكود الناتج ملكك، ويمكن نقله إلى أي استضافة ملفات ساكنة أو مزوّد آخر.
هل يدعم Astro اللغة العربية و RTL؟
نعم. Astro يولّد HTML قياسيًا، فدعم العربية يتم بضبط `lang="ar"` و`dir="rtl"` على مستوى الصفحة وكتابة الأنماط بخصائص CSS المنطقية مثل `margin-inline-start`. كما يدعم توجيه مسارات متعدد اللغات، فتُبنى شجرتا /ar و/en بوسوم hreflang متبادلة تُولَّد تلقائيًا وقت البناء.
هل Astro مناسب لمتجر إلكتروني؟
يصلح لواجهة المتجر وصفحات المنتجات، خاصة مع التصيير عند الطلب للأسعار والمخزون. لكن المتجر يحتاج أيضًا سلة وطلبات ومدفوعات ومخزون، وهذه أنظمة قائمة بذاتها. في Zerak نبني المتاجر على محرك المتاجر الخاص بنا بدل تجميعها قطعًا؛ التفاصيل في صفحة إنشاء متجر إلكتروني.
هل يؤثر Astro على ترتيب الموقع في جوجل؟
جوجل لا يرتّب المواقع حسب إطار العمل المستخدم، ولا يعرف أصلًا ما بُني به الموقع. لكنه يقيس Core Web Vitals وسرعة الجوال وسهولة الزحف وبنية الروابط البديلة بين اللغات — وهنا يأتي الأثر غير المباشر، لأن البنية المُولَّدة مسبقًا تجعل بلوغ هذه المعايير أسهل.
بقلم: Ed Kamel، مؤسس Zerak و Wieldy. يبني مواقع الشركات على Astro بالعربية والإنجليزية لعملاء في الخليج ومصر، ونشر بحث State of Gulf Business Websites 2026 بعد فحص 1,232 موقعًا خليجيًا.