项目已是 CSR 但又需要 SEO 时,完整迁移 SSR 成本很高。预渲染是个折中:构建时启动一个无头浏览器,访问每个路由,等 JS 执行完把渲染结果截图般保存为 HTML。部署到 CDN 后,爬虫与首屏拿到的是完整内容,之后仍有 JS 接管交互。
它比 SSG 更通用的一点是不改代码,但成本随页面数增长——每个路由都要实跑一遍渲染,几千个动态页面就不现实。所以适合页面数量有限、内容更新频率不高的官网、博客、文档站;页面海量时应转为 SSG 或真正的 SSR。
// 预渲染思路演示:用无头浏览器逐个把页面存成静态 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