Nếu bạn đang làm web development và chưa nghe đến Astro — không phải bạn chậm, mà là Astro thực sự mới nổi nhanh đến mức nhiều người còn chưa kịp để ý.
Tôi biết đến Astro khi đang tìm frontend framework để build cái blog này. Ban đầu tôi nghĩ sẽ chọn Next.js — framework phổ biến nhất, nhu cầu tuyển dụng cao nhất, ecosystem lớn nhất. Nhưng sau khi tìm hiểu kỹ, tôi chọn Astro. Bài này giải thích tại sao, và Astro thực sự là gì.
Một chút lịch sử
Astro được tạo ra bởi Fred Schoot vào năm 2021 với một mục tiêu cụ thể: build những website nặng về nội dung theo cách nhanh nhất có thể. Không phải web app phức tạp, không phải dashboard với real-time data — mà là blogs, portfolio, documentation, marketing site.
Astro nhanh chóng leo lên vị trí thứ hai trong JavaScript Rising Stars survey 2023 và được gọi là “framework của mọi framework” — không phải vì nó thay thế React hay Vue, mà vì nó có thể dùng chung với cả hai. Hygraph
Ngày nay, Astro đang được IKEA, NordVPN, Porsche, Cloudflare Docs và StackBlitz Blog tin dùng trong production Medium. Google Firebase Blog và Trivago Tech Blog cũng dùng Astro Contentful — những cái tên này nói lên rất nhiều điều về mức độ production-ready của framework.
Triết lý cốt lõi: Zero JavaScript by default
Đây là điểm khiến Astro khác biệt hoàn toàn so với mọi framework JavaScript khác.
Hầu hết framework hiện đại — Next.js, Nuxt, SvelteKit — đều build theo mô hình SPA (Single Page Application) hoặc hybrid. Nghĩa là khi người dùng load trang, browser phải tải về JavaScript runtime, hydrate components, rồi mới render được nội dung. Ngay cả với những trang hoàn toàn tĩnh, không có interaction gì.
Astro mặc định không ship bất kỳ JavaScript nào xuống client — JavaScript chỉ được dùng trong quá trình build, không phải lúc runtime. Strapi
Kết quả thực tế: một documentation site được rebuild từ Next.js sang Astro giảm từ 1.2 giây xuống 0.7 giây load time, và bundle JavaScript giảm từ 180KB xuống chỉ còn 18KB. BetterLink Blog
Theo Astro, website của họ load nhanh hơn 40% với ít hơn 90% JavaScript so với cùng site được build bằng React framework phổ biến nhất. Astro
Island Architecture — Ý tưởng thông minh nhất của Astro
Triết lý “zero JavaScript” nghe hay, nhưng nếu chỉ có vậy thì Astro không khác gì plain HTML. Điều làm Astro đặc biệt là cách nó giải quyết bài toán interactive components — phần cần JavaScript thực sự.
Astro dùng một kiến trúc gọi là Island Architecture (kiến trúc đảo).
Hình dung trang web như một đại dương. Phần lớn diện tích là nước tĩnh — static HTML, không cần JavaScript. Chỉ có một vài hòn đảo nhỏ cần “sống dậy” — search bar, comment section, shopping cart. Astro render static HTML cho phần lớn trang, trong khi các interactive components được cô lập thành các “islands” độc lập, chỉ load JavaScript cho đúng phần cần thiết. Hygraph
astro
---
// Phần này chạy trên server lúc build — không có JS nào xuống client
const posts = await fetch('https://wp.yourdomain.com/wp-json/wp/v2/posts').then(r => r.json());
---
<html>
<body>
<!-- Static HTML — zero JS -->
<h1>Blog</h1>
{posts.map(post => <article>{post.title.rendered}</article>)}
<!-- Island — chỉ phần này load JS -->
<SearchBar client:load />
</body>
</html>Directive client:load là cách bạn khai báo một island. Astro có nhiều loại directive khác nhau tùy theo nhu cầu:
client:load— load JavaScript ngay khi trang loadclient:visible— load JavaScript khi component scroll vào viewportclient:idle— load JavaScript khi browser rảnh rỗiclient:only— chỉ render ở client, skip server render
Sự tinh tế nằm ở chỗ: bạn có toàn quyền kiểm soát JavaScript nào được ship xuống browser và khi nào.
Framework-agnostic — Dùng React, Vue, Svelte cùng nhau
Một điểm khác biệt độc đáo: Astro hỗ trợ React, Preact, Svelte, Vue, Solid, HTMX, và web components — thậm chí trong cùng một project. Astro
Điều này có nghĩa là gì trong thực tế? Bạn có thể có một component được viết bằng React và một component khác bằng Vue trên cùng một trang, không xung đột nhau vì mỗi island là độc lập hoàn toàn.
Với developer đang học: bạn có thể bắt đầu với Astro component thuần (gần với HTML), rồi dần dần thêm React component khi cần. Không phải commit toàn bộ vào React ngay từ đầu.
Astro so với Next.js — Khi nào dùng cái nào
Câu hỏi này tôi được hỏi nhiều nhất. Không có câu trả lời “cái nào tốt hơn” — chỉ có “cái nào phù hợp hơn với bài toán của bạn”.
Với content-focused sites, Astro nhanh hơn Next.js 2-3 lần trong real-world metrics. Astro đạt Lighthouse score 100 với bundle JavaScript chỉ 0-5KB, trong khi Next.js thường có baseline bundle 85KB vì phải include React runtime. Senorit
Nhưng Next.js không phải là kẻ thua cuộc — nó giải quyết bài toán khác. Next.js đang được Netflix, TikTok, Hulu, Notion, và Nike tin dùng Medium — những platform cần user authentication, real-time data, complex state management. Đó không phải thế mạnh của Astro.
Bảng phân loại thực tế:
| Dùng Astro khi | Dùng Next.js khi |
|---|---|
| Blog, portfolio, documentation | Web app với user login |
| Marketing site, landing page | E-commerce phức tạp |
| Headless CMS frontend | Real-time features |
| Server RAM bị giới hạn | Team đã quen React ecosystem |
| SEO là ưu tiên hàng đầu | Cần ISR (Incremental Static Regeneration) |
Astro 6 — Những điểm đáng chú ý
Astro 6 ra mắt đầu 2026, vào ngày 10 tháng 3, tập trung vào hiệu năng và khả năng mở rộng. Bản này giới thiệu kiến trúc đồng bộ hơn giữa server và client, giúp tối ưu quá trình render trong các dự án lớn. Điểm nổi bật nằm ở việc hợp nhất workflow xây dựng UI, giảm sự phân mảnh giữa các phần tĩnh và phần cần tương tác.
Ngoài ra, Astro 6 cải thiện đáng kể tốc độ dev server, tối ưu hydration và mang đến trải nghiệm ổn định hơn khi làm việc với các thư viện UI hiện đại. Bản cập nhật này cũng đặt nền móng cho những tính năng nâng cao hơn sẽ được mở rộng trong các release tiếp theo.
Tại sao tôi chọn Astro cho blog này
Khi setup blog và portfolio cá nhân trên con server DigitalOcean 2GB RAM, Astro là lựa chọn duy nhất hợp lý với tôi vì một lý do rất thực tế: memory.
Next.js build tốn khoảng 300-500MB RAM tạm thời. Trên server 2GB đang chạy WordPress, MariaDB, Nginx, Postfix — không còn đủ headroom. Astro build nhẹ hơn đáng kể, và quan trọng hơn, không cần Node.js runtime sau khi build xong. Nginx serve file HTML tĩnh trực tiếp.
Thêm vào đó, với background WordPress theme development, syntax của Astro cảm giác rất tự nhiên — component structure gần với HTML thuần hơn so với React. Học curve thấp, output nhanh.
Đó không phải quyết định “Astro tốt hơn Next.js” — mà là quyết định “Astro phù hợp hơn với constraint của tôi”.
Astro có phù hợp với bạn không?
Nếu bạn đang build một trong những thứ sau thì câu trả lời gần như chắc chắn là có:
- Blog cá nhân hoặc technical blog
- Portfolio developer
- Documentation site
- Marketing site hoặc landing page
- Headless CMS frontend (WordPress, Contentful, Strapi…)
Nếu bạn cần user authentication, real-time data, complex client-side state, hoặc đang build web app thực sự — hãy xem xét Next.js hoặc SvelteKit thay thế.
Astro là framework linh hoạt hỗ trợ cả SSG và SSR để build website nhanh, nặng về content — nhưng nếu bạn muốn build ứng dụng web phức tạp với nhiều interactivity, Astro có thể không phải lựa chọn phù hợp. Bejamas
Câu đó thẳng thắn và chính xác. Astro không cố gắng là mọi thứ cho mọi người — và đó chính xác là lý do nó làm tốt những gì nó làm.
Bài tiếp theo trong series này: tôi sẽ kể về quá trình thực tế setup Astro kết hợp với WordPress headless CMS trên server riêng — từ cấu hình REST API, CI/CD pipeline, đến cái webhook trigger tự động rebuild khi publish bài mới. Chờ nhé!
— Cậu bé chăn bò, tháng 4/2026
Bình luận (0)