Tấn Phát Digital

Những Câu Hỏi Phỏng Vấn Next.js 2026 Nâng Cao

31 tháng 1, 2026
18.548
next.js
phỏng vấn frontend
react 19
app router
turbopack
Những Câu Hỏi Phỏng Vấn Next.js 2026 Nâng Cao - Tấn Phát Digital

Những Câu hỏi Phỏng vấn và Tình huống Thực tế cho Next.js 2026

  1. Kiến trúc App Router tiêu chuẩn: Tại sao App Router trở thành tiêu chuẩn mặc định cho các ứng dụng doanh nghiệp vào năm 2026 thay vì Pages Router? Hãy giải thích sự khác biệt về cách ship JavaScript đến trình duyệt giữa hai mô hình này.

  2. Partial Prerendering (PPR): Giải thích cơ chế hoạt động của PPR và cách xác định các ranh giới Suspense để tối ưu hóa chỉ số Interaction to Next Paint (INP) cho các trang e-commerce.

  3. Async Request APIs: Tại sao các API như cookies(), headers() và các props như params, searchParams lại chuyển sang mô hình bất đồng bộ (Promises) từ Next.js 15 (và Next.js 16 bỏ hẳn cách truy cập đồng bộ)? Điều này giúp ích gì cho việc tối ưu hóa Streaming?

  4. Cơ chế Cache Components: Phân biệt sự khác biệt về hành vi và tính tường minh giữa chỉ thị use cache cấp độ thành phần so với cơ chế caching dựa trên network của fetch truyền thống.

  5. Bảo mật với React Taint API: Cách triển khai experimental_taintObjectReference và experimental_taintUniqueValue để ngăn chặn việc rò rỉ vô ý các dữ liệu nhạy cảm (như mật khẩu, tokens) từ Server sang Client.

  6. Sự chuyển dịch từ Middleware sang Proxy: Tại sao middleware.ts được chuyển đổi thành proxy.ts trong Next.js 16 và lợi ích của việc thực thi lớp này trên Node.js runtime thay vì Edge Runtime là gì?

  7. Quản lý Cache nâng cao: So sánh updateTag() (cung cấp tính chất read-your-writes cho Server Actions) và revalidateTag() (hỗ trợ cơ chế Stale-While-Revalidate) trong việc cập nhật dữ liệu bộ nhớ đệm.

  8. Tầng Truy cập Dữ liệu (DAL): Tại sao cần xây dựng một Data Access Layer (DAL) riêng biệt cho các dự án Next.js 16 và cách nó giúp triển khai mô hình bảo mật Zero Trust?

  9. Tối ưu hóa Turbopack: Làm thế nào tính năng File System Caching của Turbopack giúp cải thiện hiệu suất build và thời gian Fast Refresh trong các dự án Monorepo quy mô hàng nghìn thành phần?

  10. React Compiler và Memoization: Vai trò của React Compiler trong việc tự động hóa memoization và các trường hợp ngoại lệ nào vẫn yêu cầu kỹ sư phải can thiệp thủ công vào hiệu suất render?

  11. Xử lý lỗi Hydration: Đề xuất quy trình xử lý triệt để lỗi hydration gây ra bởi các giá trị non-deterministic (như Date hoặc Math.random()) mà vẫn đảm bảo tính năng SEO.

  12. Server Action Closures: Tại sao việc định nghĩa Server Actions inline bên trong Server Components lại tiềm ẩn rủi ro rò rỉ dữ liệu qua cơ chế Closure Serialization? Cách khắc phục tối ưu là gì?

  13. Cấu hình CacheLife: Giải thích cách sử dụng các hồ sơ cacheLife (như 'max', 'hours', 'days') để quản lý vòng đời bộ nhớ đệm một cách hệ thống thay vì sử dụng các con số revalidate thủ công.

  14. Khả năng quan sát (Observability): Cách sử dụng file instrumentation.ts để theo dõi các số liệu runtime, lỗi rò rỉ bộ nhớ và thời gian thực thi của từng Server Component.

  15. DevTools MCP và AI Debugging: Tác động của Model Context Protocol (MCP) đối với khả năng gỡ lỗi ứng dụng Next.js khi làm việc với các công cụ phát triển tích hợp AI là gì?

  16. API connection(): Trong tình huống nào bạn nên sử dụng hàm connection() thay vì các Dynamic APIs truyền thống để trì hoãn việc kết xuất cho đến lúc có yêu cầu thực tế?

  17. Parallel & Intercepting Routes: Cách triển khai mẫu UI "Modal Gallery" (vừa hiển thị modal trên trang danh sách, vừa có URL độc lập khi tải lại trang) bằng Parallel và Intercepting Routes.

  18. Native TypeScript Config: Lợi ích của việc chạy next.config.ts trực tiếp trên Node.js với cờ --experimental-next-config-strip-types đối với quy trình CI/CD của doanh nghiệp.

  19. Streaming Error Handling: Cách quản lý và hiển thị UI lỗi khi một Server Component gặp sự cố trong quá trình streaming, khi mà mã trạng thái HTTP 200 đã được gửi về trình duyệt.

  20. Self-hosting Challenges: Phân tích các thách thức kỹ thuật và giải pháp khi triển khai Distributed Caching (sử dụng Redis/Valkey adapters) cho Next.js 16 khi không sử dụng hạ tầng của Vercel.

