· astro / eleventy / ssg

Astro vs Eleventy — xây dựng content site năm 2026

Astro phù hợp cho team TypeScript cần CMS hoặc island tương tác. Eleventy thắng khi tốc độ build, output không JS, hoặc tự do cấu hình là yêu cầu cứng.

Bởi Ethan

2.012 từ · 11 phút đọc

Chọn Astro nếu team bạn viết TypeScript, cần tích hợp CMS, hoặc muốn có interactive islands trên các trang tĩnh. Chọn Eleventy nếu tốc độ build ở quy mô lớn là ràng buộc cứng, bạn cần output không có JS, hoặc muốn một mô hình cấu hình tự do hoàn toàn — không ràng buộc với bất kỳ framework nào. Các phần dưới đây giúp bạn xác định liệu những điểm khác biệt đó có thực sự quan trọng với dự án của mình không.

Bài này dành cho ai

Dành cho các lập trình viên quen viết TypeScript đang chọn static site generator cho một site nặng về nội dung vào năm 2026. Nếu câu hỏi chính là throughput khi build từ 10.000 trang trở lên, đó là chủ đề của bài Astro vs Hugo — con số tốc độ thuần túy của Hugo giúp đặt cả hai công cụ vào đúng góc nhìn. Nếu bạn cân nhắc Astro so với một full-stack framework như Next.js, xem Next.js vs Astro để nắm sự khác biệt trong ưu tiên thiết kế. Bài này tập trung vào trục linh hoạt và DX: triết lý zero-framework của Eleventy so với mô hình component có chủ kiến của Astro.

Chúng tôi đã thử nghiệm gì

Astro v6.3 (stable từ ngày 7 tháng 5 năm 2026) so với Eleventy v3.1.5 (stable từ tháng 3 năm 2025). Số liệu tốc độ build lấy từ benchmark SSG của Zach Leatherman (zachleat.com, tháng 7 năm 2022, M1 MacBook Air). Lưu ý: benchmark đó chạy trên Eleventy 1.0.1 và Astro 1.0.1 — cả hai công cụ đều đã cải thiện đáng kể kể từ đó. Astro v5 Content Layer tuyên bố tốc độ build Markdown nhanh hơn 5× so với v4, và chưa có benchmark trực tiếp nào so sánh Eleventy 3.x với Astro 5.x/6.x được công bố. Hãy hiểu các con số này theo đúng phiên bản tương ứng.

Tốc độ build

Eleventy nhanh hơn. Benchmark trên v1.0.1:

Số trangEleventyAstroEleventy nhanh hơn
2500.584s2.270s3.9×
5000.683s3.172s4.6×
1,0000.914s5.098s5.6×
2,0001.250s9.791s7.8×
4,0001.938s22.907s11.8×

Nguồn: Benchmark SSG của Zach Leatherman (Eleventy 1.0.1, Astro 1.0.1, tháng 7 năm 2022, M1 MacBook Air, corpus Markdown thuần).

Lý do Eleventy giữ được ưu thế đó: không có bước compile component. Eleventy nhận Markdown vào và xuất HTML ra. Astro phải compile các component .astro, resolve import, và xử lý island bundling. Chi phí đó tồn tại bất kể trang đó có dùng island hay không.

Dưới khoảng 500 trang, cả hai đều hoàn thành cold build trong dưới một giây. Ở quy mô đó, tốc độ build không còn là yếu tố quyết định nữa. Trên 1.000 trang — và đặc biệt là trên 4.000 — khoảng cách trở thành vấn đề vận hành thực tế: số phút CI, thời gian deploy preview, vòng phản hồi khi phát triển site nặng về nội dung.

DX và mô hình templating

Đây là điểm phân kỳ rõ rệt nhất giữa hai công cụ.

Eleventy không ràng buộc với bất kỳ template engine nào. Ngay từ đầu bạn đã có Nunjucks, Liquid, Handlebars, Mustache, WebC, JavaScript templates, TypeScript, và HTML thuần — mười một engine, đúng như cái tên. Cấu hình nằm trong .eleventy.js, một Node module thuần túy. Không có mô hình component nào được áp đặt lên bạn. Nếu team bạn quen nghĩ theo hướng server-side templating hoặc HTML thuần, Eleventy sẽ không cản trở.

