Bài 3. Server Component và Client Component

Một số khái niệm

Server Component lấy dữ liệu

// src/app/sinhvien/page.tsx  (Server Component)
import NutThich from './NutThich';

async function laySinhVien() {
  const res = await fetch('http://localhost:4000/api/sinhvien');  // API Node.js loạt trước
  return res.json();
}

export default async function TrangSinhVien() {
  const { du_lieu } = await laySinhVien();
  return (
    <ul className="space-y-2">
      {du_lieu.map((sv: { id: number; ho_ten: string }) => (
        <li key={sv.id} className="flex justify-between rounded bg-white p-3 shadow-sm">
          {sv.ho_ten} <NutThich />
        </li>
      ))}
    </ul>
  );
}

Client Component cho tương tác

// src/app/sinhvien/NutThich.tsx
'use client';
import { useState } from 'react';

export default function NutThich() {
  const [thich, setThich] = useState(false);
  return (
    <button onClick={() => setThich(!thich)} className="text-xl">
      {thich ? '❤️' : '🤍'}
    </button>
  );
}

Quy tắc: đặt 'use client' ở lá của cây component (nút, form, bộ lọc), giữ trang và layout là Server Component.

Lỗi thường gặp

• Dùng useState trong component không có "use client" → lỗi biên dịch.
• Truyền hàm (function) từ Server sang Client qua props → không được (chỉ truyền dữ liệu tuần tự hóa được, hoặc Server Action).
• Import mã có khóa bí mật vào Client Component → lộ khóa. Dùng gói server-only để chặn.
• Biến môi trường dùng ở client phải có tiền tố NEXT_PUBLIC_.