Bạn fetch dữ liệu trong App Router như thế nào?

Question

Accepted Answer

Trong App Router bạn fetch dữ liệu **trực tiếp bên trong các async Server Component** dùng API `fetch` chuẩn — không cần `getServerSideProps`, không `useEffect`, không lớp dữ liệu riêng. Next.js mở rộng `fetch` với các điều khiển caching. ## Mô hình cơ bản ```tsx // app/posts/page.tsx — một Server Component export default async function Posts() { const res = await fetch("https://api.example.com/posts"); // chạy trên server const posts = await res.json(); return

{p.title}

; } ``` Vì component chạy trên server, bạn chỉ cần `await` dữ liệu và dùng nó — đơn giản hơn nhiều so với điệu nhảy `useEffect` + `useState` + loading-state ở client. ## Chiến lược caching được đặt theo từng fetch Next.js bổ sung cho `fetch` để mỗi lệnh gọi chọn hành vi rendering của nó: ```tsx fetch(url, { cache: "force-cache" }); // SSG — cached (default for static) fetch(url, { cache: "no-store" }); // SSR — fresh every request fetch(url, { next: { revalidate: 60 } }); // ISR — revalidate every 60s fetch(url, { next: { tags: ["posts"] } }); // tag for on-demand revalidation ``` Đây là mô hình thống nhất của App Router: thay vì chọn một chiến lược cấp trang, bạn điều khiển caching ở cấp data-fetch. ## Fetch song song để tránh waterfall ```tsx // ❌ tuần tự — mỗi cái await cái trước (waterfall chậm) const user = await getUser(); const posts = await getPosts(); // ✅ song song — cả hai bắt đầu cùng lúc const [user, posts] = await Promise.all([getUser(), getPosts()]); ``` Khởi động các request độc lập cùng nhau bằng `Promise.all` để chúng không chặn lẫn nhau. ## Fetch trong Client Components ```tsx "use client"; // cho dữ liệu phía client (ví dụ sau tương tác), dùng thư viện như SWR hoặc React Query const { data } = useSWR("/api/user", fetcher); ``` Server Components đáp ứng phần lớn nhu cầu; dùng SWR/React Query cho dữ liệu phía client, có tương tác, hoặc revalidate thường xuyên. ## Khử trùng lặp request Next.js tự động **khử trùng lặp** các lệnh `fetch` giống nhau trong một lần render — nên bạn có thể fetch cùng dữ liệu trong một layout và một page mà không bị gọi hai lần. ## Tại sao điều này quan trọng Fetch dữ liệu async trực tiếp trong Server Components là một trong những đơn giản hóa lớn nhất của App Router — không boilerplate, truy cập phía server an toàn, khử trùng lặp tự động, và caching theo từng fetch vốn cũng chính là lựa chọn SSG/SSR/ISR của bạn. Biết song song hóa các fetch độc lập (tránh waterfall) là thực hành hiệu năng then chốt.