Các khái niệm lập trình Front end CSR vs SSR vs SSG vs ISR and PPR

Các chiến lược rendering của Next.js: CSR, SSR, SSG, ISR và bản cập nhật mới nhất PPR, giúp bạn hiểu cách áp dụng chúng hiệu quả trong thực tế.

🖥️ 1. CSR (Client-Side Rendering) – Render phía trình duyệt

• Component được tải sau khi bundle JS đã được gửi về client.

• Phù hợp với app cần nhiều tương tác (SPA).

• Ưu điểm: tốc độ ban đầu chậm nhưng phản hồi nhanh sau khi tải.

• Nhược điểm: Googlebot có thể gặp khó trong indexing nếu JS chưa sẵn sàng.

• Phù hợp với:

  • Ứng dụng đơn trang (SPA) có logic phức tạp phía client

  • Dashboard nội bộ, admin panel

  • App có tính tương tác cao như drag-n-drop, real-time chart, animation

  • Progressive Web Apps (PWAs)

  • Game trên web

🌐 2. SSR (Server-Side Rendering) – Render phía server lúc runtime

• Trang được tạo trên server mỗi lần người dùng request.

• Ưu điểm: SEO tốt hơn, dữ liệu mới nhất luôn được hiển thị.

• Nhược điểm: mỗi request đều phải qua server → chậm hơn, tốn tài nguyên.

• Phù hợp với:

  • Trang Landing Page cần SEO + nội dung động

  • Trang sản phẩm eCommerce có nhiều phiên bản giá/kho khác nhau

  • Trang đăng nhập cá nhân hóa

  • Marketplace, booking site (dữ liệu thay đổi theo user)

📄 3. SSG (Static Site Generation) – Render trước khi deploy

• HTML được tạo khi build → tải về cực nhanh.

• Phù hợp cho blog, docs, trang không đổi thường xuyên.

• Nhược điểm: không phù hợp khi dữ liệu cần cập nhật thường xuyên.

• Phù hợp với:

  • Blog cá nhân

  • Trang tài liệu (docs)

  • Portfolio cá nhân

  • Website công ty ít thay đổi nội dung

  • Trang chiến dịch marketing cố định

🔁 4. ISR (Incremental Static Regeneration) – Cập nhật từng phần

• Kết hợp SSG và khả năng revalidate.

• Một trang tĩnh vẫn có thể “làm mới” sau X giây nhờ server.

• Ưu điểm: tận dụng cache & tốc độ của SSG nhưng vẫn linh hoạt như SSR.

• Phù hợp với:

  • Website tin tức hoặc blog có nội dung mới theo giờ/ngày

  • eCommerce với nhiều sản phẩm, mỗi sản phẩm được regenerate riêng biệt

  • Thư viện bài viết (knowledge base) cập nhật không đồng loạt

🧩 5. PPR (Partial Prerendering) – 14+

• Khái niệm mới: kết hợp static + động trong 1 page.

• Page có thể được render phần tĩnh trước và render tiếp động khi tải về.

• Tối ưu trải nghiệm người dùng vì hiển thị nhanh nhưng vẫn động.

• Phù hợp với:

  • Trang eCommerce hoặc marketplace có khung layout cố định nhưng phần dữ liệu theo người dùng

  • Các trang tìm kiếm/phân trang: Search results, filtered listing

  • Ứng dụng lớn muốn tối ưu TTFB (time-to-first-byte) nhưng vẫn động

  • SEO-focused dynamic pages kết hợp static header/footer