Vercel đã phát hành Next.js 16.3, đưa Turbopack và Partial Prerendering từ giai đoạn thử nghiệm sang chế độ sẵn sàng cho môi trường production. Bản nâng cấp này hứa hẹn tốc độ build nhanh hơn từ hai đến năm lần đối với các ứng dụng quy mô trung bình và tốc độ tải trang giúp giảm 40-60% Time to Interactive—một sự cải thiện mà bất kỳ đội ngũ nào đang chạy đua để ra mắt tính năng đều sẽ nhận thấy.

Tại sao sự thay đổi này lại quan trọng vào lúc này

Next.js từ lâu đã dựa vào Webpack, một trình đóng gói JavaScript được viết bằng JavaScript, cho cả quá trình build phát triển và production. Trong năm qua, đội ngũ Vercel đã tinh chỉnh Turbopack, một giải pháp thay thế dựa trên Rust giúp giảm mức sử dụng bộ nhớ và tăng tốc độ build. Đồng thời, họ cũng thử nghiệm Partial Prerendering (PPR) như một cách để kết hợp HTML tĩnh với nội dung động tức thời, nhưng các nhà phát triển trước đó phải coi nó như một "thử nghiệm tự chọn". Bằng cách đưa cả hai lên trạng thái ổn định, Vercel mang đến cho các đội ngũ production một bản nâng cấp hiệu suất có sẵn mà không cần phải trải qua quá trình thử sai thông thường.

Turbopack chính thức ổn định

  • Tốc độ: Các bản build production trên các kho lưu trữ (repository) quy mô trung bình hiện chạy nhanh hơn từ hai đến năm lần.
  • Bộ nhớ: Giảm áp lực bộ nhớ trên các codebase lớn.
  • Kích hoạt: Chỉ cần thêm turbo: true vào next.config.js là xong.

Sự đánh đổi ở đây là một môi trường khắt khe hơn. Turbopack yêu cầu Node 18.17 trở lên, và bất kỳ plugin Webpack tùy chỉnh nào mà dự án đang phụ thuộc vào sẽ không chạy được dưới Turbopack. Các đội ngũ có hệ thống plugin phức tạp phải kiểm tra hoặc viết lại các phần mở rộng đó trước khi chuyển đổi.

Server Actions mượt mà hơn

Server Actions—các hàm chạy trên máy chủ nhưng được gọi từ phía client—hiện đã có sự tích hợp TypeScript chặt chẽ hơn. Trình biên dịch tự động suy luận kiểu dữ liệu, vì vậy các nhà phát triển có thể loại bỏ các chú thích kiểu viết tay. Nó cũng hiểu các đối tượng lồng nhau và schema Zod từ đầu đến cuối, giúp giảm thiểu sự không khớp trong quá trình runtime. Các quy ước hệ thống tệp mới giúp việc phân giải action trở nên rõ ràng, giúp nhà phát triển tránh được các lỗi tiềm ẩn do việc import không rõ ràng gây ra.

Partial Prerendering (PPR) đã sẵn sàng cho production

PPR cho phép một trang duy nhất phục vụ HTML tĩnh cho các phần không bao giờ thay đổi, trong khi thực hiện hydrating các phần động một cách riêng biệt. Markup tĩnh sẽ được hiển thị ngay lập tức; sau đó, một truy vấn ngầm (background fetch) sẽ đưa các phần tương tác vào hoạt động. Cách tiếp cận này cải thiện Time to Interactive (TTI) thêm 40–60%.

Việc triển khai PPR rất đơn giản: đánh dấu các phần tĩnh bằng API tạo tĩnh (static generation API) hiện có, và để các phần động chuyển sang cơ chế client-side rendering. Vì HTML tĩnh được gửi đến dưới dạng một tài liệu đầy đủ, trình duyệt có thể bắt đầu render trước khi bất kỳ JavaScript nào chạy, giúp tăng hiệu suất cảm nhận trên các mạng chậm.

Các tinh chỉnh đáng chú ý khác

  • Tối ưu hóa hình ảnh: fetchPriority hiện có thể được thiết lập trên các hình ảnh LCP (Largest Contentful Paint), đảm bảo trình duyệt ưu tiên tải hình ảnh chính (hero image) trước.
  • Xử lý font: next/font tự động chia nhỏ các ký tự (subsetting), giúp giảm kích thước payload mà không cần cấu hình thêm.
  • Middleware: Công cụ khớp (matching engine) đã được viết lại bằng Rust, mang lại tốc độ kiểm tra route nhanh hơn. Middleware cũng có thể trả về các phản hồi HTML đầy đủ, mở ra cơ hội cho các trang được render tại edge.

Các bước thực hiện ngay cho các đội ngũ

  1. Bật Turbopack trong quá trình phát triển; nó hoạt động tương tự trong production sau khi thiết lập cờ turbo.
  2. Nâng cấp Node lên phiên bản 20 hoặc cao hơn.
  3. Xem lại Server Actions để tận dụng lợi ích của việc suy luận kiểu; loại bỏ bất kỳ chú thích thủ công nào hiện không còn cần thiết.
  4. Triển khai thử nghiệm Partial Prerendering trên một route có lưu lượng truy cập cao duy nhất để đo lường mức cải thiện TTI trước khi triển khai trên toàn bộ trang web.

Lưu ý và các điểm cần cân nhắc

Lợi ích về hiệu suất phụ thuộc vào việc đáp ứng các yêu cầu runtime mới. Các dự án đang kẹt ở các phiên bản Node cũ hoặc phụ thuộc nặng nề vào các plugin Webpack tùy chỉnh sẽ gặp trở ngại.

Tóm lại: Next.js 16.3 cung cấp cho các nhà phát triển một trình đóng gói mạnh mẽ chạy bằng Rust và một phương pháp đã được chứng minh để kết hợp nội dung tĩnh và động. Hãy áp dụng các thiết lập mặc định mới ngay bây giờ, khắc phục các lỗ hổng tương thích, và bạn sẽ thấy quá trình build hoàn thành nhanh hơn cũng như các trang web trở nên nhanh nhạy hơn rõ rệt đối với người dùng cuối.