Astro 5: فریم‌ورک وب استاتیک مدرن برای نشریات، بلاگ و سایت‌های محتوامحور

اگر سایت شما محتوا است — مقاله، گزارش، دانشنامه، landing page — و نه یک dashboard پر از state و API، احتمالاً به تمام JavaScript یک SPA نیاز ندارید. Astro دقیقاً برای همین ساخته شده: HTML استاتیک سریع + جزیره‌های تعاملی فقط جایی که لازم است.

Astro 5 (منتشر شده در دسامبر ۲۰۲۴) بزرگ‌ترین جهش از Astro 4 است: Content Layer API پایدار، Server Islands، Vite 6، و build سریع‌تر برای سایت‌های content-heavy.

و بله — همین سایتی که الان می‌خوانید (p30light.ir) با Astro 5.4 ساخته شده است. در این مقاله هم Astro 5 را توضیح می‌دهیم، هم stack واقعی P30Light را.

Astro چیست؟

Astro یک framework وب مدرن است که:

در build time HTML استاتیک تولید می‌کند
از هر UI library پشتیبانی می‌کند (React، Vue، Svelte، Solid — یا فقط .astro)
با Islands Architecture فقط بخش‌های تعاملی را hydrate می‌کند
برای SEO، سرعت، و CDN بهینه است

شعار Astro:

Ship less JavaScript.

برای نشریه، بلاگ فنی، docs، و marketing site — معمولاً برنده است.

Astro 5: چه چیز جدید است؟

طبق announcement رسمی Astro 5.0:

ویژگی	توضیح
Content Layer API	loader-based collections — Markdown، API، CMS، هر منبع
Server Islands	`server:defer` — HTML استاتیک + بخش dynamic per-request
Build سریع‌تر	تا ۵× برای Markdown، ۲× برای MDX؛ RAM ۲۵–۵۰٪ کمتر
Vite 6	toolchain به‌روز
Type-safe env	`astro:env` برای متغیرهای محیطی
Simplified prerendering	مدل rendering ساده‌تر

Content Layer — قلب Astro 5

در Astro 4 و قبل‌تر، collectionها در src/content/ با config جدا تعریف می‌شدند. در Astro 5، همه‌چیز از src/content.config.ts با loader مدیریت می‌شود:

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    author: z.string().default('تحریریه'),
    category: z.string(),
    isLead: z.boolean().default(false),
  }),
});

export const collections = { blog };

مزایا:

محتوا از هر منبعی — فایل محلی، Git، headless CMS، API
type-safe با Zod schema
cache در data store — rebuild سریع‌تر
loaderهای community برای Storyblok، Hygraph و …

Server Islands

برای صفحاتی که اکثراً استاتیک هستند ولی یک بخش personalized لازم دارند (مثلاً «سلام، کاربر X»):

---
import PersonalGreeting from '../components/PersonalGreeting.astro';
---
<html>
  <body>
    <h1>مقالات امروز</h1>
    <!-- static HTML از CDN -->
    <PersonalGreeting server:defer />
  </body>
</html>

server:defer آن کامپوننت را در request time render می‌کند؛ بقیهٔ صفحه از cache CDN می‌آید. نیاز به adapter (مثلاً Node) دارد — برای pure static site مثل P30Light استفاده نمی‌کنیم، ولی برای hybrid app عالی است.

Islands Architecture چطور کار می‌کند؟

┌─────────────────────────────────────────┐
│  Page HTML (100% static at build time)  │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐ │
│  │ Header  │  │ Article │  │ Sidebar │ │  ← .astro = zero JS
│  └─────────┘  └─────────┘  └─────────┘ │
│              ┌──────────────┐            │
│              │ Search (React)│           │  ← client:load = island
│              └──────────────┘            │
└─────────────────────────────────────────┘

دستور hydrate	رفتار
(بدون directive)	فقط HTML — بدون JS
`client:load`	hydrate فوری
`client:idle`	بعد از idle browser
`client:visible`	وقتی در viewport دیده شد
`server:defer`	render سمت سرور (Astro 5)

