Vite 和 Next.js 都用过，你会做 SSR 吗？｜美团前端面经解析

60 秒回答模板

SSR 是服务端收到请求后匹配路由、获取数据、把组件渲染成 HTML 返回给浏览器，浏览器先展示 HTML，再加载客户端 JS 做 hydration 绑定事件。Next.js 把路由、数据获取、服务端组件或页面渲染、构建和部署约定都封装好了；Vite 更偏构建工具，自建 SSR 时要自己准备服务端入口、客户端入口、路由匹配、数据预取、状态注水、manifest 读取、资源标签注入和生产服务器。SSR 的收益是首屏 HTML 和 SEO 友好，但成本是服务端压力、缓存复杂度、hydration 不一致、客户端包体和部署链路复杂。

考点 核心机制与工程取舍

难度 中高频面试题

回答目标 按定义、机制、场景讲清楚

深入解析

SSR 基本流程

请求进入服务端后，根据 URL 匹配路由，执行页面级数据获取，把数据传给组件树，用 renderToString 或流式渲染生成 HTML，再把初始状态安全注入页面，浏览器加载 JS 后 hydrate。

hydration 是关键步骤

服务端 HTML 只是静态结构，事件和客户端状态要靠 hydration 接管。服务端和客户端渲染结果必须一致，否则会出现 hydration mismatch，例如随机数、时间、浏览器专属 API 或环境分支导致差异。

Next.js 提供框架约定

Next.js 内建文件路由、数据获取、SSR/SSG/ISR、API 路由、资源优化、代码分割和部署约定。使用者更多是在框架约束内选择渲染模式和缓存策略。

Vite 自建 SSR 要补齐框架能力

Vite 提供开发期中间件、模块加载和生产构建能力，但路由、数据加载、HTML 模板、manifest 资源注入、错误处理、缓存、服务器部署通常要自己或借助上层框架实现。

数据注水和安全

服务端获取的数据要序列化给客户端复用，避免 hydration 后重复请求。注入 JSON 时要处理 XSS 转义，不能把用户输入或敏感字段原样写进 script。

性能和取舍

SSR 可以改善首屏可见和爬虫抓取，但会增加 TTFB、服务器 CPU、缓存和运维复杂度。适合 SEO、首屏敏感和公开内容页面；强交互后台系统不一定需要全量 SSR。

易错点

把 SSR 简化成服务端返回一个 HTML 字符串，不讲数据获取、注水和 hydration。
认为用了 Vite 就自动有 SSR 框架能力，忽略路由、manifest、服务端入口和生产服务器。
只说 SSR 利于 SEO，不提 TTFB、服务器压力、缓存和 hydration mismatch。
注入初始数据时不做转义或权限过滤，留下 XSS 和敏感数据泄露风险。

面试官追问

SSR、SSG、CSR 的区别是什么？

CSR 主要在浏览器渲染，SSR 每次或按策略在服务端请求时渲染，SSG 在构建期生成 HTML。三者在首屏、SEO、实时性和部署成本上取舍不同。

hydration mismatch 常见原因有哪些？

服务端和客户端渲染不同的时间、随机数、用户环境、localStorage、window 尺寸、异步数据或条件分支都会导致 mismatch。

Vite 做 SSR 为什么需要 manifest？

生产构建后文件名通常带 hash。服务端需要通过 manifest 找到当前页面依赖的 JS/CSS 文件，正确注入资源标签。

SSR 如何做缓存？

可以按页面、数据接口、用户维度和权限维度缓存，公开页面可用 CDN 或 ISR，个性化页面要谨慎区分用户上下文，避免缓存串数据。