🚀 Xin chào mọi người, lại là Slao đây!

Hôm nay, mình sẽ giới thiệu về một chiến lược mới mang tên PPR (Partial Prerendering) vừa được ra mắt của Next.js. Cùng tìm hiểu xem nó hoạt động như thế nào nhé!

🔎 Vấn Đề Của Next.js Hiện Tại

Trong Next.js, mỗi tuyến đường có thể là:

Hoàn toàn tĩnh (Static): Tải nhanh do HTML được tạo sẵn khi build.
Hoàn toàn động (Dynamic): Chậm hơn do cần fetch dữ liệu từ server.

👉 Vấn đề xảy ra:

Nếu chỉ có một thành phần động (ví dụ như giỏ hàng), toàn bộ trang sẽ bị đánh dấu là động. Điều này khiến thời gian tải trang lâu hơn, dù phần lớn nội dung là tĩnh.

🧱 Giải Pháp: Partial Prerendering (PPR)

PPR giải quyết vấn đề này bằng cách:

Cho phép bạn kết hợp các phần tĩnh và động trong cùng một tuyến đường.
Tại thời điểm build, Next.js sẽ tạo HTML tĩnh cho các phần tĩnh.
Các phần động được bao bọc trong ranh giới React Suspense.
Nội dung tĩnh hiển thị ngay lập tức, trong khi các phần động được tải nền.

🛒 Ví Dụ Thực Tế

Hãy tưởng tượng một trang sản phẩm thương mại điện tử:

Phần Tĩnh:
- Điều hướng
- Hình ảnh sản phẩm
- Mô tả sản phẩm
Phần Động:
- Giỏ hàng
- Đề xuất sản phẩm được cá nhân hóa

❗ Không Có PPR

Mọi thứ đều chờ dữ liệu động tải xong.
Người dùng thấy trang trống trong thời gian dài.

✅ Với PPR

Nội dung tĩnh xuất hiện ngay lập tức.
Giỏ hàng và đề xuất được tải nền và hiển thị khi sẵn sàng.
Trải nghiệm người dùng tốt hơn.

🌟 Lợi Ích Của PPR

🚀 Tải trang nhanh hơn: Phần tĩnh được hiển thị ngay lập tức.
😊 Trải nghiệm tốt hơn: Người dùng không phải chờ đợi dữ liệu động.
⚡ Tăng hiệu suất: Không có thác nước, các phần động tải song song.
🌍 Tối ưu CDN: Phần tĩnh được lưu trên CDN, giảm thời gian tải trang.

🧑‍💻 Phân Tích Phần Tĩnh Và Động

Phần Tĩnh

Được lưu trữ hoàn toàn trên CDN.
Phân phối toàn cầu, không cần gọi đến máy chủ.
Hiển thị ngay lập tức cho người dùng.

Phần Động

Không thể lưu trữ đệm vì cần dữ liệu mới.
Phải được render trên máy chủ.
Được truyền phát sau khi phần tĩnh đã hiển thị.

🛠 Cách Hoạt Động Của PPR

Người dùng yêu cầu trang.
CDN ngay lập tức gửi shell tĩnh (bao gồm thanh điều hướng, bố cục, thông tin sản phẩm).
Song song, máy chủ bắt đầu tạo nội dung động.
Nội dung động được truyền phát và hiển thị mà không chặn các phần tĩnh.

🧑‍💻 Cách sử dụng

Follow Rendering: Partial Prerendering | Next.js

Install Next.js canary version
Enable in config

// next.config.js
{
  experimental: {
    ppr: "incremental";
  }
}

Đánh dấu các components động với Suspense

}>
   {/* Dynamic component */}

🚀 Tóm Lại

Partial Prerendering (PPR) là một giải pháp tối ưu giúp kết hợp giữa nội dung tĩnh và động.
Nó giúp giảm thời gian tải trang và cải thiện trải nghiệm người dùng.
PPR cũng tối ưu việc sử dụng CDN và tăng hiệu suất tổng thể.

Nếu bạn đang xây dựng một trang web có cả nội dung tĩnh và động, PPR trong Next.js chắc chắn sẽ là một công cụ hữu ích!

Chúc bạn thành công! 🚀

Partial Prerendering in Next.js