Xem nguồn để xác nhận SSR đang hoạt động trong Next.js

Cách kiểm tra xem SSR có hoạt động trong ứng dụng Next.js của bạn hay không

Bạn đã thiết lập ứng dụng Next.js mới của mình chưa? Tuyệt quá!

Bây giờ chúng ta hãy kiểm tra ứng dụng đang hoạt động như chúng ta mong đợi nó hoạt động. Đó là một ứng dụng Next.js, vì vậy nó phảiphía máy chủ kết xuất.

Đó là một trong những điểm bán hàng chính của Next.js: nếu chúng tôi tạo một trang web bằng Next.js, các trang của trang web sẽ được hiển thị trên máy chủ, cung cấp HTML cho trình duyệt.

Điều này có 3 lợi ích chính:

  • Khách hàng không cần phải khởi tạo React để hiển thị, điều này làm cho trang web đến với người dùng của bạn nhanh hơn.
  • Các công cụ tìm kiếm sẽ lập chỉ mục các trang mà không cần chạy JavaScript phía máy khách. Một điều gì đó mà Google đã bắt đầu làm, nhưng công khai thừa nhận là một quá trình chậm hơn (và bạn nên giúp đỡ Google càng nhiều càng tốt, nếu bạn muốn xếp hạng tốt.
  • Bạn có thể có các thẻ meta truyền thông xã hội, hữu ích để thêm hình ảnh xem trước, tùy chỉnh tiêu đề và mô tả cho bất kỳ trang nào của bạn được chia sẻ trên Facebook, Twitter, v.v.

Hãy xem nguồn của ứng dụng. Sử dụng Chrome, bạn có thể nhấp chuột phải vào bất kỳ đâu trong trang và nhấnXem nguồn trang.

Nếu bạn xem nguồn của trang, bạn sẽ thấy<div><h1>Airbnb clone</h1></div>đoạn mã trong HTMLbody, cùng với một loạt các tệp JavaScript - gói ứng dụng.

Chúng tôi không cần thiết lập bất cứ thứ gì, SSR (hiển thị phía máy chủ) đã hoạt động cho chúng tôi.

Ứng dụng React sẽ được khởi chạy trên máy khách và sẽ là ứng dụng cung cấp năng lượng cho các tương tác như nhấp vào liên kết, sử dụng kết xuất phía máy khách. Nhưng tải lại một trang sẽ tải lại trang đó từ máy chủ. Và việc sử dụng Next.js sẽ không có sự khác biệt nào về kết quả bên trong trình duyệt - một trang do máy chủ hiển thị phải giống hệt như một trang do máy khách kết xuất.

Tải xuống miễn phí của tôiSổ tay Next.js


Thêm các bài hướng dẫn tiếp theo: