مقدمة إلى Astro

Astro هو إطار عمل (Framework) حديث ومفتوح المصدر لبناء مواقع ويب ثابتة (Static Sites) وتطبيقات خفيفة الوزن. يتميز Astro بقدرته على توليد صفحات HTML عند وقت البناء (Build Time)، وشحن صفر جافاسكريبت إلى المتصفح افتراضيًا. يعتمد Astro على معمارية الجزر (Islands Architecture)، والتي تسمح لك بإنشاء “جزر” من المكونات التفاعلية داخل صفحات HTML الثابتة. هذا يعني أنك تحصل على أداء المواقع الثابتة مع القدرة على إضافة تفاعلية فقط عند الحاجة إليها.

المزايا والعيوب

أهم مميزات Astro

• توليد ثابت (Static Generation): يبني صفحات HTML مسبقاً ويقلل من تحميل الجافاسكريبت في المتصفح، مما يضمن أداءً فائقًا.
• دعم متعدد الأطر (Framework Agnostic): يمكنك استخدام مكونات من أطر عمل مختلفة مثل React، Vue، Svelte، و SolidJS في نفس المشروع.
• تحسين أداء تلقائي (Partial Hydration): يقوم بتحميل الجافاسكريبت فقط للمكونات التفاعلية التي تحتاجها (الجزر)، مما يقلل من حجم الصفحة.
• كتابة المحتوى بـ Markdown/MDX: إمكانية كتابة المحتوى بسهولة مع تضمين مكونات تفاعلية مباشرة في الملف.
• نظام ملفات بسيط (File-based Routing): يتم إنشاء الصفحات تلقائيًا عبر تنظيم الملفات والمجلدات بدون إعدادات معقدة.
• دعم TypeScript و JSX/TSX: يسهّل كتابة كود منظم وآمن.

هيكلية مشروع Astro

• src/pages/ كل ملف داخل هذه المجلد يصبح صفحة في الموقع.

• src/components/ تخزن المكونات القابلة لإعادة الاستخدام.

• astro.config.mjs ملف إعدادات المشروع.

• public/ يحتوي على الأصول الثابتة مثل الصور والخطوط.

متى تستخدم Astro؟

• عند الحاجة إلى مواقع مدونات أو وثائق (Docs) سريعة.

• بناء صفحات Landing Pages خفيفة الأداء.

• دمج مكونات من أطر عمل مختلفة ضمن مشروع واحد.

التثبيت

💻 مثال لجلب بيانات

    
---
// src/pages/users.astro
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
---
<h1>قائمة المستخدمين</h1>
<ul>
{users.map(user => (
  <li>{user.name}</li>
))}
</ul>

  

🔗 روابط مفيدة

• الموقع الرسمي لـ Astro
• دليل البداية السريعة