预渲染适合内容静态、路由固定的关键页面（如首页、关于页），用于快速提升SEO和首屏性能；其原理是在构建时用无头浏览器访问路由并保存完整HTML快照，部署后直接返回静态文件。
预渲染（Prerendering）是指在项目构建阶段，用无头浏览器模拟真实用户访问指定路由，把此时渲染完成的完整 HTML 结构“快照”保存为静态文件的过程。它不依赖服务端运行时，而是在 npm run build 时就生成好可直接被搜索引擎爬虫抓取的 HTML 页面，专为解决 Vue、React 等 SPA 框架因内容由 JS 动态生成而导致 SEO 友好度低的问题。
它适合什么场景？
预渲染不是万能方案，它的价值集中在“轻量、可控、见效快”的局部优化：
- 网站中只有少量关键页面需要 SEO，比如 /、/about、/contact、/products
- 这些页面内容基本固定，不依赖登录态或高频实时数据（如用户个人中心、实时订单列表）
- 项目尚未采用 SSR 或 Nuxt，又急需提升首页和介绍页的搜索可见性
- 团队希望最小改动代码、不重构路由或服务端逻辑
核心实现原理是什么？
它本质是一次“构建时的自动化截图式快照”：
- 打包过程启动一个无头 Chrome 实例（如 Puppeteer）
- 依次访问配置好的路由（如 /about），等待 Vue 实例挂载、组件渲染、生命周期完成
- 提取最终 DOM（含已执行 JS 注入的标题、meta 标签、结构化数据等）
- 将该 HTML 写入 dist/about/index.html，替代原本的单页入口
- 部署后，用户或爬虫请求 /about，服务器直接返回这个静态 HTML，无需 JS 解析
常见工具与关键配置点
主流方案分两类，选型取决于技术栈：
-
Vue CLI / Webpack 项目：用 prerender-spa-plugin（注意：需搭配 history 模式 路由，且路由必须显式声明，不支持
/:id这类动态参数） -
Vite 项目：推荐 vite-plugin-seo-prerender，支持自动注入
@vueuse/head的 title/meta，并可配置 JSON-LD 结构化数据 - 所有方案都要求：页面内 SEO 元信息（title、description、og 标签）必须通过 JS 动态写入 DOM（如用
useHead()或vue-meta），否则快照里仍是空的 - 若页面依赖接口数据，需确保构建时能 mock 或预置数据（例如把 CMS 静态内容提前拉取并注入构建流程）
它和 SSR、静态站点生成（SSG）有什么区别？
三者目标一致，但时机和能力边界不同：
- 预渲染：构建时一次性快照 → 快、轻量、零服务端压力，但无法响应 URL 参数变化
- SSR（如 Nuxt Universal）：每次请求时服务端实时渲染 → 支持动态路由、个性化内容，但需 Node 服务、运维成本高
-
SSG（如 Nuxt generate）：构建时遍历所有可能路径（包括
/users/1、/users/2）生成全部 HTML → 适合内容稳定+路由可枚举的博客/文档站，但路由数量爆炸时构建极慢
