Node.js CSR / SSR / SEO
jsdom：在 Node 中模拟浏览器环境
Node 没有 DOM/BOM，但可用 jsdom 模拟：
bash
npm i jsdomjs
const { JSDOM } = require('jsdom')
const dom = new JSDOM(`<!DOCTYPE html><div id='app'></div>`)
const document = dom.window.document
// 获取数据并操作 DOM
const data = await fetch('https://api.example.com/data').then(res => res.json())
const app = document.getElementById('app')
data.forEach(item => {
const img = document.createElement('img')
img.src = item.url
app.appendChild(img)
})
// 序列化并输出为 HTML 文件
fs.writeFileSync('./index.html', dom.serialize())
fetch在 Node 18+ 才可用，低版本可用axios替代。jsdom 版本过高可能报错，建议锁jsdom@20。
CSR vs SSR
| CSR（客户端渲染） | SSR（服务端渲染） | |
|---|---|---|
| 渲染位置 | 浏览器端，由 JS 动态生成 | 服务端预先渲染好完整 HTML |
| 初始加载 | HTML 内容少，有延迟 | 直接返回渲染好的页面，加载快 |
| 交互体验 | 页面切换快，交互灵活 | 首次加载性能好 |
| SEO | 不友好（爬虫抓不到内容） | 友好（爬虫能获取完整页面） |
SEO 与场景选择
CSR 适合：后台管理系统、大屏可视化等 ToB 应用，不需要 SEO。
SSR 适合：新闻网站、博客、电商、门户网站等内容密集型 ToC 应用，需要 SEO。
现代框架（Nuxt.js / Next.js）都支持 SSR，实际开发中很少直接用 jsdom 手写 SSR。