فریم‌ورک استرو: ساخت وب‌سایت‌های سریع و مدرن

فریم‌ورک استرو (Astro) ابزاری نوین برای وب است که با هدف تحویل سریع‌ترین صفحات ممکن و با کمترین میزان جاوااسکریپت طراحی شده است. از زمان انتشار در سال ۲۰۲۱، این فریم‌ورک به دلیل رویکرد تازه خود توجه گسترده‌ای را جلب کرده است.

استرو چیست؟

استرو یک وب‌فریم‌ورک است که بر تولید سایت‌های محتوامحور تمرکز دارد. فلسفه اصلی آن ساده است: حداقل جاوااسکریپت در حالت پیش‌فرض. به جای ارسال باندل‌های سنگین جاوااسکریپت به مرورگر، استرو صفحات را در زمان بیلد به HTML خالص تبدیل می‌کند.

اصول بنیادین استرو

  • معماری جزیره‌ای (Islands Architecture): تنها بخش‌هایی که تعاملی هستند کد جاوااسکریپت دریافت می‌کنند.
  • صفر جاوااسکریپت در حالت پیش‌فرض: خروجی صفحات به شکل HTML و CSS است مگر آنکه مشخصا کلاینت‌ساید تعریف شوند.
  • مستقل از فریم‌ورک کامپوننت: امکان استفاده هم‌زمان از ری‌اکت، ویو، اسولت و سالید در یک پروژه.
  • طراحی برای محتوا: بهینه‌شده برای بلاگ‌ها، وب‌سایت‌های معرفی و داکیومنتیشن.

قابلیت‌های شاخص

۱. معماری جزیره‌ای (Partial Hydration)

جزایر استرو به شما اجازه می‌دهند کامپوننت‌های تعاملی را در میان دریایی از HTML ایستا قرار دهید. تنها همان جزیره کوچک هیدراته می‌شود:

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

<html>
  <head><title>نمونه جزیره استرو</title></head>
  <body>
    <h1>وب‌سایت من</h1>
    <Counter client:load />
  </body>
</html>

۲. پشتیبانی از چند فریم‌ورک

در یک پروژه واحد می‌توانید از چندین فریم‌ورک بهره ببرید:

  • کامپوننت‌های React برای تعاملات پیچیده
  • کامپوننت‌های Vue برای فرم‌ها
  • کامپوننت‌های Svelte برای بخش‌های سبک و سریع

۳. تولید سایت ایستا (SSG) و هیبرید

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

  • بارگذاری آنی صفحات
  • امتیازهای ایده‌آل در شاخص‌های Core Web Vitals گوگل
  • سئوی عالی و هزینه میزبانی بسیار پایین

۴. مسیریابی بر پایه فایل‌سیستم

ساختار صفحات مشابه فریم‌ورک‌های مدرن است:

src/pages/
  index.astro          → /
  about.astro          → /about
  blog/[slug].astro    → /blog/:slug

۵. بهینه‌سازی توکار تصاویر و دارایی‌ها

بهینه‌سازی خودکار عکس‌ها، مینیمایز کردن CSS و تقسیم کدهای باندل بدون نیاز به تنظیمات پیچیده Webpack.

مقایسه استرو با سایر فریم‌ورک‌ها

ویژگیAstroNext.jsHugo
خروجی پیش‌فرضHTML ایستارندر سمت سرور / کلاینتHTML ایستا
حجم جاوااسکریپتحداقل مطلقبیشتر در حالت پیش‌فرضصفر (بدون JS توکار)
اکوسیستم کامپوننتکامپوننت‌های React/Vue/Svelteفقط ری‌اکتتمپلیت‌های Go
منحنی یادگیریسادهمتوسطنیازمند سینتکس Go

شروع کار با استرو

نصب و راه‌اندازی

npm create astro@latest my-project
cd my-project
npm install
npm run dev

ساخت اولین صفحه در src/pages/hello.astro:

---
const title = "سلام دنیا";
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>به استرو خوش آمدید!</p>
  </body>
</html>

اضافه کردن کامپوننت تعاملی ری‌اکت

فایل src/components/Counter.jsx:

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      شمارنده: {count}
    </button>
  );
}

سپس در صفحه استرو با شناسه client:load از آن استفاده کنید:

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

<Counter client:load />

جمع‌بندی

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

مقالات مرتبط