Cẩm Nang Phỏng Vấn MERN: Tối Ưu Hóa Backend, React 19 và Next.js 15

Mục Lục

1. Tối Ưu Hóa Backend
   1.1. Caching
   1.2. Sharding
   1.3. DB Replicas
   1.4. Microservices
2. Thực Hành Tốt Nhất Mức Mã
3. Tối Ưu Frontend
   3.1. Lấy Dữ Liệu
   3.2. Virtualization
   3.3. SSR / ISR
4. TanStack Query
   4.1. Lợi Ích So Với useEffect
   4.2. Dữ Liệu Cũ và Mới
   4.3. Hủy Bỏ Truy Vấn
5. Supabase
   5.1. Tính Năng Cốt Lõi
   5.2. Bảo Mật Cấp Dòng (RLS)
6. Cơ Bản PostgreSQL
   6.1. Chỉ Mục
7. Next.js 15 Nâng Cao
   7.1. Server Actions
   7.2. Caching Tích Hợp
   7.3. Quản Lý Trạng Thái
8. Tính Năng React 19
   8.1. use() Hook
   8.2. Suspense
   8.3. Trình Biên Dịch React
9. Khái Niệm NestJS
   9.1. Guards
   9.2. Middleware
   9.3. Interceptors
10. Mẫu Thiết Kế (theo phong cách Refactoring Guru)
11. Câu Hỏi Thực Tế

I. Tối Ưu Hóa Backend

1. Caching

• Sử dụng Redis hoặc caching trong bộ nhớ cho các truy vấn tái sử dụng (ví dụ: sản phẩm hàng đầu, danh mục).
• Ngăn chặn các truy cập không cần thiết vào cơ sở dữ liệu.
• Có thể cache ở cấp API gateway hoặc cấp cache của Next.js.

2. Sharding

• Chia dữ liệu theo chiều ngang giữa nhiều máy chủ.
• Ví dụ: Người dùng có ID 0–1M trên DB1, 1M–2M trên DB2.
• Cải thiện khả năng mở rộng cho các ứng dụng ghi nặng.

3. DB Replicas

• Cơ sở dữ liệu ghi (Postgres) + replicas đọc (NoSQL hoặc Postgres replicas).
• Tăng cường lưu lượng đọc với các bản sao.
• Sử dụng tính nhất quán cuối cùng khi đồng bộ thời gian thực không quan trọng.

4. Microservices

• Chia nhỏ các module nặng (ví dụ: xác thực, socket, thông báo).
• Giao tiếp qua Kafka / RabbitMQ.
• Cải thiện khả năng phục hồi: một dịch vụ gặp lỗi sẽ không làm hỏng toàn bộ ứng dụng.

II. Thực Hành Tốt Nhất Mức Mã

• Đẩy logic xác thực & chặn vào middleware/guards, không phải dịch vụ.
• Các tính toán nặng → chuyển sang bên DB (tổng hợp SQL, chỉ mục).
• Giữ luồng yêu cầu tối thiểu (từ chối các yêu cầu không hợp lệ sớm).

III. Tối Ưu Frontend

1. Lấy Dữ Liệu

• Giảm thiểu việc sử dụng useEffect.
• Ưu tiên TanStack Query hoặc React use() cho việc lấy dữ liệu theo cách khai báo.
• Lợi ích: caching, retries, làm mới nền và giảm re-renders.

2. Virtualization

• Sử dụng các thư viện như react-window hoặc react-virtualized cho các danh sách dài.
• Chỉ render các mục trong viewport (ví dụ: trình quản lý tác vụ với hơn 1000 tác vụ).

3. SSR / ISR

• SSR: Lấy dữ liệu mới trên mỗi yêu cầu (động).
• SSG: Tạo các trang tĩnh trước tại thời điểm xây dựng (nhanh).
• ISR: Tốt nhất của cả hai → tái tạo sau khoảng thời gian revalidate.

IV. TanStack Query

1. Lợi Ích So Với useEffect

• Caching tích hợp sẵn.
• Tái xác thực nền lặng.
• Không cần trạng thái loading thủ công, tránh hiện tượng nhấp nháy.

2. Dữ Liệu Cũ và Mới

• Cũ: Dữ liệu cũ hơn staleTime, đủ điều kiện để lấy lại.
• Mới: Dữ liệu mới được lấy, phục vụ ngay lập tức.

3. Hủy Bỏ Truy Vấn

• Sau khi mutation (tạo/cập nhật/xóa), gọi:

  queryClient.invalidateQueries(['products'])

• Buộc lấy lại danh sách đã cập nhật.

V. Supabase

1. Tính Năng Cốt Lõi

• Xác thực & phân quyền sẵn có.
• Thời gian thực (thông qua các đăng ký Postgres).
• Tích hợp đám mây (email, điện thoại, lưu trữ).
• Trình soạn thảo SQL tích hợp và SDK API.

