Cùng một bài, đọc bằng chữ. Nhanh hơn và tìm lại được bằng Ctrl+F.
Làm sẵn một lần, hay làm lại mỗi lần mở
Lúc build, Next.js làm sẵn trang web trước khi đưa lên mạng. Trang static được làm xong ở bước này, ai mở cũng nhận cùng một bản. Phần dynamic thì server làm lại mỗi lần có người mở.
Avatar của người đang đăng nhập là phần dynamic. Mỗi người thấy một ảnh khác.
Trước
Thêm component avatar <UserAvatar /> vào trang blog
Build vẫn chạy xong, không ai báo
Next.js 16.4
Thêm dòng ensureStatic ở đầu file
Lúc build gặp phần dynamic là dừng, báo lỗi
Thêm vào đầu file page
Muốn cả site static thì đặt ở layout
File app/layout.tsx bọc ngoài mọi trang, chứa phần chung như header. Đặt dòng ensureStatic ở đó thì mọi trang bên trong đều phải static.
'navigation' là mức chặt nhất: cả trang phải làm sẵn.
Phải bật Cache Components
ensureStatic chỉ chạy khi bật cacheComponents trong next.config.ts. App mới tạo bằng create-next-app từ bản 16.4 đã bật sẵn. App cũ thì phải tự bật.
Chưa bật thì build cũng dừng, vì thiếu cấu hình này.
Khi dùng ensureStatic
Nên
Dùng cho trang ai mở cũng giống nhau: blog, shop
Có trang cần avatar thì đặt dòng ở layout của nhóm trang khác
Không nên
Thêm vào dashboard, nơi mỗi người thấy dữ liệu riêng
Chờ nó làm trang nhanh hơn: nó chỉ báo lỗi
Project của bạn có trang nào phải luôn static?
Thêm export const ensureStatic = 'navigation' vào trang đó rồi chạy next build.
