Nextjs là gì?

Theo tài liệu chính thức, Next.js là một khung React linh hoạt cung cấp cho bạn các khối xây dựng để tạo các ứng dụng web nhanh.

Tại sao lại là Nextjs?

Nhiều kĩ thuật render

Server Side Rendering là kỹ thuật khi bạn muốn lấy dữ liệu mới từ server, client sẽ chuyển các thông số cần thiết cho server và lấy toàn bộ html từ server. Với phương pháp này, ứng dụng của chúng tôi không phản ứng. Khi bạn tìm kiếm thứ gì đó, lọc thứ gì đó, nhấp vào thứ gì đó, nó sẽ tải lại toàn bộ html. Sẽ không thân thiện lắm khi bạn có nhiều dữ liệu và người dùng cần dành thời gian để nhìn vào màn hình trống trong khi trang web của bạn đang tải dữ liệu. Nhưng nó tốt cho SEO vì nó luôn trả về html và google bot biết trang web của bạn nói về cái gì.

Client Side Rendering là kỹ thuật khi bạn truyền param cho server từ client, bạn sẽ nhận dữ liệu dạng json từ server. Vì lý do đó, bạn sẽ tiết kiệm được băng thông, trang của bạn sẽ tải nhanh hơn và phản ứng nhanh hơn. Ngày nay, các framework tốt như React, Vue, Angular làm những điều này rất tốt. Nó cũng xử lý hoặc ít nhất, cung cấp cho bạn một công cụ hoặc một bộ chuyển mã hướng dẫn rõ ràng để hoạt động với trình duyệt cũ, gói, thu nhỏ, chia tách. Nó sẽ làm cho ứng dụng của bạn nhanh hơn và tương thích hơn. Tuy nhiên, nhược điểm lớn của phương pháp này là khó SEO. Tại sao? Khi bạn tải một trang, trong trường hợp React, bạn chỉ có một phần tử html với id là root, sau đó React sẽ xử lý để hiển thị phần còn lại. Và google bot chỉ thấy phần tử html trước khi React render phần còn lại nên nó chỉ thấy trang của bạn có phần tử html với id là root. Vì lý do đó, nó không biết trang web của bạn nói về cái gì và hạ thấp thứ hạng trang của bạn.

Tạo trang tĩnh là kỹ thuật tạo tệp html trong thời gian xây dựng. Ví dụ: bạn hoàn thành triển khai trang giới thiệu của mình, bạn xây dựng dự án của mình, nó sẽ tạo tệp html của trang giới thiệu và lưu trữ trong dự án của bạn. Vì vậy, khi người dùng muốn xem trang giới thiệu của bạn, trang web sẽ trả về tệp đó thay vì gọi dữ liệu từ máy chủ. Sau đó, nó sẽ nhanh hơn nhiều. Sẽ rất tốt nếu bạn không có nhiều thay đổi cho trang của mình. Như about page, login page, landing page,… bạn sẽ không thường xuyên thay đổi hoặc không thường xuyên có dữ liệu mới nên những trang này dùng SSG rất tốt.

Thông thường, bạn không có tất cả các kỹ thuật này trong ứng dụng của mình vì không có khung nào hỗ trợ tất cả các kỹ thuật kết xuất này cho đến Nextjs. Trước Nextjs, nếu bạn muốn SSR, bạn có thể sử dụng PHP thuần túy, Laravel + Blade hoặc Symfony + Twig. Nếu bạn muốn CSR, chắc chắn hãy sử dụng React, Vue hoặc Angular và SSG sẽ là nơi bạn muốn sử dụng gatsby. Trong Nextjs, bạn có thể chọn kỹ thuật kết xuất mà mình muốn. Do đó, bạn có thể có trang A với SSR, trang B với CSR, trang C với SSG. Làm thế nào là mát mẻ đó?

Hiệu suất

Để tăng tốc trang web của bạn nhanh hơn, bạn cần quan tâm đến nhiều thứ như tách mã, thu nhỏ tệp, tối ưu hóa hình ảnh, cách lấy nội dung và nhiều thứ khác. Rất may, với Nextjs, bạn không cần quan tâm nhiều đến điều này. Nếu bạn sử dụng đúng thành phần do Nextjs cung cấp, nó sẽ thực hiện mọi công việc nặng nhọc cho bạn. Ví dụ nhỏ là khi bạn có một hình ảnh trên trang web của mình, bạn cần quan tâm đến 2 điều cơ bản. Trước hết, bạn cần có kích thước khác nhau của hình ảnh đó cho chế độ xem khác nhau. Thứ hai, bạn muốn trang của mình chỉ tải hình ảnh đó khi người dùng ở gần nó, vì vậy bạn sẽ có trang rất dài và tất nhiên, bạn không muốn tải hình ảnh ở cuối trang mà người dùng không nhìn thấy nó khi trang được tải. Khi người dùng cuộn xuống gần cuối, hình ảnh đó sẽ được tải. Do đó, để giải quyết hai vấn đề này, bạn cần thêm srcset và áp dụng tải chậm cho hình ảnh của mình. Với thành phần đơn giản Image, nó tự động xử lý hai việc này.

Routing

Trong Nextjs, nó route dựa trên tệp. Theo tôi, nó thân thiện hơn khi route dựa trên tệp. Trong trường hợp tôi muốn tìm thành phần cho route /posts/, tôi có thể dễ dàng biết rằng tôi cần vào tệp chỉ mục trong thư mục bài viết. Không cần phải xem component nào được sử dụng cho route đó.

SEO

Nextjs cung cấp thành phần Head. Với thành phần này, bạn luôn có thể thêm mô tả, tiêu đề, thẻ meta trên tiêu đề trong Nextjs. Vì lý do đó, nó sẽ tốt hơn cho SEO.

Phần kết luận

Đó là phần giới thiệu ngắn về nextjs. Tóm lại, nó cung cấp cho chúng tôi nhiều cách để hiển thị trang, giúp chúng tôi cải thiện hiệu suất, định tuyến dựa trên tệp, cung cấp cho chúng tôi cách SEO và hơn thế nữa.