JS 框架 词条目录
前端Wiki/词条/预渲染

预渲染

定义在构建或部署阶段用无头浏览器把客户端渲染的页面提前生成静态 HTML,给 SEO 与首屏补课的轻量方案

项目已是 CSR 但又需要 SEO 时,完整迁移 SSR 成本很高。预渲染是个折中:构建时启动一个无头浏览器,访问每个路由,等 JS 执行完把渲染结果截图般保存为 HTML。部署到 CDN 后,爬虫与首屏拿到的是完整内容,之后仍有 JS 接管交互。

它比 SSG 更通用的一点是不改代码,但成本随页面数增长——每个路由都要实跑一遍渲染,几千个动态页面就不现实。所以适合页面数量有限、内容更新频率不高的官网、博客、文档站;页面海量时应转为 SSG 或真正的 SSR。

JavaScript
// 预渲染思路演示:用无头浏览器逐个把页面存成静态 HTML
// 伪代码(实际用 Puppeteer / Playwright)
var routes = ['/', '/about', '/contact'];
var browser = await puppeteer.launch();

for (var i = 0; i < routes.length; i++) {
  var page = await browser.newPage();
  await page.goto('http://localhost:8080' + routes[i], { waitUntil: 'networkidle0' });
  var html = await page.content();          // 等 CSR 渲染完再取整页 HTML
  fs.writeFileSync('dist' + routes[i] + '/index.html', html);
  await page.close();
}
await browser.close();
// 原页面代码一行不改,发布的产物已是带内容的 HTML
⚠ 常见误区
🔗 相关词条Vite前端
← 返回来源章节Vite