Ngày 4: Server-Side Rendering (SSR) trong Next.js

💡

Ngày 3

1️⃣ Giới thiệu về SSR và `getServerSideProps`

SSR (Server-Side Rendering) là một kỹ thuật giúp trang web được render trên server mỗi lần có request.

🔹 Ưu điểm của SSR:

Luôn hiển thị dữ liệu mới nhất từ server (không cần build lại).
Phù hợp với dữ liệu thay đổi liên tục (ví dụ: bảng xếp hạng, tin tức, stock price).
SEO tốt hơn so với CSR vì HTML được tạo trước khi gửi về trình duyệt.

🔹 Nhược điểm:

Chậm hơn so với SSG vì server phải xử lý mỗi lần request.
Tốn tài nguyên server hơn so với SSG.

📌 Khi nào nên dùng SSR thay vì SSG?
✅ Dữ liệu thay đổi liên tục (giá sản phẩm, bài viết mới nhất, số lượt xem).
✅ Cần xác thực người dùng (hiển thị thông tin cá nhân, dashboard).
✅ Cần fetch dữ liệu real-time từ API.

2️⃣ Sử dụng `getServerSideProps` trong Next.js

📌 Ví dụ: Hiển thị thời gian server render
Tạo file pages/server-time.js:

export default function ServerTime({ time }) {
  return (
    <div>
      <h1>Thời gian hiện tại (SSR)</h1>
      <p>{time}</p>
    </div>
  );
}

// Fetch dữ liệu mỗi lần có request
export async function getServerSideProps() {
  return {
    props: {
      time: new Date().toLocaleTimeString(), // Cập nhật mỗi request
    },
  };
}

📌 Giải thích:
✅ getServerSideProps() chạy mỗi lần có request.
✅ time sẽ thay đổi mỗi lần reload trang /server-time.

🔹 Test:

Mở /server-time → thời gian hiện tại được cập nhật.
Bấm F5 hoặc Cmd + R → thời gian thay đổi vì request mới được gửi đi.

3️⃣ Fetch API với SSR

📌 Ví dụ: Lấy danh sách người dùng từ API JSONPlaceholder
Tạo file pages/users.js:

export default function Users({ users }) {
  return (
    <div>
      <h1>Danh sách người dùng</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <h3>{user.name}</h3>
            <p>Email: {user.email}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

// Fetch dữ liệu mỗi request
export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();

  return {
    props: { users },
  };
}

📌 Giải thích:
✅ Mỗi lần truy cập /users, dữ liệu được fetch từ API.
✅ Không cần build lại nếu API thay đổi.

4️⃣ So sánh SSR vs SSG: Khi nào nên dùng cái nào?

Tiêu chí	SSG (`getStaticProps`)	SSR (`getServerSideProps`)
Khi nào chạy?	Khi `next build` (chỉ build 1 lần)	Mỗi lần có request
Hiệu suất	Nhanh (vì là trang tĩnh)	Chậm hơn (server phải render mỗi lần)
Khi nào nên dùng?	Dữ liệu ít thay đổi (blogs, danh mục sản phẩm, landing pages)	Dữ liệu thay đổi thường xuyên (dashboard, user profile, giá cổ phiếu)
SEO	Tốt (trang tĩnh load nhanh)	Tốt (HTML đầy đủ)
Cần xác thực không?	❌ Không (nếu cần auth, dùng API Route)	✅ Có (SSR phù hợp với auth)

📌 Tóm tắt:

Nếu dữ liệu thay đổi ít → Dùng SSG (getStaticProps) để tăng tốc độ
Nếu dữ liệu thay đổi liên tục → Dùng SSR (getServerSideProps) để cập nhật real-time

5️⃣ Kết hợp SSR & SSG trong dự án thực tế

Ví dụ:

Trang blog → Dùng SSG (getStaticProps) vì nội dung không thay đổi thường xuyên.
Trang dashboard cá nhân → Dùng SSR (getServerSideProps) để cập nhật dữ liệu người dùng theo request.
Trang sản phẩm:
- Danh sách sản phẩm (/products) → Dùng SSG.
- Chi tiết sản phẩm (/products/[id]) → Dùng ISR (revalidate) để update theo thời gian.
- Giá sản phẩm theo thời gian thực (/products/price) → Dùng SSR.

🎯 Kết quả Ngày 4

✅ Sử dụng getServerSideProps để fetch data mỗi lần request.
✅ Hiểu khi nào dùng SSR, khi nào dùng SSG để tối ưu hiệu suất.
✅ Viết API call với SSR để hiển thị dữ liệu real-time.

Ngày 4: Server-Side Rendering (SSR) trong Next.js