NextJS 12 Bản cập nhật thay đổi cuộc chơi !

Tram Ho

Nextjs là 1 Framework cực kỳ mạnh mẽ khi nó support cả 3 cơ chế rendering là SSR, CSR và SSG điều mà thường chỉ có ở trong 1 framework. Bản thân vốn đã mạnh mẽ sẵn rồi nhưng trong ngày 26/10 vừa qua Next.js đã update lên version 12, Next.js 12 là bản phát hành lớn nhất từ trước đến nay. Đây cũng có thể coi 1 bước tiến lớn để Nextjs có thể bước tiếp tham vọng của mình là biến Nextjs không chỉ đơn thuần là 1full-stack web framework mà trở thành một web SDK xịn xò. Vậy trong bản cập nhật này họ đã có những cải tiến lớn như thế nào thì cùng mình tìm hiểu nhé.

Nội dung chính

1. Cải thiện tốc độ build và refresh sử dụng Rust complier.

Trong các phiên bản trước đó thì Nextjs sử dụng Bable (là 1 JavaScript compiler và chuỗi công cụ chủ yếu được sử dụng để chuyển đổi mã ECMAScript 2015+ thành phiên bản JavaScript tương thích ngược trong các trình duyệt hoặc môi trường hiện tại và cũ hơn) và nhược điểm của nó là làm cho thời gian compile lâu hơn, sử dụng nhiều dependencies hơn <dev dependencies 269 packages >, … đây là 1 trong những điều làm cho thời gian compile của Nextjs mất khá nhiều tài nguyên và thời gian. Do đó ở version 12 này thì Nextjs đã quyết định không sử dụng Bable nữa mà thay vào đó họ sử dụng Rust compiler được build on SWC (swc là một đối thủ cạnh tranh mới của Babel. Nó được viết bằng Rust và nhanh hơn tới 20 lần) nhờ sử dụng Rust compiler thì tốc độ build và refresh của Nextjs đã được cải thiện đáng kể:

Tóm lại:

  1. Cải thiện tốc độ build codebase lớn: Họ cũng đã thử nghiệm bằng cách build 1 trong những repo Nextjs lớn nhất trên thế giới thì thời gian khi sử dụng Rust compiler thì thời gian build mất khoảng 2mins trong khi đó nếu sử dụng Bable thì thời gian build lên đến 3-4mins
  2. Cải thiện khả năng quan sát hiệu năng: Nextjs có xuất ra cả thời gian refresh ở cả 2 phía client và server được cải thiện rõ ràng bao gồm cả việc compile các modules và file đã được compile.Tức là chúng ta có thể xem được thời gian compile mỗi lần hot reload
  3. Cải tiến về webpack : Thực hiện nhiều cải tiến với webpack bao gồm tối ưu hóa khả năng fast refresh.

2. Build in Middleware (BETA)

Trước kia khi chưa có build in middleware thì chúng ra thường sử dụng redux saga, hoặc sử dụng 1 vài cách khác như sử dụng kết hợp context, React HOC và store redux. Các cách trên đều rất ok nhưng cũng có 1 số nhược điểm như mất thời gian code hơn, cần hiểu biết rộng hơn để có thể build được,…Vậy cùng thử tìm hiểu xem build in middleware (BETA) của Nextjs có điểm đặc biệt gì đáng dùng hơn không nhé.

Từ Nextjs 12 trở đi chúng ta có thể đơn giản tạo ra 1 middleware cho toàn bộ các pages bằng cách sử dụng 1 file _middleware.ts ở trong thư mục pages cùng cấp với file index và _app.js. Hoặc nếu bạn muốn tạo middleware riêng biệt cho từng nested-route thì b chỉ cần để _middleware ở cùng cấp với route mà bạn muốn sử dụng middleware là ok. Thật đơn giản đúng k nào

Trong trường hợp bạn có những sub-directories hoặc nested-route thì Middleware sẽ chạy theo hướng top-down. Ví dụ bạn có cấu trúc route như sau:

Thì đầu tiên phần middleware của route /about sẽ được chạy trước sau đó mới đến phần middleware của /about/teams sẽ chạy sau.

Chia sẻ bài viết ngay