Lập Trình & Kỹ Thuật

Kiến trúc fullstack hiện đại với Next.js 16 App Router gồm: (1) Server Components mặc định để giảm JavaScript gửi về trình duyệt, chỉ dùng Client Components khi cần tương tác; (2) Route Handlers (thư mục api/) đóng vai trò backend API; (3) Drizzle ORM kết nối PostgreSQL với type-safety từ schema đến query; (4) Middleware xử lý xác thực/redirect ở tầng edge trước khi vào route. Cấu trúc này giúp tách biệt rõ ràng logic server/client, tối ưu tốc độ tải trang.

Nên ưu tiên Server Component cho các phần chỉ hiển thị dữ liệu (không cần tương tác state phía client), chỉ dùng Client Component khi cần state, event handler hoặc hook như useState/useEffect. Với Drizzle ORM, tránh N+1 query bằng cách dùng join hoặc truy vấn quan hệ (relational query) thay vì query lặp trong vòng lặp.