Phúc Nguyễn

Posted on Oct 27

NEXTJS-15 BREAKING CHANGE

#frontend #nextjs

NextJS Version 15 Chính Thức Phát Hành

Vào Thứ Hai ngày 21 tháng 10 năm 2024, sau rất nhiều phiên bản RC được phát hành trước đó, NextJS chính thức cho phát hành phiên bản version 15 của mình.

Không có gì bất ngờ khi những thay đổi được đưa ra tại các phiên bản thử nghiệm trước đó được phát triển trong version mới này của NextJS. Bài viết này là quan điểm của mình về những thay đổi mà mình cảm thấy đáng chú ý.

Trước tiên hãy cùng dạo qua một vòng những thay đổi trong phiên bản lần này. Mình sẽ tóm tắt lại thành các ý chính, còn cụ thể hơn chúng ta có thể vào trang chủ của Vercel để tìm kiếm thông tin chi tiết hơn.

NextJS Blog - Next 15

Như đã hứa trước đó, team phát triển NextJS mỗi năm đều tung ra một lần upgrade version lớn và trong lần gần nhất, họ có nói về một công cụ mới sẽ xuất hiện và thay thế Webpack. Và trong lần release này, nó đã được chính thức đưa vào hoạt động với cam kết tốc độ build nhanh hơn phiên bản trước rất nhiều lần.

TurboPack

Trong phiên bản 15 của Next.js, công cụ TurboPack được giới thiệu với tốc độ đáng kinh ngạc so với các phiên bản trước. TurboPack được thiết kế nhằm tối ưu hóa thời gian build và phát triển ứng dụng với khả năng xử lý nhanh gấp nhiều lần so với Webpack, vốn là công cụ phổ biến trước đây.

Theo các thử nghiệm do nhóm phát triển Vercel công bố, TurboPack có thể tăng tốc độ build gấp 700 lần so với Webpack trong các dự án lớn, nhờ khả năng tận dụng tối đa tài nguyên phần cứng và kiến trúc mới. So với các phiên bản cũ, sự cải tiến này giúp tăng hiệu suất build, giảm thời gian chờ đợi khi thực hiện thay đổi mã nguồn, từ đó cải thiện trải nghiệm cho các anh mắt thâm =)).

Khi khởi tạo dự án mới NextJS 15, đội ngũ phát triển cũng đã tự động thêm flag --turbopack vào script trên môi trường dev cho chúng ta tại file package.json.

Dependencies

Thay đổi thứ hai đó chính là về dependencies. Chúng ta có thể thấy version mới nhất của React (v.19) tại file package.json.

Hiện tại, React vẫn chưa đưa ra version 19 chính thức, tuy nhiên version RC cũng là version ổn định để test thử trên product một cách ngon lành :3. Nhưng mà lỗi thì chưa có ai support đâu hehe :]

Hook Xử Lý Form

Mặc dù các hook xử lý form được React đưa ra thử nghiệm như useActionState, useFormStatus, ... tuy nhiên đã được NextJs đem vào chính thức. Các bạn có thể search các keyword trên để tìm đọc thêm. Cá nhân mình thì không ấn tượng về những thằng này lắm vì react-hook-form đã hỗ trợ mình tất cả những case này rất là lâu rồi. Sau này nếu có cần optimize code, giảm bớt thư viện bên ngoài lại thì có lẽ mình sẽ cần sau.

React-Compiler

Một thay đổi khác là về react-compiler. Trên version 15 này, chúng ta có thể sử dụng thử nghiệm react-compiler cho dự án của mình. Để sử dụng cụ thể, các bạn có thể cài theo các bước. Mình sẽ để đường link hướng dẫn cụ thể tại đây và các bạn có thể làm theo:

NextJS Docs - React Compiler

Cá nhân mình thấy react-compiler khá tiện. Nó giúp mình không cần phải đau đầu về các case sử dụng useMemo, useCallback, ReactMemo. Công việc tối ưu này sẽ được giao lại cho React, nó sẽ tự nhận biết khi nào cần rerender lại để tránh các lần lặp mất kiểm soát. Tuy nhiên, chúng ta vẫn cần phải chờ thông báo hỗ trợ chính thức từ NextJS trước khi quyết định đưa vào production nha =)). Tránh nghịch dại đưa vào rồi méo biết chỗ nào mà sửa vì nó mới chỉ thử nghiệm thôi.

Breaking Change: Chuyển Các Dynamic Function Thành Async Function

Các function dưới đây là cái mình hay sử dụng. Nó cần được chuyển thành async function và sử dụng await. Ngoài ra có một số cái khác nữa nhưng mình ít dùng đến:

cookies
headers
params
searchParams

Trước đây, chúng ta import thẳng các thư viện hỗ trợ kèm theo vào function component và gọi trực tiếp ra dùng. Tuy nhiên, lần này chúng ta phải chuyển function component thành async function và sử dụng await để có thể gọi hàm hoặc có thể sử dụng một hook mới có tên là use (đang được thử nghiệm).

Caching

Tiếp tục, thêm một thay đổi mà có lẽ là mình cùng các anh em dev frontend thích nhất trong version lần này đó là về phần CACHE.

