Trang này sẽ hướng dẫn cách thức hoạt động của Thành phần Máy chủ, thời điểm bạn có thể sử dụng chúng và các chiến lược kết xuất máy chủ khác nhau.
Lợi ích của việc Server Rendering
Có một số lợi ích khi thực hiện công việc kết xuất trên máy chủ, bao gồm:
- Lấy dữ liệu: Các thành phần máy chủ cho phép bạn di chuyển dữ liệu đang lấy đến máy chủ, gần hơn với nguồn dữ liệu của bạn. Điều này có thể cải thiện hiệu suất bằng cách giảm thời gian cần thiết để lấy dữ liệu cần thiết để kết xuất và số lượng yêu cầu mà máy khách cần thực hiện.
- Bảo mật: Các thành phần máy chủ cho phép bạn giữ dữ liệu và logic nhạy cảm trên máy chủ, chẳng hạn như mã thông báo và khóa API, mà không có nguy cơ tiết lộ chúng cho máy khách.
- Lưu trữ đệm: Bằng cách kết xuất trên máy chủ, kết quả có thể được lưu vào bộ nhớ đệm và sử dụng lại trong các yêu cầu tiếp theo và trên nhiều người dùng. Điều này có thể cải thiện hiệu suất và giảm chi phí bằng cách giảm lượng kết xuất và lấy dữ liệu được thực hiện trên mỗi yêu cầu.
- Hiệu suất: Các thành phần máy chủ cung cấp cho bạn các công cụ bổ sung để tối ưu hóa hiệu suất từ đường cơ sở. Ví dụ, nếu bạn bắt đầu với một ứng dụng bao gồm toàn bộ Thành phần máy khách, việc di chuyển các phần không tương tác của UI sang Thành phần máy chủ có thể giảm lượng JavaScript cần thiết ở phía máy khách. Điều này có lợi cho người dùng có mạng internet chậm hơn hoặc thiết bị yếu hơn vì trình duyệt có ít JavaScript phía máy khách hơn để tải xuống, phân tích và thực thi.
- Tải trang ban đầu và Vẽ nội dung đầu tiên (FCP): Trên máy chủ, chúng tôi có thể tạo HTML để cho phép người dùng xem trang ngay lập tức, mà không cần chờ máy khách tải xuống, phân tích và thực thi JavaScript cần thiết để hiển thị trang.
- Tối ưu hóa công cụ tìm kiếm và khả năng chia sẻ trên mạng xã hội: HTML đã hiển thị có thể được bot công cụ tìm kiếm sử dụng để lập chỉ mục cho các trang của bạn và bot mạng xã hội để tạo bản xem trước thẻ xã hội cho các trang của bạn.
- Truyền phát: Các thành phần máy chủ cho phép bạn chia nhỏ công việc hiển thị thành các phần và truyền phát chúng đến máy khách khi chúng đã sẵn sàng. Điều này cho phép người dùng xem các phần của trang sớm hơn mà không cần phải đợi toàn bộ trang được hiển thị trên máy chủ.
Sử dụng Server Components trong Next.js
Trên máy chủ, Next.js sử dụng API của React để sắp xếp quá trình kết xuất. Quá trình kết xuất được chia thành các phần: theo từng phân đoạn tuyến đường và ranh giới Suspense.
Mỗi phần được kết xuất theo hai bước:
React kết xuất các Thành phần Máy chủ thành định dạng dữ liệu đặc biệt được gọi là Tải trọng Thành phần Máy chủ React (RSC Payload).
Next.js sử dụng các lệnh JavaScript Tải trọng RSC và Thành phần Máy khách để kết xuất HTML trên máy chủ.
Sau đó, trên máy khách:
HTML được sử dụng để hiển thị ngay bản xem trước nhanh không tương tác của tuyến đường – chỉ dành cho lần tải trang ban đầu.
Tải trọng Thành phần Máy chủ React được sử dụng để điều hòa các cây Thành phần Máy khách và Máy chủ và cập nhật DOM.
Các lệnh JavaScript được sử dụng để cung cấp nước cho các Thành phần Máy khách và làm cho ứng dụng trở nên tương tác.
Chiến lược kết xuất Server
Có ba tập hợp con của kết xuất máy chủ: Tĩnh, Động và Phát trực tuyến.
Kết xuất tĩnh (Mặc định)
Với Kết xuất tĩnh, các tuyến được kết xuất tại thời điểm xây dựng hoặc ở chế độ nền sau khi xác thực lại dữ liệu. Kết quả được lưu vào bộ nhớ đệm và có thể được đẩy lên Mạng phân phối nội dung (CDN). Tối ưu hóa này cho phép bạn chia sẻ kết quả của công việc kết xuất giữa người dùng và các yêu cầu của máy chủ.
Kết xuất tĩnh hữu ích khi một tuyến có dữ liệu không được cá nhân hóa cho người dùng và có thể được biết tại thời điểm xây dựng, chẳng hạn như bài đăng trên blog tĩnh hoặc trang sản phẩm.
Kết xuất động (Dynamic Rendering)
Với Dynamic Rendering, các tuyến đường được hiển thị cho từng người dùng tại thời điểm yêu cầu.
Dynamic rendering hữu ích khi một tuyến đường có dữ liệu được cá nhân hóa cho người dùng hoặc có thông tin chỉ có thể biết tại thời điểm yêu cầu, chẳng hạn như cookie hoặc tham số tìm kiếm của URL.
Trong hầu hết các trang web, các tuyến đường không hoàn toàn tĩnh hoặc hoàn toàn động – đó là một quang phổ. Ví dụ: bạn có thể có một trang thương mại điện tử sử dụng dữ liệu sản phẩm được lưu trong bộ nhớ đệm được xác thực lại theo khoảng thời gian, nhưng cũng có dữ liệu khách hàng được cá nhân hóa, không được lưu trong bộ nhớ đệm.
Trong Next.js, bạn có thể có các tuyến đường được kết xuất động có cả dữ liệu được lưu trong bộ nhớ đệm và không được lưu trong bộ nhớ đệm. Điều này là do RSC Payload và dữ liệu được lưu trong bộ nhớ đệm riêng biệt. Điều này cho phép bạn chọn kết xuất động mà không phải lo lắng về tác động đến hiệu suất của việc truy xuất tất cả dữ liệu tại thời điểm yêu cầu.
Tìm hiểu thêm về bộ nhớ đệm toàn tuyến và Bộ nhớ đệm dữ liệu.
Chuyển sang kết xuất động
Trong quá trình render, nếu phát hiện ra một hàm động hoặc yêu cầu dữ liệu chưa được lưu trong bộ nhớ đệm, Next.js sẽ chuyển sang render động toàn bộ tuyến đường. Bảng này tóm tắt cách các hàm động và bộ nhớ đệm dữ liệu ảnh hưởng đến việc một tuyến đường được render tĩnh hay động:
| Dynamic Functions | Data | Route |
|---|---|---|
| No | Cached | Kết xuất tĩnh |
| Yes | Cached | Kết xuất động |
| No | Not Cached | Kết xuất động |
| Yes | Not Cached | Kết xuất động |
Trong bảng trên, để một tuyến đường hoàn toàn tĩnh, tất cả dữ liệu phải được lưu trong bộ nhớ đệm. Tuy nhiên, bạn có thể có một tuyến đường được kết xuất động sử dụng cả dữ liệu được lưu trong bộ nhớ đệm và không được lưu trong bộ nhớ đệm.
Là một nhà phát triển, bạn không cần phải lựa chọn giữa kết xuất tĩnh và kết xuất động vì Next.js sẽ tự động chọn chiến lược kết xuất tốt nhất cho từng tuyến đường dựa trên các tính năng và API được sử dụng. Thay vào đó, bạn chọn thời điểm lưu trong bộ nhớ đệm hoặc xác thực lại dữ liệu cụ thể và bạn có thể chọn phát trực tuyến các phần của UI.
Hàm động
Các hàm động dựa trên thông tin chỉ có thể biết được tại thời điểm yêu cầu như cookie của người dùng, tiêu đề yêu cầu hiện tại hoặc tham số tìm kiếm của URL. Trong Next.js, các API động này là:
Streaming
Streaming cho phép bạn render UI dần dần từ máy chủ. Công việc được chia thành các phần và stream đến máy khách khi nó sẵn sàng. Điều này cho phép người dùng xem các phần của trang ngay lập tức, trước khi toàn bộ nội dung kết thúc render.
Streaming được tích hợp sẵn trong Next.js App Router theo mặc định. Điều này giúp cải thiện cả hiệu suất tải trang ban đầu cũng như UI phụ thuộc vào việc truy xuất dữ liệu chậm hơn, điều này sẽ chặn việc hiển thị toàn bộ tuyến đường. Ví dụ: đánh giá trên trang sản phẩm.
Bạn có thể bắt đầu streaming các phân đoạn tuyến đường bằng cách sử dụng loading.js và các thành phần UI với React Suspense. Xem phần Loading UI và Streaming để biết thêm thông tin.
bạn có thể đọc thêm tại đây
By
