预渲染是构建时为SPA关键路由生成静态HTML快照的技术，提升SEO与首屏性能；它零服务端开销、CDN友好，适用于内容稳定、无实时数据依赖的营销页/博客等场景。

服务端渲染（SSR）和静态站点生成（SSG）是两种不同但可互补的优化路径。预渲染（常被误称为“SSG”，实则更接近**静态预渲染**）并非SSG本身，而是针对单页应用（SPA）在构建阶段生成特定路由的静态HTML快照，专为解决SEO与首屏可见性问题而设。它不依赖运行时服务器，也不像SSR那样每次请求都执行渲染逻辑，因此部署轻量、CDN友好、爬虫友好。

预渲染如何直接改善SEO

搜索引擎爬虫（如Googlebot、Baiduspider）默认不执行JavaScript或等待异步渲染完成。纯CSR页面返回的往往是空壳index.html，爬虫抓取不到真实内容。预渲染在npm run build阶段就为关键路由（如/、/blog/123）生成含完整DOM结构和文本内容的HTML文件，让爬虫“开箱即读”。这意味着标题、H1、正文、元描述等SEO核心元素全部出现在初始响应中，无需JS参与即可被索引。

预渲染与SSR的关键区别

二者目标相似，但机制与适用场景不同：

seo giffy

当用户想要设置、改进或审核分析跟踪与衡量时使用。也适用于用户提及“设置跟踪”、“GA4”、“Google Analyt...”等情况。

下载

• 触发时机：预渲染在构建时（build-time）一次性生成；SSR在请求时（request-time）动态执行
• 数据新鲜度：预渲染适合内容更新频率低的页面（如首页、关于页、产品介绍）；SSR适合需实时数据的页面（如用户仪表盘、实时订单）
• 服务器压力：预渲染零服务端计算开销；SSR需Node实例持续处理渲染，存在CPU瓶颈风险
• 部署成本：预渲染产物是纯静态文件，可直接托管在OSS、S3、Vercel或Nginx；SSR需维护Node服务或Serverless函数

落地预渲染的三个实操要点

以Vue/React项目为例，不改架构也能快速接入：

• 精准选路：只对高SEO价值且内容稳定的路由启用预渲染，例如['/', '/pricing', '/features', '/blog/:id']；避免全站渲染导致构建时间飙升
• 确保数据就绪：组件内需显式通知渲染器“内容已加载完毕”，例如在mounted或useEffect末尾触发document.dispatchEvent(new Event('render-trigger'))，防止截取空白快照
• 服务端兜底识别：Nginx或CDN需配置User-Agent匹配规则，将Googlebot、Baiduspider等爬虫请求重定向至dist/prerendered/xxx.html，普通用户仍走SPA入口

何时该用预渲染，而非SSR？

如果你的项目满足以下任意两点，预渲染就是更优解：

• 网站以营销页、文档站、博客为主，90%以上内容发布后极少修改
• 没有登录态、个性化推荐、实时用户数据等强服务端依赖
• 当前使用Vite/Vue CLI/Create React App等构建工具，不愿引入Express/Node服务层
• 团队缺乏运维Node服务的经验，或希望零配置部署到静态托管平台