如何通过HTML实现prerender预渲染功能？

本文共计866个文字，预计阅读时间需要4分钟。

Visit Example.com

为什么 link rel="prerender" 基本没用

这个标签的作用是让浏览器在空闲时用隐藏 tab 预加载目标页面的完整渲染结果（含 JS 执行、DOM 构建、资源下载），等用户真正点击时直接切换过去。但它有硬性限制：

• 只在 Chrome/Edge（基于 Chromium）中生效，Firefox 和 Safari 完全忽略
• 必须是同源页面，且不能带查询参数或 hash（https://a.com/page ✅，https://a.com/page?id=1 ❌）
• 一旦用户切换标签页、系统进入节电模式、内存紧张，Chrome 会立刻丢弃预渲染页
• 不触发服务端日志、不执行 GA 统计、不被爬虫识别——对 SEO 零贡献

常见误用：<link rel="prerender" href="/product?id=123"> → 实际不会触发任何行为，控制台也无报错，容易让人误以为“起了作用”。

真正能落地的预渲染方案选型

根据你的技术栈和部署方式，选错方案会导致构建失败、hydration 错乱或线上白屏：

立即学习“前端免费学习笔记（深入）”；

• Vue CLI（Webpack）项目 → 用 prerender-spa-plugin，配置 renderAfterDocumentEvent 确保 Vue mount 完成后再抓取 HTML
• Vite 项目 → 改用 vite-plugin-prerender，别硬套 Webpack 插件；注意 routes 必须是实际可访问路径（如 ['/about']，不是 ['/about.html']）
• Next.js 13+ App Router → 彻底放弃手写函数，用 generateStaticParams + dynamic = "error"，跑 next export 输出纯静态文件
• 纯静态托管（如 Nginx、CDN）→ 不要自己搭 prerender 服务，它需要长期运行的 Node 进程，和静态环境冲突

关键判断点：如果你的构建产物里没有生成多个独立的 .html 文件（比如 /about/index.html），那基本没成功。

prerender_html 函数根本不存在，别再搜了

你在代码里看到的 prerender_html，99% 是某团队内部封装的 Puppeteer 调用函数，不是标准 API，也没有文档。搜索它只会浪费时间：

• 报错 ReferenceError: prerender_html is not defined？说明你漏了 require() 或它压根没挂到上下文
• 想复现别人的效果？直接看他们 package.json 里装了什么（puppeteer？prerender-node？），而不是抄函数名
• Next.js/Nuxt 用户强行写这个函数，反而会绕过框架内置的静态导出机制，导致 getStaticProps 不执行

真正起作用的是工具链配置，不是函数名。一个 prerender-spa-plugin 的 routes 数组，比十个叫 prerender_html 的函数更可靠。

最容易被忽略的一点：预渲染后的 HTML 必须和客户端首屏 DOM 完全一致，否则 React/Vue hydration 会直接抛弃整个 #app 节点重来——你看到的“闪一下再出来”，大概率是这个原因。