Bạn có thể tìm hiểu thêm các câu hỏi phỏng vấn NextJs 2026: 100 Câu Hỏi Phỏng Vấn Next.js 2026

Để chuẩn bị bài bản cho các câu hỏi trên, có thể học theo khóa học Next.js 2026 và khóa học ReactJS 2026, ôn thêm câu hỏi phỏng vấn React và xem lộ trình Frontend Developer. Với câu hỏi về bảo mật React Server Components, đọc thêm phân tích lỗ hổng DoS trong React Server Components và Next.js. Doanh nghiệp cần xây dựng website bằng Next.js có thể tham khảo dịch vụ thiết kế website.

Câu hỏi thường gặp

Khi nào nên dùng Server Components trong Next.js và khi nào vẫn cần Client Components?

Dùng Server Components cho UI đọc dữ liệu, render tĩnh/động trên server để giảm bundle và bảo mật secret. Dùng Client Components khi cần state, event handlers, useEffect, truy cập browser APIs. Tách ranh giới bằng "use client" và truyền dữ liệu qua props.

Trong App Router, khác nhau giữa rendering tĩnh, dynamic rendering và streaming là gì?

Static rendering tạo HTML tại build hoặc theo cache để tối ưu tốc độ. Dynamic rendering tạo HTML mỗi request (hoặc khi cache miss) phù hợp nội dung cá nhân hóa. Streaming cho phép gửi từng phần UI (Suspense boundaries) sớm, cải thiện TTFB và UX khi có nhiều truy vấn dữ liệu.

Giải thích cơ chế caching của Next.js với fetch: force-cache, no-store và revalidate?

force-cache ưu tiên dùng cache và tái sử dụng giữa request khi hợp lệ. no-store bỏ cache, luôn gọi nguồn dữ liệu, phù hợp dữ liệu nhạy hoặc realtime. revalidate đặt TTL theo giây: trong thời gian đó dùng cache, hết hạn sẽ tái tạo (background hoặc theo request tùy ngữ cảnh).

Sự khác nhau giữa Route Handlers, Server Actions và API routes (Pages Router) là gì?

Route Handlers (app/api) là endpoint HTTP chạy server, phù hợp REST/GraphQL/webhooks. Server Actions là hàm server gọi trực tiếp từ component/form để mutate data, giảm boilerplate API. API routes (pages/api) thuộc Pages Router, vẫn dùng được nhưng ít “native” với App Router.

Làm sao xử lý authentication và bảo vệ route trong Next.js App Router?

Thường kiểm tra session/token ở server bằng proxy.ts (tên mới của middleware.ts từ Next.js 16) hoặc trong layout/page server component, rồi redirect nếu không hợp lệ. Với dữ liệu, kiểm soát quyền ở nguồn gọi (Route Handler/Server Action) thay vì chỉ ẩn UI. Tránh đưa secret sang client và dùng cookies httpOnly khi có thể.

