Vite SPA 迁移 Next.js SSR 后，性能差距有多大？
译注：本文编译自 dev.to 平台作者 Digital dev 于 2026 年 9 月 20 日发布的文章，原文标题为《Vite SPA vs Next.js SSR: Real Performance Differences After Migration (With Benchmarks)》。文中数据均来自原作者搭建的基准测试环境，供参考。原文链接见文末。
从客户端渲染（CSR）转向服务端渲染（SSR）或静态站点生成（SSG），是 React 应用架构层面的一次根本性转变。多年来，以 Create React App 和后来的 Vite 为代表的单页应用（SPA）模式，将渲染的重担交给了浏览器。但随着应用规模增长，首屏加载时的“白屏”逐渐成为用户体验与 SEO 的主要瓶颈。
本文通过一组基准测试，对比 Vite SPA 与迁移至 Next.js 后的真实性能差异，并观察核心 Web 指标（Core Web Vitals）的变化。
基准测试环境
为保证公平，测试使用了一个中等规模的仪表盘应用，包含：
- 25 个以上动态路由
- 较重的 UI 库（MUI）
- 从公共 API 获取数据
- 多个复杂的 SVG 可视化组件
测试环境：4G Fast 网络限速（移动端）、M1 MacBook Pro、Lighthouse v10。
1. 首次内容绘制（FCP）
在 Vite SPA 中，FCP 高度依赖 JavaScript 包体积。浏览器必须先下载脚本、解析并执行 React 组件树，才能渲染出第一个像素。
| 方案 | FCP |
|---|---|
| Vite SPA | 1.8s |
| Next.js（SSR） | 0.7s |
Next.js 胜出的原因在于服务端直接返回预渲染的 HTML 字符串。用户几乎立刻看到页面布局，而水合（hydration）过程在后台进行。
2. 可交互时间（TTI）
这里的情况更有意思。SSR 虽然带来了更快的视觉呈现，但如果优化不到位，那段“页面看起来已就绪、实际却无法交互”的“恐怖谷”时期反而可能更长。
| 方案 | TTI |
|---|---|
| Vite SPA | 2.4s |
| Next.js（SSR） | 2.1s |
Next.js 依然领先，主要得益于自动代码分割。Vite 虽支持通过动态导入手动分割，但 Next.js 在文件系统层面强制执行，确保浏览器只下载当前路由所需的代码。
迁移为何常被回避
尽管在 SEO 和首屏加载上收益明显，许多团队仍选择留在 Vite，原因在于迁移到 App Router 的复杂度。手动把 react-router-dom 的逻辑改写为 Next.js 的基于文件的路由，并将 useEffect 数据请求转换为 Server Components，可能耗费数周时间。原文作者在此处提及了可自动化完成组件与路由结构转换的工具 ViteToNext.AI，称其能降低迁移开销——此为该工具的推广内容，读者可自行评估。
包体积与 Tree Shaking
Vite 生产构建使用 Rollup，在 tree-shaking 方面效率极高。而 Next.js 使用 Webpack（新版本中为 Turbopack），侧重服务端与客户端边界的优化。
图片优化的影响
迁移后性能提升最明显的环节之一，并非 JS 执行，而是累积布局偏移（CLS）。从 Vite 中的普通 <img> 标签切换到 next/image 组件后，应用自动处理了：
- 自动转换为 WebP/AVIF 格式
- 默认懒加载
- 通过固有宽高比尺寸防止布局偏移
在本次基准测试中，CLS 分数从 Vite 版本的 0.12 降至 Next.js 版本的 0.01。
SEO 与社交分享
性能不只是速度，还关乎内容的可发现性。
- Vite SPA：爬虫看到的是
<div id="root"></div>。虽然 Googlebot 如今对 JS 的执行能力更强，但次级搜索引擎（Bing、DuckDuckGo）和社交媒体爬虫（Twitter/OpenGraph）往往无法渲染动态内容。 - Next.js：Metadata API 支持动态的、服务端生成的标签。每个页面都能即时显示正确的标题和预览图。
结论：何时该切换？
如果你构建的是登录后才能使用的工具（例如复杂的内部 CRM），Vite 的简洁性与开发体验难以被超越，其 HMR（热模块替换）速度仍是行业标杆。
但如果你的项目依赖自然搜索流量、快速首屏加载或社交媒体分享，迁移到 Next.js 已不再是可选项。随着应用规模扩大，LCP（最大内容绘制）和 CLS 上的性能差距大到无法忽视。
从 Vite 迁移到 Next.js 不只是换框架，更是转向性能优先的架构。虽然 SSR 的初始搭建需要在数据获取和客户端-服务端边界上做更多考量，但各项指标显示，它在用户留存和搜索排名上具有明显优势。