Astro vs Hugo — TypeScript ergonomics hay tốc độ thuần túy?

Chọn Astro nếu team bạn quen với TypeScript, cần component tương tác, hoặc đang kéo nội dung từ nhiều nguồn CMS. Chọn Hugo nếu thời gian build là giới hạn cứng, bạn có hơn 10.000 trang, hoặc muốn một binary duy nhất không phụ thuộc Node. Phần còn lại chỉ là chi tiết — tiêu đề các mục bên dưới sẽ cho bạn biết những chi tiết đó có quan trọng với dự án của bạn không.

Bài này dành cho ai

Frontend engineer và team nội dung kỹ thuật đang lựa chọn giữa hai static-site generator hiện đại. Nếu bạn đang dùng một trong hai và nó hoạt động tốt, không cần chuyển — bài này dành cho quyết định greenfield và team đang đụng trần với công cụ hiện tại.

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

Astro v6.3.3 (bản stable mới nhất tính đến tháng 5/2026) đối đầu Hugo v0.161.1 (phát hành ngày 29/4/2026). Số liệu tốc độ build lấy từ SSG build benchmark do Zach Leatherman công bố (zachleat.com) trên các corpus Markdown thực, không phải setup hello-world tổng hợp. Nhận xét về DX đến từ tài liệu của cả hai công cụ và các pattern kỹ thuật xuất hiện trong issue tracker GitHub và migration guide của chúng.

Các phát hiện

Tốc độ build

Hugo là static-site generator nhanh nhất trong số các công cụ đang được dùng rộng rãi. Số liệu:

Trang	Hugo	Astro
1.000	0.171s	5.098s
4.000	0.684s	22.907s

Nguồn: SSG build benchmark của Zach Leatherman (Hugo v0.101.0, Astro 1.0.1; corpus Markdown thuần, 2022).

Có vài điều cần đọc kỹ từ bảng này.

Hugo ở 1.000 trang (0.171s) nhanh hơn Astro (5.098s) khoảng 30 lần. Tỉ lệ này giữ nguyên ở corpus lớn hơn: ở 4.000 trang, Hugo xong trong 0.684s so với 22.907s của Astro.

Dưới vài trăm trang, cả hai đều hoàn thành trong chưa đến một giây với cold build. Ở quy mô đó, lấy tốc độ build làm tiêu chí lựa chọn là nhiễu.

Ngưỡng thực tế: nếu bạn có hàng nghìn trang và mỗi lần build đều tính (CI minutes, preview deploy trên mỗi PR), tốc độ của Hugo là lợi thế vận hành thực sự. Nếu bạn có blog sản phẩm hay trang tài liệu điển hình ở mức hàng trăm đến vài nghìn trang, tiêu chí này không quyết định gì.

Trải nghiệm lập trình

Đây là nơi hai công cụ phân kỳ rõ nhất, và cũng là nơi bạn nên dành nhiều thời gian nhất để cân nhắc.

Astro được xây cho team tư duy theo TypeScript. Format component .astro gần với JSX — gần đủ để React hay Vue developer có thể productive ngay trong ngày đầu. Content Collections cho bạn frontmatter schema được validate bởi Zod, nghĩa là lỗi kiểu dữ liệu trên nội dung sai format xuất hiện lúc build thay vì gây bất ngờ runtime trên production. MDX là first-class, nên bạn có thể dùng JSX component trực tiếp trong Markdown mà không cần cài thêm plugin.

Astro v5 đưa vào Content Layer, bổ sung loader type-safe cho các nguồn remote (Storyblok có official support; Notion qua community-maintained loader) và tăng tốc đáng kể thời gian build Markdown. Server Islands (server:defer) cho phép defer việc tải nội dung động trên các trang vốn là static, và astro:env cung cấp biến môi trường được validate và type-safe. Đây là những tính năng xuất hiện trong kiến trúc thực, không chỉ trong release note.

Hugo chạy trên Go template. Nếu bạn biết Go template thì biết Hugo — chúng mạnh và nhanh. Nếu không, bạn đang học một templating language với cú pháp khá khác so với những gì team JavaScript thường dùng. Không có JSX, không có TypeScript, không có component model theo nghĩa React. Đánh đổi là có thật: Hugo được phát hành dưới dạng một binary duy nhất không phụ thuộc Node, giúp setup CI trở nên đơn giản và loại bỏ hoàn toàn một danh mục vấn đề supply-chain và version-pinning.

Hướng migration nói lên câu chuyện: team JS/TS chọn Hugo vì tốc độ rồi muốn dùng component composition cuối cùng phải trả giá cho việc viết lại. Team bắt đầu với Astro mà muốn throughput build thuần của Hugo thì hiếm hơn nhiều — và thường giải quyết bằng cách chuyển sang Content Layer của Astro thay vì migrate sang Hugo.

Hỗ trợ đa ngôn ngữ của Hugo — dịch nội dung theo tên file hoặc thư mục, định dạng ngày và số theo locale, và routing locale sạch sẽ — là đầy đủ nhất trong số các SSG lớn. Nếu bạn đang publish nội dung bằng 5+ ngôn ngữ với routing locale phức tạp, Hugo xử lý nó với ít ceremony hơn Astro.

