Making Navigations Instant in v0

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 kiêm giới thiệu Skill cho agent; số liệu production chỉ có trong biểu đồ của bài (không trích được).

Bối cảnh

• v0 (nền tảng coding full-stack của Vercel, app động và cá nhân hoá) có điều hướng chậm. Tổ làm v0 dùng bộ công cụ mới của Next.js 16.3 (Vercel 2026), và theo Vercel, một coding agent chạy vòng lặp làm phần lớn việc sửa.

Thay đổi chính

• Prerender cho app động: trước đây chỉ có hai công cụ (tĩnh/PPR, hoặc chuyển dữ liệu về client); app động không có lối. Từ 16.3, phần động có thể khai báo loading bằng Suspense hoặc đánh dấu use cache; Next.js trích phần đó đưa về client trước khi chuyển trang. Một kỹ sư v0 nhận xét làm được "instant" dễ hơn nhiều so với tưởng, vì không cần công sức như PPR tĩnh.
• Vòng lặp agent cần: mục tiêu kiểm chứng được (test fail tới khi pass), guardrail, một Skill chứa các mẫu đã kiểm chứng, và phản hồi thật từ metric production. Phần khó là viết test cho "điều hướng này tức thì"; instant() của Playwright tạm dừng điều hướng và khẳng định phần UI nào phải hiện mà không có request network.
• Quy trình: gom các hành trình quan trọng bị chậm (New Chat, cài đặt, hồ sơ; Instant Insights liệt kê route chậm) → agent viết test fail → refactor cho tới khi pass → đo production. Phần lớn sửa chỉ là đưa truy cập dữ liệu động xuống dưới một Suspense boundary; có chỗ phải dời một phụ thuộc chặn ra khỏi root layout.
• Kết quả (theo Vercel): trang chủ (đăng nhập/chưa), trang chat và mọi trang con của settings từ chặn thành tức thì; 16 test mới giữ không thoái lui, quan trọng khi agent cũng sửa code. Hai Skill công khai: tối ưu cho app đã dùng Cache Components, và hướng dẫn chuyển sang Cache Components.

Bài học cho SWE

• Với agent, một verifier kiểm được bằng máy (test cho "nhanh") quan trọng hơn prompt; framework nên cung cấp verifier loại này (theo Vercel, đó là lý do framework vẫn cần có).
• Khoá kết quả tối ưu bằng test hồi quy ngay trong lần làm.

Liên quan

• Vercel 2026 · Vercel 2026
• Kiến trúc frontend · Coding agent trong engineering (migrate, viết lại, chạy song song, quyền hạn) · Kiểm thử độ tin cậy (chaos, fault injection, mô phỏng tất định)