Next.js vs Create-React-App

Xin chào các bạn, nếu các bạn đang muốn build 1 dự án, đang phân vân về việc nên sử dụng Next.js hay React, 1 framework và 1 library đang làm mưa làm gió hiện nay thì bài viết này dành cho bạn. Trong blog này, mình muốn thảo luận về sự khác biêt giữa hai công nghệ này. Thứ mà mình đã có kinh nghiệm khi làm việc tại GMO-Z.com Vietnam Lab Center.

1. Tổng quan

Chắc các bạn cũng đã biết, React ra đời từ năm 2013 và được phát triển bởi Facebook. Còn Next.js bản phát hành đầu tiên là vào năm 2016 dưới dạng open source. Có lẽ mọi người sẽ thấy việc so sánh ở đây là khá khập khiễng. Chả khác gì đem so sánh một hộp đầy đủ dụng cụ với một cái búa cả. Nhưng mình vẫn đem ra so sánh để các bạn có cái nhìn tổng quan và chọn công nghệ phù hợp với mục đích dự án của mình. Để so sánh gần hơn thì mình sẽ so sánh Create-React-App (CRA) với Next.js. CRA là một bộ khung thô sơ, nó ẩn các dependencies configurations qua đó giúp tăng quá trình phát triển mà developer không cần phải lo lắng về việc đóng gói, server, và các prefix tương thích với các trình duyệt. còn Next.js thì nó là 1 framework dựa trên React rồi và thêm vào đó cả Node.js nữa. Nó còn có nhiều các chức năng tân tiến hơn. Cùng đi sâu hơn nhé.

2.Chi tiết hơn

2.1. Creat-react-app

