Bài 4. Lấy dữ liệu, cache và streaming

Một số khái niệm

• Trang động: render mỗi lần có yêu cầu (dữ liệu luôn mới).
• Trang tĩnh: render lúc build, phục vụ rất nhanh.
• Revalidate: làm mới trang tĩnh sau một khoảng thời gian hoặc khi dữ liệu thay đổi.
• Streaming: gửi phần sẵn sàng trước, phần chậm hiện sau với khung chờ.

Lấy dữ liệu

// Gọi song song cho nhanh
export default async function TongQuan() {
  const [lop, sv] = await Promise.all([
    fetch(API + '/lop').then(r => r.json()),
    fetch(API + '/sinhvien', { cache: 'no-store' }).then(r => r.json()),  // luôn mới
  ]);
  return <p>{lop.length} lớp, {sv.tong} sinh viên</p>;
}

// Làm mới định kỳ (giây)
fetch(API + '/tin-tuc', { next: { revalidate: 300 } });
// Gắn thẻ để làm mới theo yêu cầu
fetch(API + '/sinhvien', { next: { tags: ['sinhvien'] } });
// ... sau khi thêm sinh viên (trong Server Action):
import { revalidateTag, revalidatePath } from 'next/cache';
revalidateTag('sinhvien'); revalidatePath('/sinhvien');

Streaming với Suspense

import { Suspense } from 'react';

export default function Trang() {
  return (
    <>
      <h1 className="text-2xl font-bold">Bảng điều khiển</h1>
      <Suspense fallback={<div className="h-24 animate-pulse rounded bg-slate-200" />}>
        <ThongKeCham />   {/* async component tải chậm */}
      </Suspense>
    </>
  );
}

Trang tĩnh cho route động

// app/bai-viet/[slug]/page.tsx
export async function generateStaticParams() {
  const ds = await fetch(API + '/bai-viet').then(r => r.json());
  return ds.map((b: { slug: string }) => ({ slug: b.slug }));   // build sẵn từng trang
}