Giải thích khái niệm Data Fetching trong Next.js App Router và sự khác biệt cơ bản giữa việc lấy dữ liệu trên Server Components so với Client Components là gì?

Question

Accepted Answer

Trong Next.js App Router, việc lấy dữ liệu (Data Fetching) được thực hiện mặc định trên Server Components thông qua hàm fetch chuẩn của JavaScript đã được mở rộng. Sự khác biệt cốt lõi bao gồm: Server Components: Dữ liệu được fetch trực tiếp trên server trước khi render HTML gửi về client. Bảo mật tuyệt đối các thông tin nhạy cảm như API keys, Database credentials vì code chạy trên server không bị lộ ra phía client. Giảm thiểu kích thước bundle JavaScript tải về ở trình duyệt vì các thư viện phụ thuộc dùng để fetch dữ liệu nằm hoàn toàn trên server. Mặc định, Next.js sẽ tự động caching kết quả của hàm fetch (tương tự Static Generation), nhưng có thể cấu hình lại bằng cache: 'no-store' hoặc next: { revalidate: 3600 }. Client Components: Sử dụng các hook quen thuộc như useEffect kết hợp với fetch, hoặc các thư viện quản lý server state như React Query, SWR. Dữ liệu được fetch sau khi component đã mount trên trình duyệt, có thể gây ra hiện tượng layout shift hoặc trạng thái loading (loading state) nếu không xử lý khéo léo. Lộ thông tin API endpoints và dễ bị tấn công nếu gọi trực tiếp các resource bảo mật từ client. Ví dụ minh họa trên Server Component: async function ProductList() { const res = await fetch('https://api.example.com/products', { next: { revalidate: 60 } }); const products = await res.json(); return (

{product.name}

); } Kinh nghiệm thực chiến: Đối với cấp độ Junior, cần ưu tiên tối đa việc fetch dữ liệu trên Server Components để tận dụng khả năng caching và tối ưu SEO, chỉ chuyển sang Client Components khi thực sự cần tương tác thời gian thực hoặc phụ thuộc vào các Web APIs của trình duyệt.

Giải thích khái niệm Data Fetching trong Next.js App Router và sự khác biệt cơ bản giữa việc lấy dữ liệu trên Server Components so với Client Components là gì?

Khóa học Next.js App Router Chuyên Sâu

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi next.js liên quan cùng chủ đề