Caching của Fetch

NextJS chính thức bỏ cache mặc định. Nếu bây giờ chúng ta muốn cache khi gọi API thì phải cần thêm flag cache: "force-cache" vào trong tùy chọn của fetch. Trước kia mình đã nhiều lần khó chịu khi xử lý các case cache mặc định và thường tắt luôn để tránh bực mình, sau đó chuyển sang dùng thư viện như tanstack-query vô cùng xịn xò.

Caching của Route Handler

Khi fetch method GET được gọi, chúng ta sẽ không cần phải lo về việc nó chỉ được gọi một lần đầu tiên dẫn đến kết quả trả về không như mong muốn trong các lần cập nhật tiếp theo.

Client-side Router Caching

Trước kia khi bắn API thêm sửa một cái gì đó trên trang, mình có dùng router.push để chuyển hướng đến trang kết quả hoặc dùng thẻ Link. Tuy nhiên, mình không tìm thấy sản phẩm thêm mới đó nếu không gọi thêm router.refresh. Lý do chính là NextJS mặc định cache những trang tĩnh đã được build xong. Ở version lần này mình sẽ không cần phải làm vậy nữa, mặc định cache đã được gỡ bỏ rồi. Tuyệt vời luôn =)).

Tính Năng Mới: PPR (Partial Page Rendering)

Một tính năng thử nghiệm đáng chú ý khác trong NextJS 15 là PPR (Partial Page Rendering), giúp cải thiện hiệu suất tải trang bằng cách chỉ render một phần của trang thay vì toàn bộ. Thay vì reload toàn bộ các components trên một trang khi có sự thay đổi, PPR chỉ re-render các thành phần bị tác động, giúp tiết kiệm tài nguyên và giảm thiểu thời gian phản hồi.

Cách Hoạt Động của PPR

Với PPR, các phần trang được chia thành các phần nhỏ hơn, có thể cập nhật một cách độc lập dựa trên những thay đổi nhỏ mà không làm ảnh hưởng đến các thành phần khác trên cùng một trang. Điều này đặc biệt hữu ích cho các ứng dụng có nhiều thành phần tương tác, giúp tăng tốc độ phản hồi và nâng cao trải nghiệm người dùng.

Ưu Điểm của PPR

Tối ưu hóa tài nguyên: Giảm thiểu số lượng mã cần render lại, tránh render không cần thiết.
Cải thiện hiệu suất: Giảm thời gian tải trang khi có thay đổi nhỏ, đặc biệt hữu ích cho các ứng dụng có nhiều dữ liệu động.
Tương thích với các tính năng NextJS khác: PPR có thể kết hợp với các tính năng như getServerSideProps hoặc getStaticProps, giúp chúng ta xây dựng các ứng dụng mạnh mẽ và hiệu suất cao hơn.

Lưu Ý Khi Sử Dụng PPR

Vì tính năng PPR hiện đang trong giai đoạn thử nghiệm, NextJS khuyến cáo chỉ nên sử dụng nó trong môi trường phát triển hoặc thử nghiệm. Trước khi đưa vào production, hãy đảm bảo rằng PPR hoạt động ổn định và tương thích với toàn bộ ứng dụng của bạn.

Để kích hoạt PPR trong dự án của bạn, hãy tham khảo hướng dẫn chi tiết trên trang tài liệu chính thức của NextJS.

Một Số Thay Đổi Nhỏ Khác

Static Route Indicator: Có icon nhỏ dưới màn hình môi trường dev để dễ nhận biết router static và dynamic.
Sharp: Không cần phải run install để optimize nữa, tự động cài sẵn trong project.
next.config.ts: Cuối cùng thì cái chữ j nó cũng thành chữ t rồi, chắc là chơi thân với TypeScript hơn rồi đấy.
ESLint 9 Support: Hỗ trợ version 9 rồi nha, không biết có đấm nhau với prettier nữa không chứ mấy lần setup là hơi mệt =)).

Ý Kiến Của Mình

Kết thúc lại bài viết, mình sẽ nêu lên ý kiến riêng của cá nhân mình về lần cập nhật này.
Phiên bản lần này mình ấn tượng nhất là phần cache, ngoài ra nó cũng không có gì làm mình phải đáng lo sợ. Mình nghĩ, mình cũng như các lập trình viên frontend khác ngoài kia, đều có thể tiếp tục sử dụng nextjs14 một cách bình thường mà không nhất thiết cần phải lên ngay nextjs15 bởi có lẽ reactjs 19 vẫn chưa ra mắt hoàn toàn. Cũng không cần phải quá vội vàng update dự án vì vercel cũng có công cụ @next/codemode giúp chúng ta nâng cấp dự án một cách vô cùng dễ dàng. Chúng ta đều có thể chờ cho đến khi version mới nhất của react ra mắt chính thức để có thể yên tâm chạy trên production.
Ok, hi vọng rằng bài viết của mình có thể tóm tắt được thay cho mấy chục trang docs cập nhật của nextjs. Cảm ơn bạn đã đọc bài viết, chúc bạn một ngày tốt lành.

DEV Community