Eleventy chuyển sang ESM-native trong v3.0.0 (tháng 10 năm 2024) — runtime giờ được viết bằng ESM và hỗ trợ ESM đầy đủ là ưu tiên hàng đầu, nhưng CommonJS vẫn được hỗ trợ. Các CJS plugin load đồng bộ cần dùng await import(), nhưng runtime đã được dọn dẹp đáng kể. Dung lượng package giảm từ 35.2 MB xuống còn 28.1 MB. Nếu bạn vẫn đang dùng v2 và trì hoãn nâng cấp, phạm vi migration đã được ghi chép rõ ràng và có giới hạn cụ thể.

Astro có chủ kiến rõ ràng hơn. Định dạng single-file component .astro gần với JSX: team đến từ React, Vue, hay Svelte sẽ quen ngay trong ngày đầu. Layout component, slot pattern, scoped style, reactive prop — tất cả đều có thể kết hợp với nhau mà không cần thêm framework. Astro v5 hỗ trợ MDX với tốc độ build nhanh hơn 2× so với v4, và bạn có thể dùng JSX component trực tiếp trong Markdown mà không cần cài thêm plugin. Mô hình component là điểm mạnh của Astro, không phải gánh nặng phải chịu.

Một điều Astro làm được mà Eleventy không thể đáp ứng tự nhiên: Server Islands. Các component được đánh dấu server:defer compile thành SSR route riêng biệt — trang render ngay lập tức với static fallback, và island hydrate khi tải xong. Tính năng này ổn định từ Astro v5.0 (ngày 3 tháng 12 năm 2024). Eleventy không có tính năng tương đương. Đây là một SSG thuần túy: để đạt được pattern tương tự, bạn cần một API endpoint riêng kết hợp với JavaScript phía client, và phải tự ghép chúng lại với nhau.

Content và data layer

Astro v5 Content Layer mở rộng đáng kể những gì Content Collections của v4 có thể làm. v4 xử lý Markdown/MDX nội bộ trong src/content/. v5 ra mắt Loaders API — các hàm có thể cắm vào để kéo dữ liệu từ bất kỳ nguồn nào: CMS REST API, database, RSS feed, file JSON. Vẫn dùng cùng surface getCollection() / getEntry(). Community loader đã có sẵn cho Contentful, Sanity, Storyblok, và Notion. Loader cache giữa các lần build; các loader nâng cao lưu token last-modified để sync theo từng phần. Astro v6 (tháng 3 năm 2026) bổ sung live collections — fetch dữ liệu theo từng request cho các trang kết hợp static và dynamic.