Tối ưu performance Next.js theo các chỉ số Core Web Vitals như LCP, INP, CLS như thế nào?

Tối ưu LCP bằng RSC, cache hợp lý, giảm JS client và dùng next/image đúng kích thước, priority cho ảnh hero. Giảm INP bằng hạn chế client re-render, tách code, debounce và tránh work nặng trên main thread. Giảm CLS bằng đặt width/height, tránh chèn nội dung muộn.

Giải thích hydration mismatch trong Next.js và cách phòng tránh?

Hydration mismatch xảy ra khi HTML server render khác với HTML client render lúc hydrate, thường do dùng giá trị ngẫu nhiên, Date, window, hoặc data thay đổi chỉ trên client. Cách tránh: tính toán ở server, truyền props ổn định, dùng dynamic import ssr:false cho phần phụ thuộc browser, hoặc gate bằng useEffect.

Sự khác nhau giữa dynamic route segment, catch-all và optional catch-all trong App Router?

Dynamic segment dùng [id] cho một phần đường dẫn. Catch-all dùng [...slug] nhận nhiều segment dạng mảng, phù hợp blog đa cấp. Optional catch-all dùng [[...slug]] cho phép không có segment nào (mảng rỗng/undefined), tiện cho route có trang gốc và các trang con dùng chung layout.

Khi nào nên dùng generateStaticParams và metadata (generateMetadata) trong Next.js?

generateStaticParams dùng để pre-render các dynamic route phổ biến ở build (hoặc kết hợp revalidate) để tăng tốc và SEO. generateMetadata hoặc metadata export dùng tạo title/description/open graph theo dữ liệu từng trang. Nên chạy ở server, tránh gọi API dư thừa và tận dụng cache của fetch.

Làm sao xử lý error boundaries, notFound và loading UI một cách đúng trong App Router?

Dùng loading.tsx cho trạng thái chờ theo segment và kết hợp Suspense để streaming. Dùng error.tsx làm error boundary bắt lỗi render/data trong segment, kèm reset để thử lại. Dùng notFound() khi dữ liệu không tồn tại để trả 404 nhất quán, tránh hiển thị trang lỗi “giả”.

Bài viết liên quan

Bài cùng chuyên mục

Hình ảnh đại diện của bài viết: MCP Là Gì? Hướng Dẫn Cài Và Dùng MCP Server Từ A–Z Cho Người Mới

MCP Là Gì? Hướng Dẫn Cài Và Dùng MCP Server Từ A–Z Cho Người Mới

Hướng dẫn MCP từ A–Z cho người mới: Model Context Protocol là gì, host, client, server, tools, resources, prompts, server cục bộ và từ xa, cách cài MCP server trên Claude Desktop, Claude Code, Codex, Cursor, Antigravity, tìm server ở đâu, tiết kiệm ngữ cảnh, bảo mật và lỗi thường gặp.

Hình ảnh đại diện của bài viết: OpenAI Codex Là Gì? Hướng Dẫn Cài Đặt Và Sử Dụng Từ A–Z Cho Người Mới

OpenAI Codex Là Gì? Hướng Dẫn Cài Đặt Và Sử Dụng Từ A–Z Cho Người Mới

Hướng dẫn OpenAI Codex từ A–Z cho người mới: là gì, khác ChatGPT thường thế nào, bốn dạng ứng dụng ChatGPT, CLI, tiện ích IDE và Cloud, gói Free, Plus, Pro và hạn mức, dùng ở Việt Nam, cài đặt từng hệ điều hành, phiên làm việc đầu tiên, sandbox và mức quyền, lệnh, AGENTS.md, skills, MCP và lỗi thường gặp.

Hình ảnh đại diện của bài viết: Lovable Là Gì? Hướng Dẫn Làm Website Bằng AI Và Bảng Giá Từ A–Z

Lovable Là Gì? Hướng Dẫn Làm Website Bằng AI Và Bảng Giá Từ A–Z

Hướng dẫn Lovable từ A–Z cho người mới: là gì, làm được gì và không làm được gì, credit và bảng giá, ba chế độ Chat, Plan, Build, tạo dự án đầu tiên từng bước, cách viết yêu cầu, backend có sẵn, tên miền riêng, SEO, thanh toán, bảo mật và lỗi thường gặp.

