🏷️ ⭐ مميز

Astro HTML

إطار ويب لبناء مواقع محتوى سريعة (Content-focused Web Framework)

★ ★ ★ ★ ★ (4/5)

👁️ 4 مشاهدة

📅 09 Jul 2026

⚛️ React 💚 Vue.js 🅰️ Angular 🧡 Svelte 🌐 عام

مستوى الخبرة المطلوب:

🌱 مبتدئ ⚡ متوسط 🚀 محترف 🏢 مؤسسي

🔗 زيارة الموقع الرسمي

★ ★ ★ ★ ★

تقييم المستخدمين

التصنيف 🏷️ HTML

المشاهدات 4

تاريخ الإضافة 09/07/2026

آخر تحديث 09/07/2026

📋 محتويات الصفحة

📖 الوصف 🎯 يستخدم في ✨ المميزات ⚠️ العيوب 🔄 البدائل 💻 مثال

📖 الوصف

Astro هو إطار ويب حديث مصمم لبناء مواقع سريعة تركز على المحتوى (مدونات، توثيق، مواقع تسويق). يميزه نهج "Islands Architecture" - يرسل HTML ثابت للصفحة ويحمل فقط JavaScript المطلوب للمكونات التفاعلية. يدعم Astro أي إطار عمل (React, Vue, Svelte, etc.) معاً في نفس المشروع، لكنه يُرسل Zero JS افتراضياً ...

🎯 يستخدم في

مجالات استخدام هذه الأداة

•

بناء مدونات ومواقع محتوى

•

مواقع توثيق تقني

•

مواقع تسويقية (Marketing Sites)

•

مواقع Portfolio

•

متاجر إلكترونية خفيفة

•

أي موقع يحتاج أداء عالي وسرعة تحميل

✨ المميزات

أبرز مميزات هذه الأداة

✓

Zero JS افتراضياً - صفحات بدون JavaScript

✓

Islands Architecture - المكونات التفاعلية فقط

✓

يدعم كل إطار: React

✓

Vue

✓

Svelte

✓

Solid

✓

etc.

✓

Content Collections - إدارة محتوى Markdown/MDX

✓

SSR وSSG معاً - Static + Server rendering

✓

View Transitions مدمجة - انتقالات سلسة بين الصفحات

✓

Image Optimization تلقائي

✓

Tailwind CSS مدمج بسهولة

✓

أداء استثنائي (100/100 Lighthouse بسهولة)

✓

Deploy سهل على Vercel

✓

Netlify

✓

Cloudflare

⚠️ العيوب

نقاط يجب مراعاتها

مصمم للمحتوى - ليس للـSPA المعقدة

بعض المكتبات لا تعمل مع SSR

جديد نسبياً -生态 أصغر من Next.js

قد يكون معقداً للمشاريع التفاعلية جداً

View Transitions لا تعمل في كل المتصفحات

🔄 البدائل

أدوات بديلة يمكنك استخدامها

Next.js

Nuxt

11ty

Hugo

💻 مثال على الاستخدام

كيفية استخدام هذه الأداة

Example Code

---
// src/pages/index.astro - Page Component
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.jsx'; // React component!
import RecentPost from '../components/RecentPost.vue'; // Vue!

// Content Collections
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
---

<Layout title="الرئيسية">
  <main>
    <section class="hero">
      <h1>مرحباً بالعالم</h1>
      <p>موقع مبني بـAstro - Zero JavaScript!</p>
    </section>

    <!-- مكونات React داخل HTML -->
    <section class="cards">
      <h2>خدماتنا</h2>
      <div class="grid">
        <Card title="تصميم" icon="palette" client:load />
        <Card title="تطوير" icon="code" client:visible />
        <Card title="استشارات" icon="lightbulb" />
      </div>
    </section>

    <!-- مكونات Vue -->
    <RecentPost posts={posts.slice(0, 5)} client:idle />

    <!-- Markdown/MDX Content -->
    <section class="about">
      <Content />
    </section>
  </main>
</Layout>