Giới thiệu

Next.js mang đến cho chúng ta khả năng linh hoạt trong việc quyết định cách mỗi trang nên được render. Tuy nhiên, điều này có thể gây nhầm lẫn nếu bạn không hiểu rõ những ưu và nhược điểm của từng phương pháp.

Trong bài viết này, chúng ta sẽ phân tích 4 chiến lược render chính trong Next.js, kèm theo ví dụ và các trường hợp sử dụng cụ thể.

Mục lục

1. Client-Side Rendering (CSR)
2. Server-Side Rendering (SSR)
3. Static Site Generation (SSG)
4. Incremental Static Regeneration (ISR)
5. Lựa chọn chiến lược phù hợp
6. Kết luận

1. Client-Side Rendering (CSR)

Cách hoạt động:

• Trang tải với HTML tối thiểu.
• Dữ liệu được lấy trong trình duyệt bằng cách sử dụng useEffect hoặc các hooks tương tự.

import { useEffect, useState } from "react";

export default function Profile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("/api/user")
      .then(res => res.json())
      .then(setUser);
  }, []);

  if (!user) return <p>Đang tải...</p>;
  return <h1>Xin chào {user.name}</h1>;
}

✅ Tốt cho: các trang dashboard, trang người dùng riêng tư.
❌ Không tốt cho: SEO và hiệu suất tải ban đầu.

Thực hành tốt nhất cho CSR

• Sử dụng CSR cho các trang không cần SEO.
• Kết hợp với lazy loading để tối ưu hóa hiệu suất.

Cạm bẫy thường gặp

• Không có dữ liệu khi trang đầu tiên được tải.
• Tăng thời gian tải trang nếu dữ liệu lớn.

2. Server-Side Rendering (SSR)

Cách hoạt động:

• HTML trang được tạo ra trên mỗi yêu cầu.
• Luôn được cập nhật nhưng làm tăng tải cho server.

export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/products");
  const products = await res.json();
  return { props: { products } };
}

export default function Products({ products }) {
  return products.map(p => <p key={p.id}>{p.name}</p>);
}

✅ Tốt cho: các dashboard người dùng cụ thể, các trang tìm kiếm.
❌ Không tốt cho: các trang có lưu lượng truy cập cao nhưng dữ liệu tĩnh.

Thực hành tốt nhất cho SSR

• Tối ưu hóa API để giảm thời gian phản hồi.
• Sử dụng caching cho các dữ liệu không thay đổi thường xuyên.

Cạm bẫy thường gặp

• Tăng tải cho server trong giờ cao điểm.
• Thời gian tải trang có thể lâu hơn nếu không tối ưu hóa.

3. Static Site Generation (SSG)

Cách hoạt động:

• Các trang được xây dựng thành HTML tĩnh tại thời điểm build.
• Được phục vụ ngay lập tức qua CDN.

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/blog");
  const posts = await res.json();
  return { props: { posts } };
}

✅ Tốt cho: các trang marketing, blog, tài liệu.
❌ Không tốt cho: nội dung thay đổi thường xuyên (giá cổ phiếu, tin tức).

Thực hành tốt nhất cho SSG

• Sử dụng cho nội dung không thay đổi thường xuyên.
• Kết hợp với Incremental Static Regeneration cho các trang cần cập nhật định kỳ.

Cạm bẫy thường gặp

• Không phù hợp với các trang yêu cầu cập nhật tức thời.

4. Incremental Static Regeneration (ISR)

Cách hoạt động:

• Các trang được pre-render tĩnh, sau đó được xác thực theo lịch trình.
• Kết hợp tốc độ của SSG với độ mới của SSR.

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/products");
  const products = await res.json();
  return { props: { products }, revalidate: 60 }; // xác thực mỗi 60 giây
}

✅ Tốt cho: danh mục sản phẩm, dashboard, nguồn tin tức.
❌ Yêu cầu chiến lược caching & thiết lập CDN để hiệu quả.

Thực hành tốt nhất cho ISR

• Lên kế hoạch cho lịch trình xác thực hợp lý.
• Sử dụng caching để giảm tải cho server.

Cạm bẫy thường gặp

• Cần quản lý tốt cache để tránh dữ liệu cũ.

Lựa chọn chiến lược phù hợp

Kết luận

Điều tuyệt vời của Next.js là bạn không cần một giải pháp duy nhất cho mọi trường hợp. Bạn có thể kết hợp các chiến lược render giữa các routes để cân bằng giữa tốc độ, độ mới và khả năng mở rộng.

👉 Mẹo chuyên nghiệp: Bắt đầu với SSG/ISR cho hiệu suất, và chỉ sử dụng SSR/CSR khi thực sự cần thiết.

💬 Chiến lược render nào đã hoạt động tốt nhất trong các dự án của bạn — và đâu là những thất bại của nó?