بناء المكونات ، التفاعلية ، مفهوم الجزر Astro Islands Architecture تعرف على كيفية بناء المكونات في Astro وإضافة التفاعلية باستخدام أفضل تقنيات الواجهات الحديثة، مع شرح عملي لمفهوم جزر Astro (Islands Architecture) الذي يجعل المواقع أسرع وأكثر كفاءة. دليل شامل يوضح كل ما تحتاجه لبدء تطوير مواقع احترافية باستخدام Astro خطوة بخطوة.

أولًا: ما هو المكون (Component) في Astro؟

المكون في Astro يشبه مكونات React وVue وSvelte، لكنه يختلف في نقطة أساسية:

مكون Astro هو HTML ثابت سريع جدًا بدون JS في المتصفح، إلا إذا اخترت أنت إضافة التفاعلية.

يعني:

• صفحاتك خفيفة جدًا
• بدون JavaScript غير ضروري
• بدون hydration كامل مثل React
• بدون تحميل إطار عمل كامل للمتصفح

Astro يعتمد على HTML أولًا، ويضيف JS فقط عند الحاجة.

ثانيًا: كيفية إنشاء مكون بسيط في Astro

مثال:

src/components/Hero.astro

---
const { title, subtitle } = Astro.props;
---

<section class="hero">
  <h1>{title}</h1>
  <p>{subtitle}</p>
</section>

<style>
.hero {
  padding: 4rem;
  background: #222;
  color: white;
}
</style>

الاستخدام:

<Hero title="اهلاً بك" subtitle="تعلم Astro خطوة بخطوة" />

تمامًا مثل React، لكن بدون JS على المتصفح.

ثالثًا: متى تحتاج التفاعلية (Client-Side JS)؟

Astro سريع لأنه:

لا يشحن أي JavaScript إلى المتصفح إلا إذا طلبت ذلك صراحة.

يعني مكوناتك تكون:

• خالية من JS
• تعمل بسرعة صاروخية
• مثالية للمدونات والمواقع التعريفية والوثائق

لكن…
عند الحاجة إلى تفاعلية مثل:

• قائمة منسدلة dropdown
• سلايدر
• أزرار زيادة/نقص
• عربة تسوّق
• بحث فوري
• شات
• خريطة
• charts

هنا تدخل جزر التفاعلية.

رابعًا: ما هي Islands Architecture؟

هي الفكرة العبقرية في Astro:

بدل تحميل التطبيق كاملًا كـ React app، Astro يحدد فقط المكونات التفاعلية ويشحن JavaScript لها وحدها.

الصفحة تصبح:

• HTML ثابت 100%
• مكون تفاعلي واحد أو اثنين فقط عليهما JS

مثل:

--------------------------
|     HTML ثابت          |
|     سريع جدًا          |
|                        |
|   [Island: Counter]    | ← فقط هنا يوجد JS
|                        |
--------------------------

وهكذا تحصل على أسرع أداء ممكن.

خامسًا: كيف نستخدم التفاعلية في Astro؟

Client Directives

لجعل مكون React/Vue/Svelte يعمل على المتصفح، تستعمل توجيهات:

1) client:load

يعمل عند تحميل الصفحة

<Counter client:load />

2) client:idle

يعمل عندما يكون المتصفح في وضع الخمول

<Counter client:idle />

3) client:visible

يعمل عندما يدخل العنصر في الشاشة (lazy hydration)

<Counter client:visible />

4) client:media

تشغيل المكون بناءً على media query

<Counter client:media="(min-width: 800px)" />

5) client:only

لو تريد استعمال إطار عمل بالكامل بدون Astro الخاص بها

<Counter client:only="react" />

سادسًا: مثال عملي لمكون تفاعلي

مكون React داخل Astro:

src/components/Counter.jsx

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

الاستعمال داخل صفحة Astro:

---
import Counter from "../components/Counter.jsx";
---

<Counter client:load />

لاحظ:

• HTML الصفحة 99% ثابت
• فقط مكون Counter عليه JavaScript

سابعًا: لماذا جزر التفاعلية أفضل من Single-Page Apps؟

Astro = الأفضل للمواقع السريعة.

ثامنًا: بناء صفحة تجمع HTML + مكونات تفاعلية

مثال رئيسي لموقع شركة:

---
import Hero from "../components/Hero.astro";
import ContactForm from "../components/ContactForm.jsx";
import StatsChart from "../components/StatsChart.jsx";
---

<Hero title="أهلاً بك" subtitle="موقع سريع باستخدام Astro" />

<section>
  <h2>الإحصائيات</h2>
  <StatsChart client:visible />
</section>

<section>
  <h2>تواصل معنا</h2>
  <ContactForm client:load />
</section>

هذه الصفحة:

• Hero بدون JS
• Section الإحصائيات يصبح تفاعليًا بمجرد ظهوره
• الفورم يصبح تفاعليًا عند تحميل الصفحة

مزيج عبقري.

🔥 تاسعًا: أفضل ممارسات بناء المكونات في Astro

1. اجعل مكونات Astro نفسها بدون JS
2. استخدم React/Vue فقط عند الحاجة
3. استخدم client:visible في العناصر البعيدة
4. استخدم client:idle لتحسين الأداء
5. ضع CSS داخل المكون لأن Astro يدعمه (scoped CSS)
6. اجعل المكونات قصيرة واقرأها بسهولة