Astro là gì?

Astro là một web framework để xây các site thiên về nội dung (blog, docs, site marketing, portfolio…). Chính website Obiz Solutions này cũng được xây bằng Astro. Điểm khác biệt lớn nhất của Astro so với các framework SPA (React, Vue, Next.js…) là mặc định không gửi JavaScript nào xuống trình duyệt — trang render sẵn thành HTML tĩnh, tải cực nhanh.

Kiến trúc Islands

Astro dùng mô hình gọi là Islands Architecture: toàn trang là HTML/CSS tĩnh, chỉ những phần thật sự cần tương tác (một widget, một form…) mới được “hydrate” thành component JS — như những hòn đảo nhỏ nổi trên biển HTML tĩnh. Nhờ vậy site vừa có thể dùng React/Vue/Svelte khi cần, vừa không phải trả giá bằng cả một bundle JS khổng lồ cho những trang không cần tương tác gì.

File-based routing

Mỗi file trong src/pages/ tự động trở thành một route:

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

Component `.astro`

Astro có cú pháp component riêng (.astro), gồm 2 phần: một block “frontmatter” chạy lúc build (fetch data, xử lý logic — giống code phía server) và phần template HTML bên dưới:

---
const posts = await getCollection("blog");
---
<ul>
  {posts.map((post) => <li>{post.data.title}</li>)}
</ul>

Content Collections

Đây là phần Astro dùng để quản lý nội dung Markdown/MDX có type-safe qua schema (Zod) — chính là cách site này tổ chức blog, projects, docs (xem src/content/config.ts). Mỗi bài viết là một file Markdown với frontmatter được validate tự động lúc build, tránh lỗi thiếu field hay sai kiểu dữ liệu.

Khi nào nên dùng Astro

Site nội dung là chính: blog, docs, marketing, portfolio
Cần tốc độ tải trang tối đa, ít JS
Vẫn muốn dùng component React/Vue ở vài chỗ cần tương tác

Không phù hợp lắm nếu bạn cần một ứng dụng tương tác nhiều (dashboard, app quản lý…) — lúc đó Next.js/Remix hay SPA thuần sẽ hợp hơn.

Tài liệu tham khảo

Tài liệu chính thức: astro.build/docs