Next.js 面试概览
Next.js 是 React 生态的事实标准全栈框架。面试不再问「Next.js 怎么用」,而是问底层架构与渲染模型:构建工具(Turbopack vs Webpack)、四种渲染模式(CSR/SSR/SSG/ISR)、React Server Components(RSC) 的实现原理、App Router 的设计哲学。
一、知识图谱
Next.js 面试
├─ 1. 构建工具
│ ├─ Webpack:经典但慢
│ ├─ Turbopack:Rust 编写,10x 启动速度
│ └─ 与 Vite 的本质差异
├─ 2. 渲染模式(核心)
│ ├─ CSR / SSR / SSG / ISR / RSC
│ ├─ Hydration 原理
│ └─ 流式 SSR(Streaming)
├─ 3. React Server Components(RSC)
│ ├─ 与 SSR 的本质区别
│ ├─ RSC Payload 序列化协议
│ ├─ Server/Client 边界规则
│ └─ Server Actions
├─ 4. App Router
│ ├─ 文件系统路由
│ ├─ 嵌套 Layout
│ ├─ Loading / Error UI
│ └─ Parallel / Intercepting Routes
├─ 5. 数据获取与缓存
│ ├─ fetch 缓存四态
│ ├─ revalidatePath / revalidateTag
│ └─ React.cache
└─ 6. 面试高频
二、学习路径
| 阶段 | 内容 | 重点 |
|---|---|---|
| 入门 | 文件系统路由、布局、API | 区分 App Router / Pages Router |
| 进阶 | Server Components、Server Actions、流式渲染 | RSC 是面试最大分水岭 |
| 高级 | Turbopack 增量计算、RSC Payload 协议、缓存策略 | 能讲清楚「为什么快」 |
三、面试核心立场
「Next.js 15 的本质是用 RSC 把『服务端能干的活都在服务端干完』——直连数据库、零 JS 下发、按需 Streaming——同时让 Client Component 接管所有交互,让用户在 2025+ 仍能基于 React 写全栈应用。」
围绕这一句话展开,能答出 80% 的 Next.js 面试题。