Nếu framework SSR bằng JavaScript cũng nằm trong danh sách cân nhắc, SvelteKit vs Next.js đề cập quyết định lựa chọn framework tương tự cho team đang xem xét SSR song song với static output.

Hệ sinh thái

Astro: ~3 triệu lượt download npm mỗi tuần (npm registry, tuần 10–16/5/2026), ~59.000 GitHub star (tính đến tháng 5/2026; GitHub). Tích hợp native với React, Vue, Svelte, Solid, Preact, và Lit. Hệ sinh thái đủ lớn để bạn tìm được community integration cho hầu hết service bên thứ ba.

Hugo: hơn 370 theme trong repository gohugoio/hugoThemes chính thức, hệ thống Go module cho shared component, và cộng đồng trưởng thành với xu hướng nghiêng về các trang publishing content-heavy. Hệ sinh thái nhỏ hơn Astro theo tiêu chuẩn npm, nhưng các theme của Hugo thường hướng đến thiết kế hoàn thiện, tập trung vào nội dung, hoạt động tốt ngay từ đầu.

Component model của Astro cho phép dùng package npm trực tiếp trong file .astro. Cách tiếp cận Go template của Hugo nghĩa là tích hợp bên thứ ba cần Hugo Module hoặc build step ngoài — khả thi, nhưng tốn công hơn khi mental model của team là npm install.

Nếu Next.js cũng nằm trong danh sách cân nhắc, Next.js vs Astro so sánh Islands model của Astro với khả năng SSG và SSR của App Router dành cho team React.

Triển khai

Cả hai đều tạo ra static HTML, nên đều chạy được trên bất kỳ CDN hay static host nào. Điểm khác biệt thực chất là hỗ trợ Vercel.

Netlify: hỗ trợ đầy đủ cả hai.
Cloudflare Pages: hỗ trợ đầy đủ cả hai.
Vercel: Astro chạy qua Vercel adapter chính thức (@astrojs/vercel); build script chính thức của Hugo trên Vercel ghim v0.160.0 — kém một minor version so với 0.161.1 hiện tại. Kiểm tra tài liệu host-on-Vercel của Hugo để biết version đang được ghim trước khi triển khai.

Hiệu năng đầu ra

Cả hai đều tạo static HTML. Với trang chỉ có nội dung, không có JavaScript phía client, điểm Core Web Vitals là tương đương — HTML là HTML.

Khoảng cách xuất hiện khi bạn thêm tương tác:

Islands architecture của Astro (client:load, client:idle, client:visible) chỉ ship JavaScript cho những component cần dùng. Bạn có thể xây tìm kiếm tương tác, live preview, hay authenticated widget mà không làm bùng nổ LCP.
Hugo không ship bất kỳ JavaScript runtime nào. Hugo Pipes xử lý xử lý ảnh, biên dịch SCSS, và fingerprinting lúc build. Nếu site không cần tương tác, đầu ra của Hugo gọn hơn mặc định. Nếu cần tương tác, bạn phải tự kết nối JavaScript — bằng vanilla approach hay một JS bundler riêng — và khoảng cách với Astro trở nên tốn kém.

Với marketing site và trang tài liệu có ít tương tác, baseline không-JavaScript của Hugo thực sự hấp dẫn. Với product site, developer tool, hay bất cứ thứ gì có state phía người dùng, Islands model của Astro xử lý sạch hơn.

Verdict

Chọn Astro nếu:

Team bạn viết TypeScript và cần templating gần với JSX.
Bạn đang kéo nội dung từ nhiều nguồn (Notion, Storyblok, headless CMS, cộng thêm Markdown local).
Bạn cần component tương tác — tìm kiếm, live filtering, authenticated widget, bất cứ thứ gì có state.
Bạn đang dùng Vercel và muốn SSG.
Số trang dưới 10.000 và tốc độ build không phải yếu tố quyết định.

Chọn Hugo nếu:

Thời gian build là giới hạn vận hành cứng (10.000+ trang, CI trên mỗi PR, hóa đơn eo hẹp).
Bạn muốn một binary duy nhất không phụ thuộc Node và diện tích supply-chain tối thiểu.
Nội dung là Markdown thuần không có yêu cầu tương tác.
Bạn cần hỗ trợ đa ngôn ngữ hàng đầu với routing locale phức tạp.
Bạn đã quen với Go template, hoặc team bạn đã quen.

Không có công cụ nào sai cho site đa mục đích. Chúng giải quyết các vấn đề khác nhau ở các quy mô khác nhau.

Lưu ý

Build script của Hugo trên Vercel ghim v0.160.0 tính đến tháng 5/2026 — kém một minor version so với hiện tại. Kiểm tra tài liệu host-on-Vercel của Hugo để biết version đang được ghim trước khi triển khai.

Số liệu tốc độ build dùng benchmark năm 2022 của Zach Leatherman (Hugo v0.101.0, Astro 1.0.1). Cả hai công cụ đều đã cải thiện từ đó. Cấu trúc corpus, độ phức tạp của frontmatter, và tải xử lý ảnh của bạn sẽ ảnh hưởng đến thời gian tuyệt đối — hãy tự đo trước khi xem tỉ lệ là con số cứng.

Chúng tôi không có quan hệ affiliate với Astro, Hugo, Netlify, Cloudflare Pages, hay Vercel.