معرفی Astro: فریمورک مدرن وب

Astro یک فریمورک وب مدرن است که بر سرعت و کارایی تمرکز دارد. در این مقاله با ویژگی‌ها و مزایای Astro آشنا می‌شویم.

Astro چیست؟

Astro یک فریمورک استاتیک است که به شما اجازه می‌دهد وبسایت‌های سریع و بهینه بسازید. از معماری Islands برای بارگذاری بهینه JavaScript استفاده می‌کند.

مزایای کلیدی:

• سرعت بالا: فقط JavaScript ضروری را بارگذاری می‌کند
• SEO-friendly: محتوا در سمت سرور رندر می‌شود
• انعطاف‌پذیری: از React، Vue، Svelte و … پشتیبانی می‌کند
• بهینه‌سازی خودکار: تصاویر و CSS به طور خودکار بهینه می‌شوند

شروع سریع

# ایجاد پروژه جدید
npm create astro@latest

# نصب وابستگی‌ها
npm install

# اجرای سرور توسعه
npm run dev

معماری Islands

یکی از قابلیت‌های منحصر به فرد Astro، معماری Islands است. هر کامپوننت تعاملی به صورت مستقل بارگذاری می‌شود.

---
import InteractiveComponent from './Interactive.jsx';
---

<div>
  <!-- محتوای استاتیک -->
  <h1>سلام دنیا</h1>
  
  <!-- جزیره تعاملی -->
  <InteractiveComponent client:load />
</div>

چه زمانی از Astro استفاده کنیم؟

Astro برای پروژه‌های زیر ایده‌آل است:

• وبلاگ‌ها و سایت‌های محتوایی
• پورتفولیوها
• سایت‌های شرکتی
• مستندات

کامپوننت‌ها در Astro

کامپوننت‌های Astro با پسوند .astro تعریف می‌شوند و شامل دو بخش اصلی هستند:

---
// Component Script (JavaScript/TypeScript)
const title = "عنوان";
const items = ["آیتم 1", "آیتم 2", "آیتم 3"];
---

<!-- Component Template (HTML) -->
<div class="container">
  <h1>{title}</h1>
  <ul>
    {items.map(item => <li>{item}</li>)}
  </ul>
</div>

<style>
  .container {
    padding: 2rem;
  }
</style>

استفاده از فریمورک‌های UI

Astro به شما اجازه می‌دهد از هر فریمورک UI که دوست دارید استفاده کنید:

نصب React:

npx astro add react

استفاده از کامپوننت React:

---
import Counter from './Counter.jsx';
---

<Counter client:load />

استراتژی‌های بارگذاری:

• client:load - بارگذاری فوری
• client:idle - بارگذاری هنگام بیکاری
• client:visible - بارگذاری هنگام دیده شدن
• client:media - بارگذاری بر اساس media query
• client:only - فقط در کلاینت رندر شود

مسیریابی (Routing)

Astro از سیستم مسیریابی بر اساس فایل استفاده می‌کند:

src/pages/
├── index.astro       → /
├── about.astro       → /about
├── blog/
│   ├── index.astro   → /blog
│   └── [slug].astro  → /blog/:slug
└── [...path].astro   → catch-all route

مسیرهای داینامیک:

---
// src/pages/blog/[slug].astro
export async function getStaticPaths() {
  return [
    { params: { slug: 'post-1' } },
    { params: { slug: 'post-2' } },
  ];
}

const { slug } = Astro.params;
---

<h1>پست: {slug}</h1>

کار با داده‌ها

دریافت داده از API:

---
const response = await fetch('https://api.example.com/data');
const data = await response.json();
---

<div>
  {data.map(item => (
    <div>{item.title}</div>
  ))}
</div>

استفاده از Content Collections:

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
  }),
});

export const collections = {
  blog: blogCollection,
};

---
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
---

{posts.map(post => (
  <article>
    <h2>{post.data.title}</h2>
  </article>
))}

بهینه‌سازی تصاویر

Astro تصاویر را به طور خودکار بهینه می‌کند:

---
import { Image } from 'astro:assets';
import myImage from '../images/photo.jpg';
---

<Image 
  src={myImage} 
  alt="توضیح تصویر"
  width={800}
  height={600}
/>

استایل‌دهی

Scoped Styles:

<style>
  h1 {
    color: blue;
  }
</style>

استفاده از Sass:

npm install sass

<style lang="scss">
  .container {
    h1 {
      color: $primary-color;
    }
  }
</style>

CSS Modules:

---
import styles from './styles.module.css';
---

<div class={styles.container}>
  <h1 class={styles.title}>عنوان</h1>
</div>

دیپلوی و Build

ساخت پروژه:

npm run build

پیش‌نمایش:

npm run preview

دیپلوی روی پلتفرم‌های مختلف:

Vercel:

npm install -g vercel
vercel

Netlify:

npm install -g netlify-cli
netlify deploy

Cloudflare Pages:

• Build command: npm run build
• Output directory: dist

نکات بهینه‌سازی

1. Partial Hydration: فقط کامپوننت‌های تعاملی را هیدرات کنید
2. Image Optimization: از کامپوننت Image استفاده کنید
3. Code Splitting: Astro به طور خودکار کد را تقسیم می‌کند
4. CSS Inlining: CSS کوچک به صورت inline قرار می‌گیرد
5. Prefetching: لینک‌ها را پیش‌بارگذاری کنید

منابع یادگیری

• مستندات رسمی: docs.astro.build
• Astro Discord: کامیونیتی فعال و پاسخگو
• Astro Blog: مقالات و آموزش‌های رسمی
• GitHub Examples: نمونه‌های پروژه واقعی

نتیجه‌گیری

Astro انتخابی عالی برای ساخت وبسایت‌های سریع و مدرن است. با معماری منحصر به فرد Islands، پشتیبانی از فریمورک‌های مختلف و بهینه‌سازی‌های خودکار، می‌توانید وبسایت‌هایی با عملکرد بالا و تجربه کاربری عالی بسازید.

اگر به دنبال فریمورکی هستید که سرعت را در اولویت قرار دهد و در عین حال انعطاف‌پذیری کافی برای استفاده از ابزارهای مورد علاقه‌تان را داشته باشد، حتماً Astro را امتحان کنید.