Hình ảnh đại diện của bài viết: Google Antigravity Là Gì? Hướng Dẫn Cài Đặt Và Sử Dụng Từ A–Z Cho Người Mới

Google Antigravity Là Gì? Hướng Dẫn Cài Đặt Và Sử Dụng Từ A–Z Cho Người Mới

Hướng dẫn Google Antigravity từ A–Z cho người mới: là gì, bốn dạng App, CLI agy, tiện ích IDE và SDK, gói miễn phí và trả phí, điều kiện dùng ở Việt Nam, cài đặt từng hệ điều hành, phiên làm việc đầu tiên, mức quyền, chế độ CLI, lệnh và phím tắt, AGENTS.md, skills, MCP và lỗi thường gặp.

Bài trụ cột của chủ đề

Hình ảnh đại diện của bài viết: Hướng Dẫn Chọn Hosting & Domain Chuyên Nghiệp Cho Website Doanh Nghiệp Nhỏ
Bài trụ cột

Hướng Dẫn Chọn Hosting & Domain Chuyên Nghiệp Cho Website Doanh Nghiệp Nhỏ

Khám phá lộ trình xây dựng hạ tầng kỹ thuật vững chắc cho website doanh nghiệp với các tư vấn chuyên môn về tên miền quốc gia, công nghệ hosting hiện đại

Bài mới nhất cùng chuyên mục

Hình ảnh đại diện của bài viết: Cursor Là Gì? Hướng Dẫn Cài Đặt, Bảng Giá Mới Và Cách Sử Dụng Từ A–Z

Cursor Là Gì? Hướng Dẫn Cài Đặt, Bảng Giá Mới Và Cách Sử Dụng Từ A–Z

Hướng dẫn Cursor từ A–Z cho người mới: là gì, thuộc về ai sau thương vụ SpaceX, các chế độ Tab, Agent, Ask, Plan, Debug, bảng giá mới với hạn mức làm mới hằng tuần, cài đặt, chuyển từ VS Code, phím tắt, quy tắc dự án, MCP, chế độ chạy lệnh và lỗi thường gặp.

Hình ảnh đại diện của bài viết: Claude Code Là Gì? Hướng Dẫn Cài Đặt Và Sử Dụng Chi Tiết Từ A–Z

Claude Code Là Gì? Hướng Dẫn Cài Đặt Và Sử Dụng Chi Tiết Từ A–Z

Hướng dẫn Claude Code từ A–Z cho người mới: là gì, làm được gì, dùng ở đâu, cần gói nào, cài đặt từng hệ điều hành, phiên làm việc đầu tiên, chế độ phân quyền, lệnh và phím tắt, file CLAUDE.md, kết nối MCP, tiết kiệm hạn mức và xử lý lỗi thường gặp.

Hình ảnh đại diện của bài viết: Rủi Ro Khi Vibe Code: 6 Lỗi Thường Gặp Và Checklist Trước Khi Đưa Lên Mạng

Rủi Ro Khi Vibe Code: 6 Lỗi Thường Gặp Và Checklist Trước Khi Đưa Lên Mạng

Chạy được chưa phải là an toàn. Bài này đi qua sáu rủi ro thường gặp khi vibe code, mỗi rủi ro kèm một sự cố hay nghiên cứu có thật, cách tự kiểm tra và một checklist để đi hết trước khi cho người khác dùng.

Hình ảnh đại diện của bài viết: Dự Án Vibe Code Đầu Tiên: Làm Trang Chia Tiền Ăn Nhóm Từ Mô Tả Đến Lúc Lên Mạng

Dự Án Vibe Code Đầu Tiên: Làm Trang Chia Tiền Ăn Nhóm Từ Mô Tả Đến Lúc Lên Mạng

Một dự án chỉ thật sự xong khi người khác mở được bằng đường link. Bài thực hành này đi qua trang chia tiền ăn nhóm từ bản mô tả, bản đầu tiên có lỗi số lẻ, bốn yêu cầu nhỏ, các phép thử đến lúc đưa lên GitHub Pages.

TAN PHATDIGITAL