P30Light عمداً بدون React/Vue ساخته شده — فقط .astro + CSS + scriptهای کوچک vanilla (theme toggle، copy link، view counter). نتیجه: تقریباً صفر JS سمت کلاینت.

مقایسه با Next.js و Gatsby

معیار	Astro 5	Next.js (App Router)	Gatsby
هدف اصلی	content sites	full-stack apps	static + GraphQL
JS پیش‌فرض	حداقل	بیشتر (RSC/hydration)	متوسط
یادگیری	ملایم	شیب تند	GraphQL سنگین
Markdown/blog	عالی (built-in)	نیاز به setup	plugins
Deploy	هر static host	Vercel/Node	Netlify/Gatsby Cloud
Multi-framework	✅	عمدتاً React	React

Next.js وقتی برنده است که API routes، auth، dashboard، و state پیچیده دارید.

Astro وقتی برنده است که مقاله، SEO، سرعت Lighthouse، و هزینه hosting پایین اولویت است.

case study: P30Light با Astro 5.4

p30light.ir یک نشریه فنی فارسی است: Edge AI، Linux، امنیت، معماری وب. stack واقعی پروژه:

Dependencies

{
  "astro": "^5.4.0",
  "@astrojs/mdx": "^4.1.0",
  "@astrojs/rss": "^4.0.11",
  "@astrojs/sitemap": "^3.2.1"
}

`astro.config.mjs`

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
import mdx from '@astrojs/mdx';
import { rehypeWrapTables } from './src/plugins/rehype-wrap-tables.mjs';

export default defineConfig({
  site: 'https://p30light.ir',
  integrations: [sitemap(), mdx({ rehypePlugins: [rehypeWrapTables] })],
  output: 'static',
  markdown: {
    shikiConfig: { theme: 'one-dark-pro', wrap: true },
    rehypePlugins: [rehypeWrapTables],
  },
  build: { format: 'directory' },
});

تصمیم‌های معماری:

انتخاب	دلیل
`output: 'static'`	HTML خالص روی nginx — بدون Node runtime
`format: 'directory'`	URL تمیز: `/blog/slug/` به‌جای `/blog/slug.html`
`@astrojs/sitemap`	sitemap خودکار برای Google و AI crawlers
Shiki `one-dark-pro`	syntax highlighting در code blockها
rehype plugin	wrap جداول برای RTL + scroll موبایل

ساختار پروژه

p30light.ir/
├── src/
│   ├── content/
│   │   └── blog/           ← مقالات Markdown
│   ├── content.config.ts   ← Content Layer + Zod schema
│   ├── layouts/
│   │   ├── BaseLayout.astro
│   │   └── BlogPostLayout.astro
│   ├── components/         ← Masthead, Nav, ArticleCard, …
│   ├── pages/
│   │   ├── index.astro
│   │   ├── blog/[...slug].astro
│   │   ├── category/[category].astro
│   │   └── rss.xml.js
│   ├── plugins/
│   │   └── rehype-wrap-tables.mjs
│   └── styles/global.css
├── public/
│   ├── llms.txt            ← راهنما برای AI crawlers
│   └── robots.txt
└── astro.config.mjs

routing مقالات — Astro Content + `render()`

---
import { getCollection, render } from 'astro:content';
import BlogPostLayout from '../../layouts/BlogPostLayout.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---
<BlogPostLayout {...post.data}>
  <Content />
</BlogPostLayout>

هر فایل .md در src/content/blog/ → یک صفحهٔ استاتیک در build. بدون database، بدون CMS — Git is the CMS.

SEO و machine-readable

P30Light روی Astro این‌ها را out-of-the-box یا با کم‌ترین کد دارد:

canonical URL و Open Graph در BaseLayout.astro
Schema.org NewsArticle JSON-LD برای Google
RSS 2.0 در /rss.xml با @astrojs/rss
sitemap-index.xml خودکار
llms.txt برای ChatGPT، Perplexity و AI search
RTL فارسی (dir="rtl") + فونت Vazirmatn

frontmatter مقاله

