Khi nào cần SWR / TanStack Query?

Nhiều bạn cuồng Server Component đến mức cố gắng làm mọi thứ trên Server. Nhưng nếu bạn làm App Chứng Khoán (giá update 1s/lần) hay App Chat? Server Component không thể tự re-render 1 giây/lần được.

Lúc này, các "King" của Client Fetching quay lại ngai vàng: SWR (Vercel) và TanStack Query.

1. Khi nào dùng Client Fetching?

1. High Frequency Updates: Giá coin, Dashboard Monitor.
2. User Specific Data: Notification, Cart (những thứ nằm ở Sidebar/Navbar mà không muốn block việc render cả trang).
3. Infinite Scroll: Load thêm data khi cuộn chuột (dù Server Action cũng làm được nhưng Client linh hoạt hơn).

2. Mô hình Hybrid: Server Initial + Client Update

Đây là kiến trúc tối ưu nhất (Best of both worlds).

1. Server Component: Fetch data list bài viết 10 cái đầu tiên -> Render HTML (SEO tốt, hiển thị nhanh).
2. Client Component: Dùng SWR để "hydrate" data đó và tiếp tục polling để check bài mới.

// app/posts/page.tsx (Server)
import { PostsWrapper } from './PostsWrapper';

export default async function Page() {
  const initialData = await db.post.findMany(); // Lấy data gốc
  return <PostsWrapper fallbackData={initialData} />;
}

// app/posts/PostsWrapper.tsx (Client)
'use client';
import useSWR from 'swr';

export function PostsWrapper({ fallbackData }) {
  // SWR sẽ dùng fallbackData hiển thị ngay lập tức (không loading)
  // Sau đó âm thầm fetch API để check xem có bài mới không
  const { data } = useSWR('/api/posts', fetcher, { 
    fallbackData,
    refreshInterval: 5000 // Tự update mỗi 5 giây
  });

  return <PostList posts={data} />;
}

3. SWR vs TanStack Query

Kết luận

Đừng cực đoan chọn phe "Server only" hay "Client only". Hãy dùng Server Component để tạo ấn tượng đầu (First Paint) nhanh nhất. Sau đó dùng SWR/TanStack để làm cho trang web "Sống động" (Live) và phản hồi tức thì.