Next.js 16.3: Instant Navigations

Vercel · 2026 · 4. Điều chỉnh · Độ khó: Trung bình — bài gốc

Vercel vừa làm framework Next.js vừa bán nền tảng chạy nó; nhận định về sản phẩm của họ trong trang này đều là "theo Vercel". Bài ra mắt tính năng; giữ phần cơ chế.

Bối cảnh

• Lời phàn nàn thường gặp về Next.js (theo bài): điều hướng "như website", vì app hướng server phải đi một vòng network, còn SPA thấy ngay vỏ trang tiếp theo. Mục tiêu 16.3: giữ mô hình hướng server nhưng điều hướng tức thì như SPA.

Thay đổi chính

• Stream, Cache hoặc Block (cần bật Cache Components, cacheComponents: true): khi một route await dữ liệu ở server, dev phải chọn: Stream với <Suspense> (thấy ngay trạng thái loading), Cache với use cache (thấy ngay UI đã cache), hoặc Block (cố ý chờ server, ví dụ bài blog). Trong dev, điều hướng chậm trở thành lỗi gọi là Instant Insights (export const instant = false để tắt cho một route).
• Partial Prefetching (partialPrefetching: true): trước đây (đến 16.2) prefetch một request cho mỗi link trong viewport, kể cả các link tới cùng route. Từ 16.3 chỉ prefetch một shell dùng lại cho mỗi route (như SPA tải code theo route), cache ở client trong phiên; ví dụ sidebar 20 link chat chỉ tải một shell cho /chat/[id]. Muốn nhiều hơn shell thì thêm <Link prefetch={true}> kèm use cache; phần render chỉ đi tới nội dung có sẵn sync (params, searchParams) hoặc đã cache.
• Công cụ: Navigation Inspector trong DevTools tạm dừng điều hướng ở shell; helper instant() cho Playwright khẳng định phần UI nào phải thấy ngay mà không chờ network; đang tìm cách báo lỗi này lúc build. Shell cũng là nền cho điều hướng offline sau này.
• Vercel đã áp dụng cho v0 trước khi ra mắt (xem Vercel 2026).

Vì sao

• Chặn khoảng trống thứ hai (client–server) bằng shell prefetch dùng chung; chặn khoảng trống thứ nhất (server chờ dữ liệu) bằng stream hoặc cache.

Bài học cho SWE

• Muốn cảm giác tức thì cần xác định ranh giới "vỏ" và "dữ liệu"; prefetch theo route thay vì theo link giảm hẳn số request.
• Biến yêu cầu mơ hồ ("nhanh") thành lỗi hoặc test kiểm được để không thoái lui.

Liên quan

• Vercel 2022 · Vercel 2024 · Vercel 2026
• Kiến trúc frontend · Cache và invalidation