Next.js App Router toàn tập: từ cơ bản đến production

Next.js App Router đã thay đổi hoàn toàn cách chúng ta xây dựng ứng dụng React. Thay vì mô hình pages-based truyền thống, App Router cho phép bạn tổ chức ứng dụng theo cấu trúc thư mục trực quan hơn, đồng thời tận dụng toàn bộ sức mạnh của React Server Components.

Server Components và Client Components

Trong App Router, mặc định mọi component đều là Server Component — chúng chạy trên server, không bao giờ gửi JavaScript xuống client. Điều này giúp giảm đáng kể bundle size. Khi cần interactivity (state, event listeners), bạn mới cần 'use client' directive.

Một pattern phổ biến là Composition Pattern: bọc Server Component bên ngoài và chỉ 'use client' cho phần nhỏ cần tương tác. Điều này giữ phần lớn logic render trên server.

Streaming và Suspense

App Router hỗ trợ React Streaming native. Bạn có thể bọc bất kỳ component nào trong <Suspense> với fallback UI. Server sẽ stream HTML dần dần — nội dung quan trọng hiển thị trước, dữ liệu chậm (API calls, DB queries) điền vào sau.

loading.tsx là shortcut của Suspense: đặt file này trong bất kỳ route segment nào, Next.js tự động bọc page component trong Suspense với loading UI của bạn.

Route Handlers thay thế API Routes

Route Handlers (route.ts) thay thế API Routes của Pages Router. Chúng dùng Web API chuẩn (Request/Response) thay vì req/res của Node.js. Điều này giúp code portable hơn và dễ test hơn.

GET handlers được cache mặc định trong Next.js, trừ khi bạn đọc cookies(), headers(), hoặc dùng dynamic functions. Hiểu cơ chế cache này là chìa khóa để tránh bug dữ liệu cũ.

Chiến lược cache trong App Router

Next.js có 4 tầng cache: Request Memoization, Data Cache, Full Route Cache và Router Cache. Hiểu từng tầng giúp bạn biết khi nào cần revalidate và dùng hàm gì (revalidatePath, revalidateTag, no-store, no-cache).

Thực tế production: dùng fetch với next: { tags: ['products'] } để tag data, sau đó gọi revalidateTag('products') trong Server Action khi có update. Đây là pattern incremental revalidation hiệu quả nhất hiện tại.

Parallel Routes và Intercepting Routes

Parallel Routes (@folder) cho phép render nhiều page trong cùng layout đồng thời — rất hữu ích cho dashboard phức tạp. Intercepting Routes cho phép hiển thị route mới trong modal mà không rời trang hiện tại (pattern phổ biến: photo gallery).

Đây là các tính năng nâng cao nhưng cực kỳ mạnh. Hãy bắt đầu với use cases đơn giản trước khi áp dụng vào codebase lớn.