---
title: "عنوان مقاله"
description: "چکیده SEO"
pubDate: 2026-09-01
author: "نویسنده"
category: "هوش مصنوعی"
heroImage: "https://..."
readTime: "۱۰ دقیقه"
isLead: true
aiInsights:
  - "نکته کلیدی ۱"
  - "نکته کلیدی ۲"
---

Zod در content.config.ts type-safety می‌دهد — اگر pubDate اشتباه باشد، build fail می‌شود نه bug در production.

deploy

npm run build          # → dist/
rsync dist/ server:/path/to/nginx/root/

nginx فقط فایل استاتیک serve می‌کند — بدون Docker اجباری، بدون Node process. هزینه و attack surface کم.

شروع سریع: پروژه Astro 5 جدید

npm create astro@latest my-site
cd my-site
npm run dev

گزینه‌ها:

Empty یا Blog template
TypeScript (توصیه)
Install dependencies

اضافه کردن blog collection

src/content.config.ts با glob loader
src/content/blog/first-post.md
src/pages/blog/[...slug].astro با getStaticPaths
@astrojs/sitemap برای SEO

MDX برای کامپوننت داخل مقاله

---
title: "مقاله با کامپوننت"
---
import Callout from '../../components/Callout.astro';

<Callout>این یک باکس سفارشی است.</Callout>

متن معمولی markdown...

چه زمانی Astro 5 انتخاب کنیم؟

✅ مناسب

بلاگ، نشریه، docs (مثل P30Light)
marketing site + landing pages
portfolio
سایت چندزبانه استاتیک
تیم کوچک — developer experience ساده

⚠️ با احتیاط

SPA کامل با routing client-side سنگین
real-time collaboration
app با auth پیچیده و state global

❌ جای دیگر بهتر

dashboard admin با CRUD زیاد → Next.js / Remix
mobile app → React Native / Flutter

Astro 5 + AI و GEO

سایت‌های content امروز فقط برای Google نیستند — AI crawlers هم مهم‌اند. با Astro static:

llms.txt در public/
structured data (JSON-LD)
RSS و sitemap
HTML semantic تمیز بدون JS blocking

P30Light همهٔ این‌ها را دارد — و چون HTML در build تولید می‌شود، crawler بدون اجرای JavaScript محتوا را می‌بیند.

نکات production از تجربه P30Light

Static first — تا وقتی واقعاً به SSR نیاز ندارید، output: 'static' بمانید.
Content Layer + Zod — schema را سخت بگیرید؛ build = validator.
rehype/remark plugins — جداول RTL، heading anchor، external link rel="noopener".
directory format — URL تمیز برای share و SEO.
Shiki theme — یک theme ثابت برای code blocks.
isLead flag — homepage lead story بدون hardcode.
category pages — getCollection + filter در [category].astro.

آینده: Astro بعد از 5

loaderهای community بیشتر برای CMS
Server Islands matureتر برای hybrid
بهبود مستمر build performance
ecosystem integrations (Vercel، Netlify، Cloudflare Pages)

Astro team روی content-driven web تمرکز دارد — نه رقابت مستقیم با Next به‌عنوان full-stack framework.

جمع‌بندی

Astro 5 بهترین نسخه تا امروز برای ساخت سایت محتوامحور است:

قبل (SPA/SSR سنگین)	با Astro 5
JS bundle بزرگ	HTML سبک + islands
CMS lock-in	Markdown + Content Layer
build کند	تا ۵× سریع‌تر (Markdown)
hosting گران	هر static CDN

p30light.ir خودش مثال زنده است: نشریه فارسی، RTL، RSS، Schema.org، مقالات فنی، deploy روی nginx — همه با Astro 5.4 و چند dependency.

اگر می‌خواهید سایت محتوایی بسازید که سریع، SEO-friendly، و ساده deploy باشد — Astro 5 نقطه شروع درستی است.

قدم بعدی

npm create astro@latest

یک مقاله .md بنویسید، npm run build بزنید، و dist/ را روی هر web server بگذارید.

منابع:

منتشر شده در P30Light — بخش توسعه وب و معماری فرانت‌اند. این مقاله با همان Astro 5 که درباره‌اش می‌نویسد، ساخته شده است.