预渲染是在构建时用无头浏览器将html模板与初始数据渲染为完整html字符串，直接输出给用户，跳过客户端js解析与api请求流程，从而显著提升首屏速度；但它仅适用于静态或低频更新页面，对依赖实时用户态、地理位置或个性化内容的场景易导致错误内容或需二次水合，反而得不偿失。
什么是预渲染，它真能提升首屏速度？
预渲染不是万能加速器，它只对静态或低频更新的页面有效。核心逻辑是：在构建时（build time）用无头浏览器把 HTML 模板 + 初始数据一起渲染成完整 HTML 字符串，直接输出给用户，跳过客户端 JS 解析、挂载、请求 API、再渲染这一整套流程。如果你的首页依赖实时用户登录态、地理位置或个性化推荐，预渲染反而会返回错误内容或需要二次 hydration 降级，得不偿失。
怎么用 prerender-spa-plugin 给 Vue CLI 项目加预渲染
这是 Vue 生态最成熟、侵入性最小的方案，适用于 Vue 2/3 + Webpack 构建的项目。注意它不兼容 Vite 默认构建流程（Vite 需换用 vite-plugin-prerender 或自建 Puppeteer 脚本）。
常见错误现象：Cannot read property 'mount' of undefined —— 多因 Vue 实例未等 DOM 就绪就执行 new Vue()；404 on /static/js/xxx.js —— public 目录下资源路径未正确映射到预渲染输出目录。
- 安装：
npm install --save-dev prerender-spa-plugin - 在
vue.config.js的configureWebpack.plugins中添加插件，指定staticDir为path.join(__dirname, 'dist')，routes列出需预渲染路径（如['/', '/about', '/help']） - 确保入口文件（如
main.js）中 Vue 实例挂载前有document.readyState === 'complete'判断，或改用app.mount('#app')（Vue 3） - 输出 HTML 中的
<script></script>标签必须保留，否则 CSR 无法接管；但可删掉非关键第三方脚本（如统计代码），避免重复执行
React 项目用 react-snap 做预渲染要注意什么
react-snap 是基于 Puppeteer 的零配置方案，适合 Create React App（CRA）项目，但它默认不会等待异步数据加载完成——这点极易被忽略。
典型问题：rendered page shows loading spinner or empty div。原因是你用了 useEffect(() => { fetch(...) }, [])，而 react-snap 在 DOM 渲染完就截屏，没等 Promise resolve。
- 必须在组件内显式标记“可预渲染就绪”：用
window.snapSaveState = () => ({ data: ... })并在数据加载完成后调用 - 禁用服务端不支持的 API：如
window.location.href、navigator.geolocation，否则 Puppeteer 运行时报错中断 - 配置
include字段限制爬取范围，避免无限递归（比如路由含/user/:id且未过滤，会尝试抓取所有 ID） - 生成的 HTML 中，
<div id="root"></div>必须存在且非空，否则 React hydration 会失败并清空整个容器
预渲染后如何验证是否生效、有没有白屏风险
不能只看 curl http://localhost:8080 返回的 HTML 是否含真实内容——这只能说明构建成功，不代表用户实际体验安全。关键要模拟“禁用 JS 后的首屏表现”。
- Chrome DevTools → Settings → Preferences → Disable JavaScript，然后访问部署后的页面，确认核心文案、图片、按钮都可见且结构合理
- 检查网络面板：预渲染页应无
fetch或XHR请求触发首屏内容加载；若有，说明预渲染未覆盖该数据流 - 对比 Lighthouse 报告中的
First Contentful Paint (FCP)：预渲染后 FCP 应稳定在 300ms 内（静态内容），且不再受客户端 JS 执行顺序影响 - 特别注意 CSS 加载时机：如果关键样式放在
import './index.css'中且未提取为<link rel="stylesheet">，预渲染 HTML 可能先闪白屏再样式生效
预渲染最隐蔽的坑不在构建过程，而在“动态内容边界”的判断——比如一个「最新文章」区块，你认为它每周更新一次所以适合预渲染，但运营临时加了个「今日限时」标签，这个标签又依赖当前时间戳。这种混合状态，要么拆分静态/动态区域，要么放弃该页预渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
