🫢pre-rendering,ssg-ssr, dựng hình trước,Sử dụng Static Generation so với Server-side Rendering

Hai hình thức dựng hình trước (pre-rendering)

Ngày 14 tháng 3 năm 2023

Next.js có hai dạng pre-rendering: Static Generation và Server-side Rendering . Sự khác biệt nằm ở thời điểm nó tạo HTML cho một trang.

• Static Generation là phương pháp dựng trước tạo ra HTML tại thời điểm dựng . HTML dựng trước sau đó được sử dụng lại trên mỗi yêu cầu.

• Kết xuất phía máy chủ là phương pháp kết xuất trước tạo ra HTML cho mỗi yêu cầu .

Điều quan trọng là Next.js cho phép bạn chọn biểu mẫu dựng trước nào để sử dụng cho từng trang. Bạn có thể tạo ứng dụng Next.js "lai" bằng cách sử dụng Static Generation cho hầu hết các trang và sử dụng Server-side Rendering cho các trang khác.

Khi nào sử dụng Static Generation so với Server-side Rendering

Ngày 17 tháng 3 năm 2023

Chúng tôi khuyên bạn nên sử dụng Static Generation (có hoặc không có dữ liệu) bất cứ khi nào có thể vì trang của bạn có thể được xây dựng một lần và phục vụ bởi CDN, giúp trang nhanh hơn nhiều so với việc để máy chủ hiển thị trang theo mọi yêu cầu.

Bạn có thể sử dụng Static Generation cho nhiều loại trang, bao gồm:

• Các trang tiếp thị

• Bài đăng trên blog

• Danh sách sản phẩm thương mại điện tử

• Trợ giúp và tài liệu

Bạn nên tự hỏi: "Tôi có thể hiển thị trước trang này trước khi người dùng yêu cầu không?" Nếu câu trả lời là có, thì bạn nên chọn Tạo tĩnh.

Mặt khác, Static Generation không phải là ý tưởng hay nếu bạn không thể dựng trước trang trước khi người dùng yêu cầu. Có thể trang của bạn hiển thị dữ liệu được cập nhật thường xuyên và nội dung trang thay đổi theo mỗi yêu cầu.

Trong trường hợp đó, bạn có thể sử dụng Server-Side Rendering . Nó sẽ chậm hơn, nhưng trang được dựng sẵn sẽ luôn được cập nhật. Hoặc bạn có thể bỏ qua dựng sẵn và sử dụng JavaScript phía máy khách để điền dữ liệu.