Data cascade của Eleventy là hệ thống 7 cấp ưu tiên, từ cao xuống thấp: computed data → front matter → template data files → directory data files → layout front matter → config global data → _data/*.js global files. Các file _data/*.js chạy JavaScript tùy ý: gọi API, truy vấn DB, parse file, bất cứ điều gì Node có thể làm. Custom Data File Formats API hỗ trợ YAML, CSV, TOML và nhiều định dạng khác. Deep merge là mặc định; dùng prefix override: để tắt.

Khoảng cách đã thu hẹp. Loaders API của Astro bao phủ hầu hết các kịch bản tích hợp CMS với ít bước cấu hình hơn so với cách làm thủ công của Eleventy. Nhưng data cascade của Eleventy chi tiết hơn với các pipeline phi tiêu chuẩn: kế thừa theo thư mục cho phép thiết lập metadata cho toàn bộ một nhánh cây mà không cần chỉnh từng file riêng lẻ. Astro không có tính năng tương đương trong content model của mình.

Nếu nội dung của bạn nằm trong một headless CMS và bạn muốn query có kiểu dữ liệu an toàn lúc build, Astro Content Layer là con đường gọn gàng hơn. Nếu data pipeline của bạn phi tiêu chuẩn — mixed format, kế thừa theo thư mục, transform không vừa với hình dạng một loader — _data/*.js của Eleventy cho bạn toàn quyền kiểm soát Node mà không có framework cản trở.

Hệ sinh thái và plugin

Astro có hệ sinh thái lớn hơn: 59.363 GitHub star tính đến tháng 5 năm 2026 so với 19.642 của Eleventy. Tích hợp framework chính thức (React, Vue, Svelte, Solid, Preact, Lit), thư mục integration chính thức, và một cộng đồng tích cực xây dựng loader cho hầu hết các CMS lớn. CloudCannon gia nhập với tư cách đối tác CMS chính thức vào tháng 3 năm 2026. Các package npm hoạt động trực tiếp trong file .astro — mô hình component làm cho hệ sinh thái trở nên dễ tiếp cận hơn.

Hệ sinh thái của Eleventy nhỏ hơn và chuyên biệt hơn. Sức hút tập trung ở các trang chính phủ (18F), dự án tài liệu, và những lập trình viên muốn không có rủi ro framework nào trên một archive sống lâu dài. Mô hình plugin là các Node module thuần túy được thêm qua addPlugin() — đơn giản để viết, nhưng bạn sẽ tìm thấy ít giải pháp có sẵn hơn so với thư mục integration của Astro.

Astro v6 (tháng 3 năm 2026) ra mắt Rust compiler thử nghiệm có thể bật tùy chọn (experimental.rustCompiler) — một tín hiệu cho thấy sự đầu tư liên tục vào hiệu suất build. Eleventy v4.0.0-alpha.7 đang trong giai đoạn canary tính đến tháng 3 năm 2026, chưa có bản stable v4 nào được phát hành.

Phù hợp với hosting

Cả hai đều xuất HTML tĩnh có thể deploy lên bất kỳ CDN hoặc static host nào. Cloudflare Pages và Vercel đều hỗ trợ cả hai công cụ trên gói miễn phí.

Điểm khác biệt thực sự nằm ở những gì xảy ra sau khi static. Astro có adapter chính thức cho Cloudflare Workers, Vercel Edge, và Netlify Edge Functions. Nếu bạn bắt đầu với một trang tĩnh và sau này cần SSR, Server Islands, hoặc API route, Astro xử lý được sự chuyển đổi mà không cần viết lại. Eleventy là SSG thuần túy — thêm logic phía server đồng nghĩa với một function layer riêng biệt phải tự cấu hình thủ công.

Với output tĩnh thuần túy và không có kế hoạch thêm logic phía server, lựa chọn hosting không tạo ra sự khác biệt giữa hai công cụ.

Kết luận: Astro hay Eleventy?

Chọn Astro nếu:

  • Team bạn viết TypeScript và quen với các component pattern gần giống JSX.
  • Nội dung nằm trong một headless CMS (Contentful, Sanity, Storyblok, Notion).
  • Bạn cần Server Islands — component deferred hoặc cá nhân hóa trên các trang tĩnh.
  • Bạn xây dựng bằng MDX và muốn frontmatter schema được validate bằng Zod.
  • Bạn dự kiến sẽ thêm SSR hoặc API route về sau.
  • Team bạn quen với TypeScript và muốn tooling nhất quán với điều đó.

Chọn Eleventy nếu:

  • Tốc độ build ở quy mô lớn là ràng buộc cứng (1.000+ trang, CI minutes eo hẹp).
  • Bạn cần output không có JS, không qua bước compile component.
  • Data pipeline của bạn phi tiêu chuẩn: mixed format, kế thừa theo thư mục, transform JavaScript tùy ý.
  • Bạn muốn mô hình cấu hình không có framework — không JSX, không component model, không build-time magic ngoài những gì .eleventy.js khai báo.
  • Bạn đang xây dựng một archive sống lâu dài, nơi không có rủi ro framework quan trọng hơn kích thước hệ sinh thái.

Lưu ý

Số liệu tốc độ build lấy từ benchmark năm 2022 của Zach Leatherman (Eleventy 1.0.1, Astro 1.0.1). Chưa có benchmark trực tiếp nào so sánh Eleventy 3.x với Astro 5.x/6.x được công bố. Các tỷ lệ mang tính định hướng — hãy tự đo trên corpus thực tế của bạn trước khi xem chúng như con số chính xác.

Eleventy v4.0.0-alpha.7 đang trong giai đoạn canary tính đến tháng 3 năm 2026. Chưa có bản stable v4 nào; dùng v3.1.5 trong production.

Chúng tôi không có quan hệ đối tác hay hoa hồng với Astro, Eleventy, Cloudflare Pages, hay Vercel.

Tham khảo