2023.02.15
Giới thiệu về NextJS – Phần 1
Tưởng Hồ Chí
Bạn đang muốn phát triển một ứng dụng nhanh chóng, bảo đảm tốt hiệu năng và hỗ trợ SEO? Nếu bạn là một tín đồ của ReactJS thì ngại gì không thử NextJS, một framework build từ core của ReactJS mà còn hỗ trợ thêm các tính năng hữu ích.
Trong bài viết này chúng ta cùng tìm hiểu Next JS là gì nhé.
NextJS là gì ?
NextJS là một framework React được phát triển dưới dạng open-source bởi Vercel cho phép tối ưu hóa hiệu năng, hỗ trợ SEO thông qua các tính năng Server Side Rendering (SSR), Static Site Generation (SSG), Client Side Rendering CSR, Incremental Static Rendering (ISR).
Khi nào nên dùng NextJS ?
Để biết khi nào cần dùng NextJS thay vì ReactJS, chúng ta hãy theo dõi bảng so sánh sau:
Cộng đồng người dùng NextJS: Mặc dù Next JS chỉ mới release lần đầu tiên 10/2016 nhưng số lượt fork, số star từ github cũng đã được một nửa của ReactJS, cho thấy framework này đang dần được phổ biến và sử dụng rộng rãi. Đồng thời NextJS được xây dựng từ core của ReactJS nên công đồng hỗ trợ cực kì đông đảo.
Rendering: NextJS có hỗ trợ đầy đủ Rendering hơn ReactJS, sẽ rất thuận lợi trong việc tối ưu hóa hiệu năng website, nhất là
Search Engine Optimization (SEO): Sử dụng Server Side Rendering render content từ phía server làm cho các trang web xếp hạng SEO tốt hơn. Do cơ chế đánh chỉ mục Google đang sử dụng thì tất cả nội dung HTML đã có ở phía server, nên công cụ tìm kiếm Google có thể yêu cầu, thu thập thông tin và đánh chỉ mục ngay lập tức.
(Đối với Client Side Rendering, HTML để lập chỉ mục chỉ được hiển thị khi content được Javascript hiển thị đầy đủ ở phía máy khách. Do đó, với cơ chế đánh chỉ mục mà Google hiện đang sử dụng, có thể mất từ vài giờ đến một tuần trước khi nội dung có thể được thu thập thông tin, lập chỉ mục và bắt đầu xếp hạng trong kết quả tìm kiếm.)
Next.js cũng cho phép bạn chỉnh sửa thẻ <head> của một trang web, điều mà bạn không thể thực hiện trong React. Thẻ <head> góp phần vào xếp hạng SEO của trang web.
Ưu nhược điểm
Ưu điểm:
- Ưu điểm chính của Next.js là hỗ trợ SSR tích hợp để tăng hiệu suất và SEO.
- Tận dụng mọi ưu điểm của React
- Đơn giản hóa routing
- Đặc biệt với các trang web như blog, Landing pages đơn giản chúng ta có thể dùng Static Site Generation để build ra file html tĩnh.
- Khởi tạo nhanh chóng
- Bảo mật dữ liệu
- Tăng trải nghiệm người dùng
- Có cộng đồng hỗ trợ mạnh mẽ nên tính cập nhật luôn liên tục, ít bị lạc hậu.
- Hỗ trợ quá trình phát triển sản phẩm diễn ra nhanh chóng
Nhược điểm:
- Là một framework cố định, sử dụng phương pháp, bộ công cụ cụ thể mà framework muốn bạn sử dụng để xây dựng ứng dụng.
- Một số tính năng chưa được hỗ trợ nhưng hầu hết cũng có thể kết hợp các package có sẵn của npm: Authentication (có thể dùng package như Next-Auth), Testing (có thể dùng PlayWright hoặc Cypress), quản lý state (có thể dùng Redux, Redux ToolKit).
Tổng kết
- Hy vọng phần giới thiệu sẽ mang lại cho bạn nhiều thông tin hữu ích.
- Ở phần tiếp theo chúng ta sẽ tìm hiểu thêm về cách tính năng nổi trội của NextJS nhé.
Các bài viết về NextJS :
Phần 1 : Giới thiệu về NextJS
Phần 2: Tính năng nổi bật NextJS
Phần 3: Build Blog đơn giản
