Vì sao site này vẫn dùng Astro, không phải Next.js

brandon-ta.com là một site nội dung: một blog, mười trang dự án, một trang Giới thiệu với các phiên bản bio có ngày, và một form liên hệ, bằng cả tiếng Anh lẫn tiếng Việt. Site được xây bằng Astro 5, và câu hỏi hiển nhiên năm 2026 là vì sao nó không phải Next.js.

Câu trả lời có ích không phải một cuộc so benchmark giữa hai framework. Nó là những gì chính site này gửi xuống trình duyệt. Mọi con số dưới đây đều đo trên bản build production ngày 16/09/2026, đã nén gzip.

Một trang tốn bao nhiêu

Trang	HTML và CSS nhúng sẵn	JavaScript	Tổng
Trang chủ	27,0 KB	5,2 KB	32,2 KB
Danh sách dự án	24,1 KB	5,2 KB	29,2 KB
Một trang dự án	24,9 KB	5,2 KB	30,0 KB
Giới thiệu	25,6 KB	5,2 KB	30,7 KB

5,2 KB kia là client router đứng sau hiệu ứng chuyển trang. Phần còn lại là HTML và CSS được dựng sẵn lúc build. Không gì trên các trang này cần React, nên React không hề được tải.

Next.js cũng phục vụ được một trang tĩnh nhanh. Điều App Router không làm là bỏ React ra ngoài: nó gửi kèm runtime để hydrate và điều hướng. Với một ứng dụng, đó là đánh đổi đúng. Với hơn năm mươi trang phần lớn là chữ, đó là một khoản chi phí chẳng để làm gì.

Chỗ duy nhất con số từng tệ

Bài blog là ngoại lệ, và cho tới hôm nay là một ngoại lệ đáng xấu hổ. Mỗi bài tải 102,7 KB JavaScript ngay khi trình duyệt rảnh:

File	Dung lượng
Runtime React	57,0 KB
framer-motion	38,9 KB
Client router	5,2 KB
Bản thân island	1,7 KB

Tất cả chỉ để vẽ một thanh tiến độ đọc: bốn cạnh viền màu vàng và một pill “N% read”, với đúng một việc là đổi chiều rộng và chiều cao khi bạn cuộn. Astro khiến việc làm dở chuyện này trở nên quá dễ. Chỉ một directive client:idle trên một component React là lặng lẽ đưa React và cả một thư viện animation lên mọi bài viết.

Giờ nó là một component Astro với một đoạn script thuần ngắn. Vẫn thanh đó, vẫn pill đó, vẫn con số đó. Một bài viết chỉ tải 5,2 KB router, không thêm gì cho tới khi người đọc tới gần phần bình luận, và framer-motion đã không còn trong bản build nữa.

Chỗ React vẫn đáng tiền

Bình luận. Giscus chạy trong một island React gắn client:visible, nên nó không tốn gì cho tới khi phần bình luận lọt vào màn hình. Khi đó nó mang theo 71,1 KB: runtime React và chính Giscus. Đó là một tính năng mà người đọc tự yêu cầu bằng cách cuộn tới.

Toàn bộ lý lẽ cho Astro ở đây nằm gọn trong một câu: mỗi kilobyte JavaScript trên site này phải gắn với một thứ người đọc thật sự dùng, và framework biến điều đó thành mặc định chứ không phải ngoại lệ.

Astro cho một site nội dung những gì mà không cần làm thêm

• Content Collections với schema Zod. Bài blog, dự án và các phiên bản bio là ba collection, và một trường frontmatter bị thiếu hay sai kiểu sẽ làm build thất bại trước khi kịp lên trang.
• Route tiếng Anh và tiếng Việt trong src/pages/[locale]/, mỗi trang tiếng Việt được dựng từ file nội dung riêng của nó chứ không dịch trên trình duyệt.
• Mặc định xuất tĩnh, chỉ dùng server function ở đúng chỗ site cần: endpoint gửi form liên hệ qua email.

Khi nào câu trả lời sẽ khác

Nếu domain này mọc thêm một sản phẩm cần đăng nhập, với tài khoản, dữ liệu riêng từng người dùng và dashboard, thì Next.js sẽ là chỗ phù hợp hơn cho nó, và việc giữ hai framework song song sẽ không còn đáng nữa.

Ở đây không có gì như vậy. Tám sản phẩm mỗi cái có repo riêng, và bảy cái có backend thì mỗi cái một project Supabase riêng, nên site này được phép giữ nguyên bản chất của nó: chữ, vài trang bằng chứng, và càng ít JavaScript càng tốt.