Phân tích sự khác biệt cốt lõi

1. Pages Router (Mô hình cũ)

• Sử dụng thư mục pages/ để định tuyến tập tin (File-based Routing).
• Mặc định tất cả các Component trong một trang đều là Client Components, nghĩa là mã nguồn được gửi về trình duyệt và thực thi ở client.
• Việc fetch dữ liệu dựa trên các hàm đặc biệt như getServerSideProps (cho SSR) hoặc getStaticProps (cho SSG). Các hàm này chạy hoàn toàn trên server trước khi render trang.

2. App Router (Mô hình mới - Khuyên dùng)

• Sử dụng thư mục app/ dựa trên React Server Components (RSC).
• Mặc định tất cả các Component đều là Server Components, giúp giảm thiểu đáng kể kích thước JavaScript Bundle gửi về client.
• Cung cấp các tính năng nâng cao như Layouts, Loading UI, Error Handling, và Streaming thông qua Suspense một cách tự nhiên và tối ưu hơn.

Lý do Next.js khuyến khích sử dụng App Router

• Hiệu năng vượt trội: Server Components thực thi trực tiếp trên server và chỉ trả về HTML tĩnh hoặc luồng dữ liệu gọn nhẹ, giúp cải thiện chỉ số Core Web Vitals (đặc biệt là First Contentful Paint và Time to Interactive).
• Trải nghiệm lập trình tốt hơn: Hỗ trợ tính năng bố cục lồng nhau (Nested Layouts) giúp tái sử dụng giao diện và giữ trạng thái tốt hơn khi chuyển trang.
• Hỗ trợ React mới nhất: Tận dụng triệt để các tính năng bất đồng bộ của React 18+ như Suspense để xử lý bất đồng bộ mượt mà.

Lưu ý thực chiến cho Junior

Khi mới chuyển từ Pages Router sang App Router, lập trình viên thường gặp lỗi khi cố gắng sử dụng các React Hooks như useState, useEffect hoặc các event listener bên trong Server Components. Hãy nhớ khai báo chỉ thị 'use client' ở đầu file khi bạn thực sự cần tương tác với trình duyệt hoặc quản lý trạng thái tại client.