2. Bảo Mật Cấp Dòng (RLS)

• Quy tắc chi tiết: ai có thể đọc/ghi các dòng nào.
• Ví dụ: Một người dùng chỉ có thể thấy đơn hàng của họ.
• Bảo vệ cơ sở dữ liệu trực tiếp, không chỉ ở lớp API.

VI. Cơ Bản PostgreSQL

1. Chỉ Mục

• Tăng tốc tìm kiếm như một tham chiếu từ điển.
• Chỉ mục khóa chính → ID duy nhất.
• Chỉ mục tổ hợp → kết hợp các trường (username + email).
• Chỉ mục GIN → tìm kiếm toàn văn (ví dụ: tìm kiếm "từ khóa" trong đoạn văn).

VII. Next.js 15 Nâng Cao

1. Server Actions

• Bỏ qua các routes API → truy cập trực tiếp cơ sở dữ liệu.
• Không có overhead HTTP = nhanh hơn & an toàn hơn.
• Được gọi qua useTransition từ client.

2. Caching Tích Hợp

• Next.js tự động cache kết quả hành động server.
• Tránh các truy vấn cơ sở dữ liệu trùng lặp.

3. Quản Lý Trạng Thái

• Từ xa: Server Actions + cache.
• Địa phương (client): Context API.
• Địa phương (server): Params, cookies.

VIII. Tính Năng React 19

1. use() Hook

• Thay thế useEffect + useState cho việc lấy dữ liệu.
• Hoạt động trong các thành phần server + client.
• Ví dụ:

  const data = use(fetchUser())

• Suspense tạm dừng UI cho đến khi sẵn sàng → trải nghiệm người dùng mượt mà hơn.

2. Suspense

• Hiển thị fallback (loading...) cho đến khi dữ liệu được tải.
• Ngăn chặn UI bị phân đoạn/nhấp nháy.

3. Trình Biên Dịch React

• Tối ưu hóa mới → tự động ghi nhớ các render tốn kém.
• Giảm nhu cầu sử dụng useMemo & useCallback.

IX. Khái Niệm NestJS

1. Guards

• Chạy trước controller.
• Sử dụng cho xác thực, quyền truy cập, xác thực điểm số.

2. Middleware

• Chạy trước controller HOẶC trước khi phản hồi rời khỏi server.
• Tổng quát → có thể ghi log, xác thực, sửa đổi yêu cầu/phản hồi.

3. Interceptors

• Sử dụng để biến đổi phản hồi/yêu cầu.
• Ví dụ: tải tệp, ghi log, bọc phản hồi.

X. Mẫu Thiết Kế (theo phong cách Refactoring Guru)

1. Singleton

• Chỉ một thể hiện duy nhất.
• Ví dụ: Kết nối cơ sở dữ liệu.

2. Observer

• Phụ thuộc một-nhiều.
• Ví dụ: Các luồng RxJS trong NestJS.

3. Strategy

• Thay thế thuật toán dễ dàng.
• Ví dụ: Các phương thức thanh toán (Stripe, PayPal).

4. Decorator

• Thêm hành vi một cách động.
• Ví dụ: @Controller của NestJS, HOCs của React.

5. Factory

• Tạo đối tượng mà không biết lớp chính xác.
• Ví dụ: NotificationFactory → Email/SMS/Push.

6. Adapter

• Biến các giao diện không tương thích hoạt động.
• Ví dụ: Bọc API legacy để hoạt động với giao diện mới.

7. Proxy

• Kiểm soát quyền truy cập vào đối tượng.
• Ví dụ: giới hạn tỉ lệ API, lớp cache.

8. Builder

• Xây dựng các đối tượng phức tạp từng bước một.
• Ví dụ: Xây dựng User với các thuộc tính tùy chọn.

XI. Câu Hỏi Thực Tế

1. Làm thế nào để tối ưu hóa frontend với các danh sách dữ liệu nặng?
   → Virtualization + cache của TanStack Query + Suspense.

2. Làm thế nào để bảo mật cơ sở dữ liệu Supabase?
   → RLS + xác thực dựa trên vai trò + JWT trong tiêu đề.

3. Khi nào bạn sẽ sử dụng ISR thay vì SSR?
   → Nếu dữ liệu thay đổi thỉnh thoảng (sản phẩm, blog). SSR nếu dữ liệu thay đổi trên mỗi yêu cầu (giá cổ phiếu).

4. Giải thích Mẫu Chiến Lược với mã.
   → PaymentStrategy interface → StripePayment & PaypalPayment classes → tiêm động.

5. Tại sao ưu tiên Server Actions hơn là các routes API trong Next.js?
   → Nhanh hơn, an toàn hơn (không có mạng), ít boilerplate hơn.