Bỏ Next.js giúp blog đạt điểm tuyệt đối 100 trên mọi hạng mục Lighthouse

Có những lúc để đạt hiệu năng hoàn hảo, giải pháp lại là gỡ bỏ chính framework mà bạn yêu thích. Một lập trình viên độc lập đã quyết định loại Next.js khỏi blog cá nhân, chuyển sang Hono và lập tức chạm mức 100 điểm trên toàn bộ các hạng mục của Lighthouse. Câu chuyện của anh cũng đặt ra câu hỏi lớn hơn: một website tĩnh có thực sự cần đến framework nặng ký?

Blog đạt 100 điểm trên mọi hạng mục Lighthouse

Hành trình đi tìm một nền tảng blog vừa ý

Tác giả bắt đầu từ một danh sách những cái tên quen thuộc: Medium, Blogger, Ghost, WordPress, Hugo hay Bear Blog. Mỗi lựa chọn đều có vấn đề riêng. Medium và Blogger quá nặng nề, hiệu năng thực tế không thuyết phục. WordPress thì "địa ngục plugin". Ghost bắt buộc tự vận hành, còn dùng ghost.org thì quá đắt, và mỗi lần nâng cấp phiên bản lại làm hỏng thứ gì đó trong trình soạn thảo. Hugo được đánh giá là tốt nhất trong nhóm nhưng vẫn khá phiền khi thiết lập.

Thứ mà anh thực sự muốn, nhìn lại, là một dịch vụ SaaS. Bear Blog gần như đáp ứng được kỳ vọng với hiệu năng tuyệt vời và triết lý sản phẩm đáng ngưỡng mộ. Nhưng sự tối giản cực đoan và trải nghiệm trình soạn thảo lại là điểm trừ. Lựa chọn lý tưởng, theo anh, là một blog nhanh như Bear Blog nhưng có thêm chức năng và dễ dùng hơn.

Tối ưu trước khi bỏ framework

Trước khi đi đến quyết định cuối cùng, tác giả đã làm rất nhiều việc đúng chuẩn: bật bộ nhớ đệm, dùng ISR và mở rộng hàm fetch của Next.js, triển khai CDN, sau đó xử lý hình ảnh bằng Cloudflare Image Transformations (gói miễn phí cho 5.000 ảnh). Anh tự nhận mình "nghe như nhân viên bán hàng của Cloudflare", nhưng lý do rất thực tế: với một website tĩnh, chỉ riêng CDN là đủ, và khi đã vậy thì không cần đến cơ chế cache phức tạp của Next.js nữa.

Kết quả sau các bước tối ưu này khá cao, nhưng vẫn chưa trọn vẹn. Lighthouse báo có một lượng lớn JavaScript cũ (legacy) không phải do tác giả viết, mà đến từ runtime của chính framework. Anh thử loại bỏ toàn bộ client component, chỉ giữ server component, điểm số không nhúc nhích. Đào sâu hơn, anh phát hiện vấn đề không nằm ở hydration đơn thuần mà ở client runtime mà Next.js luôn tải về, kể cả với trang tĩnh.

Chỉ cần có next/link và next/image là đủ để kéo theo runtime và kích hoạt hydration, bởi bản thân hai component này đã là client component.

Ngay cả khi gỡ bỏ hai component đó, runtime của App Router và các error boundary vẫn còn. Không có cách chính thức nào để đưa về 0, chỉ còn cách "hack" là xóa script khỏi HTML đã render. Chính lúc ấy, tác giả tự hỏi: nếu phải làm đến mức đó thì dùng Next.js để làm gì?

Lượng JavaScript dư thừa trong bản build Next.js

Con số đáng chú ý: riêng phần mã không dùng đến đã lên tới 230.460 byte. Phần lớn website tĩnh vốn không cần JavaScript, nên lượng mã thừa này càng khó biện minh.

Chuyển sang Hono và kết quả

Sau khi cân nhắc, tác giả quyết định gỡ hẳn Next.js. Anh không chọn hướng thuần vanilla vì không muốn từ bỏ năng suất và hạ tầng mà framework mang lại, mà chọn Hono — một framework nhẹ với triết lý "nhanh và đơn giản", hỗ trợ JSX và có chi phí chuyển đổi không quá lớn.

Kết quả: 100 điểm trên toàn bộ các hạng mục. Không còn JavaScript, mã không dùng giảm mạnh xuống chỉ còn 407 byte, thời gian build giảm khoảng 40%. Hạng mục SEO hiển thị 69 chỉ vì trang kiểm thử cố tình chặn lập chỉ mục tìm kiếm.

Về hiệu năng thực tế, tác vụ dài chạy trước khi nội dung hiện lên màn hình tốn 309,3ms với Next.js (chỉ dùng server component) và 68,01ms khi dựng cùng trang đó bằng Hono — cải thiện khoảng 78%.

So sánh kết quả hiệu năng giữa Hono và Next.js

Bài học cho lập trình viên Việt Nam

Câu chuyện này không nhằm phủ nhận Next.js. Chính tác giả khẳng định với ứng dụng nhiều tương tác, Next.js vẫn là framework rất tốt — và anh vẫn dùng nó để xây phần quản trị cho blog của mình. Vấn đề nằm ở việc chọn đúng công cụ cho đúng bài toán.

• Website tĩnh không cần gánh nặng hydration: mã thừa và runtime luôn được tải về là chi phí thực sự, ảnh hưởng trực tiếp đến điểm Core Web Vitals.
• CDN là đủ cho nội dung tĩnh: khi nội dung đã được render sẵn, việc phải làm mới hai lớp cache mỗi lần đăng bài chỉ tạo thêm việc.
• Tối ưu hình ảnh là bắt buộc: với ảnh ngày nay thường vượt 10MB, các dịch vụ như Cloudflare Image Transformations giúp giảm tải đáng kể mà không cần tự dựng pipeline riêng.
• Đừng ngại đo lại và thử nghiệm: chính việc gỡ toàn bộ client component để đo lại đã giúp tác giả tìm ra nguyên nhân gốc.

Với các đội phát triển ở Việt Nam đang vận hành blog công ty, trang tài liệu hay landing page, bài học rất rõ ràng: hãy cân nhắc kỹ giữa năng suất phát triển và chi phí hiệu năng. Nếu trang của bạn chủ yếu là nội dung đọc, một giải pháp nhẹ như Hono, Astro hay thậm chí HTML tĩnh có thể mang lại trải nghiệm tốt hơn nhiều so với việc mặc định chọn framework lớn nhất.