Giới thiệu về Điều hướng trong NextJS

Trong phần này của giáo trình, chúng ta sẽ nói về cách hoạt động của liên kết trong NextJS.

Để bắt đầu, hãy cùng thảo luận xem điều gì đặc biệt ở các liên kết. Chúng ta sẽ xem xét chúng trong các cách tiếp cận khác nhau để tạo website.

Website bằng React

Giả sử bạn có một website bằng React. Như đã biết, React đại diện cho một SPA - ứng dụng trang đơn, trong đó người dùng luôn ở lại trên một trang duy nhất. Bạn có thể kết nối React Router và người dùng sẽ nghĩ rằng họ đang điều hướng qua các trang khác nhau, trong khi thực chất vẫn ở lại trên một file duy nhất.

Trong trường hợp này, người dùng sẽ nhấp chuột vào các liên kết, họ sẽ có cảm giác như đang chuyển đến một trang khác, nhưng trang website trong trình duyệt sẽ không tải lại - React sẽ tự động tạo ra nội dung mà người dùng thấy trên màn hình.

Trong sơ đồ này, người dùng nhận được bố cục của website khi lần đầu truy cập trang, và sau đó các phần của website chỉ đơn giản thay đổi thông qua JavaScript. Đồng thời, website có thể yêu cầu dữ liệu từ máy chủ thông qua AJAX.

Cách tiếp cận này làm giảm tải cho hosting (tài nguyên của nó tốn tiền của chúng ta), cũng như tải cho kênh internet của người dùng.

Nhưng cách tiếp cận này có một nhược điểm - vấn đề với SEO. Mặc dù website có một tập hợp các liên kết, và trên thanh địa chỉ có gì đó thay đổi, và thậm chí bạn có thể gửi liên kết đến một trang cụ thể của website qua trình nhắn tin. Tuy nhiên, nội dung của trang được tạo ra động trên client và các công cụ tìm kiếm không có khả năng xử lý điều đó. Vì vậy, một website như vậy sẽ không được xếp hạng.

Không phải tất cả các website đều được thiết kế để thúc đẩy thứ hạng trong công cụ tìm kiếm. Và nếu website của bạn không nhằm mục đích đó, thì sơ đồ này hoàn toàn phù hợp với bạn.

Website bằng Backend

Giả sử website của bạn được tạo bằng một trong các ngôn ngữ backend. Ví dụ: bằng PHP.

Trong trường hợp này, khi người dùng nhấp vào các liên kết, trang website sẽ tải lại toàn bộ mỗi lần.

Vấn đề là một phần đáng kể của trang đã có sẵn cho người dùng. Bởi vì, như bạn đã biết, trên trang thường chỉ có nội dung và siêu dữ liệu thay đổi, còn tất cả những thứ khác vẫn giữ nguyên.

Tại sao chúng ta phải tải xuống những phần còn lại, nếu chỉ có nội dung thay đổi? Điều này tạo ra một tải nặng hơn cho máy chủ và kênh internet.

Còn một vấn đề nữa. Giả sử trên trang mà chúng ta nhận được, trong nội dung có một danh sách sản phẩm, như trong cửa hàng trực tuyến. Rõ ràng là mỗi sản phẩm có cùng một bố cục giống nhau. Sẽ tối ưu hơn nếu chỉ tải xuống dữ liệu của sản phẩm và mẫu hiển thị sản phẩm. Và sau đó trên client, hiển thị từng sản phẩm trong mẫu đó. Nhưng chúng ta lại tải xuống các sản phẩm cùng với bố cục lặp lại của sản phẩm.

Tóm lại, nếu chúng ta có một website bằng backend thuần túy, chúng ta đang truyền qua mạng nhiều dữ liệu thừa.

Tuy nhiên, trong trường hợp này, chúng ta không gặp vấn đề với SEO. Theo URL được yêu cầu, nội dung tĩnh luôn được trả về, dễ hiểu cho các công cụ tìm kiếm.

Website bằng NextJS

NextJS kết hợp cả hai cách tiếp cận. Khi người dùng nhập URL trực tiếp vào thanh địa chỉ, thì nội dung tĩnh của trang sẽ được trả về cho họ.

Nhưng khi người dùng bắt đầu nhấp chuột vào các liên kết trên website của chúng ta, thì trang website sẽ không được làm mới hoàn toàn, mà thông qua AJAX, dữ liệu cần thiết cho người dùng sẽ được tải xuống.

Khi công cụ tìm kiếm đi qua website của chúng ta, nó sẽ thấy nội dung tĩnh mà nó cần. Còn khi người dùng điều hướng trên website của chúng ta, website của chúng ta bắt đầu hoạt động giống như một SPA.

Và, quan trọng nhất, NextJS thực hiện tất cả điều này một cách tự động! Chúng ta không cần phải lo lắng về nó - nó sẽ tự làm tất cả. Tuyệt vời!

Trong các bài học tiếp theo, chúng ta sẽ tìm hiểu, làm thế nào để NextJS hoạt động như đã mô tả.