Tại sao Astro?

Khi quyết định xây dựng thinkinh., tôi đã dành khá nhiều thời gian để nghiên cứu các framework khác nhau. Và cuối cùng, Astro đã chiến thắng. Đây là lý do.

1. Zero JavaScript by Default

Astro có một triết lý độc đáo: ship less JavaScript. Mặc định, Astro sẽ render mọi thứ thành HTML tĩnh, chỉ gửi JavaScript khi thực sự cần thiết.

---
// Server-side code chạy ở build time
const posts = await getCollection('blog');
---

<!-- HTML tĩnh, không có JavaScript -->
<ul>
  {posts.map((post) => (
    <li>{post.data.title}</li>
  ))}
</ul>

2. Content Collections

Một trong những tính năng powerful nhất của Astro là Content Collections. Nó cho phép bạn:

• Type-safe content với TypeScript
• Validation tự động với Zod
• Querying dễ dàng

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()),
  }),
});

3. Island Architecture

Astro sử dụng kiến trúc Islands — cho phép bạn hydrate chỉ những component cần interactivity:

<!-- Static HTML -->
<Header />

<!-- Interactive Island -->
<SearchComponent client:load />

<!-- Static HTML -->
<Footer />

4. Framework Agnostic

Bạn có thể sử dụng React, Vue, Svelte, hoặc bất kỳ framework nào trong cùng một project:

---
import ReactCounter from './Counter.jsx';
import VueButton from './Button.vue';
import SvelteCard from './Card.svelte';
---

<ReactCounter client:visible />
<VueButton client:idle />
<SvelteCard />

---

Performance Comparison

Metric	Next.js	Gatsby	Astro
First Load JS	~80KB	~90KB	~0KB
Build Time (100 pages)	45s	60s	15s
Lighthouse Score	85-95	80-90	95-100

Kết luận

Astro không phải là silver bullet cho mọi project. Nhưng nếu bạn đang xây dựng:

• Blog
• Documentation site
• Marketing website
• Portfolio

…thì Astro xứng đáng là lựa chọn hàng đầu.

---

Bạn đang dùng framework nào cho blog của mình? Let me know! 🚀