Interview Questions - Phase 2: Frontend & Full-Stack Integration | Knowledge Base

Trọng tâm: Architecture phía Frontend, Web Core Vitals, và cách kết hợp an toàn với Backend .NET. Câu hỏi scenario-based.

1. Web Frameworks (Next.js & React)

[Senior] Phân biệt SSR, SSG, ISR và CSR trong Next.js. E-commerce có catalogue thay đổi giá hàng giờ thì bạn dùng cơ chế nào và tại sao?
[Architect] Hydration Mismatch trong React SSR là gì? Nêu ví dụ và cách khắc phục triệt để.
[Senior] React Render lifecycle và cơ chế Reconciliation. Khi nào bạn sử dụng useMemo và useCallback, và tại sao lạm dụng nó lại phản tác dụng?

Bạn xây trang chi tiết sản phẩm cho e-commerce:

[Senior] Bạn sẽ dùng kết hợp rendering strategies nào? (ISR cho shell + client-fetch cho dynamic parts?)
[Architect] Nếu có 1 triệu SKU, build time cho SSG sẽ thế nào? Giải pháp generateStaticParams partial + fallback?

Dashboard admin hiển thị:

[Senior] State management: Context API, Zustand, hay React Query? Tại sao React Query (TanStack Query) thường là best choice cho server state?
[Senior] Table 10K rows render chậm. Bạn dùng virtualization library nào? React re-render cả table khi 1 row thay đổi - fix thế nào?

[Senior] Điểm cốt lõi khiến Vite có tốc độ Cold Start HMR ngay tức khắc so với Webpack? Vite lợi dụng công nghệ gì của trình duyệt?
[Architect] Tổ chức Monorepo lớn chứa 3 Next.js apps, chung 1 design system layer, cùng kết nối .NET backend. Chia sẻ state và API clients mà không duplicate code bundling?

Enterprise portal có 4 modules (HR, Finance, Inventory, CRM), mỗi module 1 team phát triển. Cần deploy ĐỘC LẬP nhưng user thấy 1 app thống nhất.

[Architect] Bạn chọn approach nào: Module Federation, iframe, hay route-based split? Trade-offs?
[Architect] Shared authentication state giữa các micro-frontends: duplicated MSAL instance hay centralized auth shell?

[Senior] JWT Token lưu ở localStorage vi phạm tiêu chuẩn bảo mật nào và tại sao nguy hiểm? Phân tích cách lưu an toàn với HttpOnly Cookie.
[Architect] Chuyển sang Cookie → vướng CSRF. Kiến trúc Anti-CSRF với Backend .NET và SPA React phối hợp thế nào?

Công ty có 3 web apps (Customer Portal, Admin Dashboard, Partner Portal). Cần SSO dùng Azure Entra ID. User login 1 lần → access cả 3 apps.

[Senior] Flow OIDC Authorization Code + PKCE hoạt động thế nào? Tại sao Implicit Flow bị deprecated?
[Architect] Refresh Token rotation strategy: khi Access Token hết hạn (15 phút), Next.js middleware intercept 401 và refresh - race condition khi 3 API calls cùng lúc gặp 401?

Backend SignalR có 5 pods. User connect pod 1, nhưng notification được publish từ pod 3.

[Architect] Vấn đề gì xảy ra? Thiết kế Backplane Pattern (Redis/Azure SignalR Service) ra sao?
[Senior] Client-side: khi WebSocket disconnect, reconnect strategy nào? Có cần queue missed messages?

#	Anti-Pattern	Tại sao nguy hiểm
1	JWT trong localStorage	XSS script đọc được token → session hijacking
2	API key trong frontend code - `NEXT_PUBLIC_API_KEY=secret`	Client code visible. Ai cũng đọc được qua DevTools
3	useEffect fetch loop - Missing dependency array hoặc setState trong useEffect trigger re-render	Infinite loop gọi API liên tục → DDoS chính backend mình
4	Props drilling 10 levels - Pass props qua 10 components	Unmaintainable. Dùng Context hoặc state management library
5	No error boundary - 1 component crash → toàn app trắng	User mất toàn bộ work. Cần ErrorBoundary per feature module
6	Fetch trong component, không cancel - Component unmount nhưng fetch resolve → setState on unmounted	Memory leak warning, potential state corruption
7	CORS wildcard production - `AllowAnyOrigin()` + `AllowCredentials()`	Security hole. Browser block, hoặc mở cửa cho mọi domain
8	Hardcode API URLs - `fetch('https://prod.api.com/...')`	Chuyển environment phải sửa code. Dùng env variables

👉 Xem đáp án chi tiết tại: Answers/ans-02-frontend-fullstack.md