Thời điểm mình viết bài viết này thì Create-react-app đã có ☆ 92.5k trên Github. Như Đã đề cập ở trên, CRA ẩn configurations khỏi các lập trình viên nên việc họ cần làm chỉ là code, giúp cho việc phát triển nhanh hơn. Đây vừa là ưu điểm cũng chính là một nhược điểm chí mạng :D. Nhược điểm chính là developer không có cách nào đơn giản, trực tiếp mà có thể thay đổi config của nó. CRA kiểu: "mày phải hài lòng với những gì tao có thôi". Tất nhiên vẫn có giải pháp thôi. Nó vẫn có 1 thủ thuật gọi là ejecting (các bạn có thể tìm hiểu thêm trên Google). Hiểu đơn giản thì giống như CRA đang đóng gói lại tất cả configuration thành 1 cục, còn ejecting thì là bạn giản nén nó ra thành các file mà bạn nhìn thấy được và bạn can thiệp vào core concept của nó. Tuy nhiên cách này thì lại đi ngược lại khởi nguyên và mục đích của CRA và mình khuyến khích các bạn không nên làm nó nếu dùng CRA. (Các bạn có thể tham khảo thêm: https://spin.atomicobject.com/2020/01/28/eject-create-react-app-drawbacks/)

CRA được phát triển với khả năng khởi động và phản hồi nhanh và nó không hỗ trợ những thứ như SSR (Server Side Rendering). Mọi thứ bạn thực hiện với CRA chỉ là hiển thị phía client-side mà thôi. Có nghĩa là??? -> Tất cả những gì trang web của bạn muốn truyền tải thì nó không được render ra trong lúc được build up. Khi bạn tải trang web xong rồi là lúc mà nội dung JS mà bạn code mới được nạp vào trang web và đặt các phần tử HTML vào vị trí của chúng (như code của bạn). Ngược lại, SSR nội dung của đã được hoàn thiện trên máy chủ trong lúc build rồi trước khi đến với phía client-side. Điều này rất hữu ích khi tạo các website tối ưu SEO vì trình thu thập thông tin của công cụ tìm kiếm như Google dễ dàng và nhanh hơn trong việc lập chỉ mục nội dung trang web build từ server-side.

Việc xây dựng routes cho trang web sử dụng CRA được thực hiện bằng cách cài đặt thư viện react-router và sử dụng API của chúng. react-router đã được phát triển khá lâu rồi song song với react, API đã khá hoàn thiện và linh hoạt. Điều mình thấy thích nhất thư viện này đó là nó khá dễ sử dụng, không cần thiết lập phức tạp và tài liệu rõ ràng. :D

Để triển khai lên môi trường product, CRA khá đơn giản, bạn chạy lệnh yarn build để build 1 bản code của bạn, sau đó dùng ở bất cứ server nào bằng cách trỏ tới file index.html .

2.2. Next.js

Next.js sinh sau đẻ muộn nhưng cũng không kém cạnh với ☆ 78.8k. :D

Được sở hữu và duy trì bởi Vercel, Next.js rất nhanh chóng trở nên phổ biến. Lý do chính Next.js trở nên phổ biến nhanh như vậy là nó hỗ trợ SSR cho React, điều mà mọi developer mong muốn mà CRA không làm được. Khi phát triển các trang web thương mại điện tử hoặc các trang web cần tương tác nhiều với khách hàng, bạn muốn dữ liệu vừa được load nhanh với khách hàng và được công cụ tìm kiếm index nhanh, Next.js sẽ giúp bạn.

Không chỉ có thế, bên cạnh SSR, nếu trường hợp web của bạn có nội dung tĩnh, chẳng hạn như blog, Next.js cũng hỗ trợ tốt. Bạn code như bình thường và sau đó tại thời điểm build, HTML được tạo ra tốc độ nhanh. Tính năng này gọi là Static Site Generation (SSG). 2 tính năg này cung cấp cho người dùng khả năng tạo trước nội dung trên các page, các trang web được tạo rất nhanh. Theo thống kê này, so với CRA, tốc độ của nó nhanh hơn rất nhiều, có thể lên tới 87% lận.

Hệ thống router của Next.js được xây dựng trong framework cuả nó và nằm trong thư mục pages. Bạn tạo các route bằng việc đặt tên thư mục và file. Ví dụ: nếu muốn tạo route /my-page/items bạn chỉ cần tạo theo đường dẫn pages/my-page/items.js. Đơn giản đúng không nào :D Tuy nhiên, cũng có nhược điểm đó là do hệ thống router của nó đã được build trong concept rồi nên việc bạn muốn sử dụng các thư viện router khác sẽ không được flexible lắm. Tuy nhiên, mình cũng thấy hệ thống router của nó cũng khá đầy đủ và dễ dùng rồi.

Về phần deploy, Vercel khuyến khích developer sử dụng server và host của họ, nhưng cơ bản thì bạn có thể lưu trữ ở bất kỳ đâu có server Node.js. Khi chạy yarn build, Next.js sẽ build và tối ưu hóa các tệp và tạo một thư mục .next/ chứa các tệp bạn cần triển khai trên server Node.js. Chạy yarn start trên production server, và trang web sẵn sàng. ^^

Ngoài ra thì... Nếu bạn không muốn chạy trang web của mình trên máy chủ Node.js, bạn cũng có thể 'xuất' dự án Next.js của mình thành các tệp HTML, sau đó có thể chạy độc lập, ở bất kỳ đâu bạn muốn. Với tùy chọn xuất này, bạn về cơ bản có thể làm điều tương tự như khi bạn triển khai trên máy chủ Node.js, tuy nhiên tài liệu Next.js nói rằng:

next export is intended for scenarios where none of your pages have server-side or incremental data requirements (though statically-rendered pages can still fetch data on the client side).

Nói cách khác thì dùng theo kiểu này thì mất hết các tính năng mà Next.js tạo ra cho lập trình viên. :D Bạn vẫn nên dùng máy chủ Node.js, trừ khi bạn có 1 trường hợp nào đấy siêu ngoại lệ để sử dụng Next.js deploy lên các máy khác.

3. Tổng kết

Hello, nếu bạn đọc hết được cái bài blog toàn chữ này của mình và nó đọng lại được gì đó thì mình rất cảm kích đấy. :D. Về cơ bản, mình tóm lược lại sau khi phân tích:

Bootstrap web nhanh, nhẹ mà không cần lo lắng về config và build bên phía server -> CRA wins!
Build web (E-commerce,...) mà cần SEO tốt -> Next.js wins!
Routings tốt, dễ sử dụng, dễ flexible hơn -> CRA wins!
Tốc độ, Performance -> Next.js wins!

Tất nhiên, những đánh giá trên chỉ là kinh nghiệm và ý kiến cá nhân của mình. Còn hàng tá các vấn đề mà có thể đem ra so sánh nữa nên tuỳ vào mục đích dự án, web của bạn với mục đích gì thì bạn có thể cân nhắc sử dụng hợp lý. Cảm ơn các bạn đã theo dõi!