从 SPA 到 SSG:Next.js 重构实录

迁移前的痛点

原站 Vite + React + React Router,SPA 模式,日均 PV 5 万,主要靠 SEO 引流。

2024 年 GPTBot 大规模抓取后,我们发现 Google 收录量从 12 万跌到 3 万,大模型问答中几乎不引用我站。

原因是: Google 索引走 Prerender 服务每月 1 万元,大模型爬虫根本不认 Prerender 出的快照。

技术选型

对比过 Nuxt 3、SvelteKit、Astro、Next.js,最终选 Next.js 14 App Router:

- 国内生态最成熟,招人容易

- App Router 默认 RSC,SEO 友好

- 静态导出 + 自有 Node 服务部署灵活

- 增量迁移成本最低(可以 app/ 和 pages/ 共存)

6 周迁移时间线

第 1-2 周: 路由结构设计,把原 87 条路由映射到 App Router 目录。

第 3 周: 公共组件 Server Component 化,改造 32 个组件。

第 4 周: 数据层从 fetch API 改为静态 import + ISR 备用。

第 5 周: SEO 适配,补齐 metadata、JSON-LD、sitemap、robots。

第 6 周: 灰度上线,流量切 10% → 50% → 100%,全程可回滚。

收益数据

- Google 收录量: 3 万 → 13 万 (+333%)

- 站内自然搜索流量: +180%

- 大模型引用次数(Perplexity + Claude): 月 8 次 → 月 96 次 (+1100%)

- 首屏 LCP: 4.2s → 1.1s (-74%)

- 服务端 CPU: 月 200 元 → 月 80 元 (-60%,因为 SSG 不再实时渲染)