纯客户端渲染的首屏要走完 下载 JS、解析、执行、请求数据、渲染 这一长串链路,用户盯着白屏等待,爬虫也只能拿到空壳。SSR 把这块工作搬到服务器:请求到达时已经组装好完整 HTML,浏览器拿到即可呈现,爬虫也能直接读到内容。
代价也很真实:服务器要承担渲染 CPU 开发本,并发高时成本上升;开发约束变多,生命周期里访问 window/document 的代码会炸;部署从静态 CDN 退化为需要 Node 进程常驻。因此常见折中是首屏 SSR + 后续交互走客户端水合。
// 最小 SSR 思路演示:服务器拼好首屏 HTML 再发给浏览器 var http = require('http'); function renderPage(data) { return '<html><body>' + '<h1>' + data.title + '</h1>' + '<ul>' + data.items.map(function (i) { return '<li>' + i + '</li>'; }).join('') + '</ul>' + '<script>window.__INITIAL__ = ' + JSON.stringify(data) + ';</script>' + '<script src="/app.js"></script>' + '</body></html>'; } http.createServer(function (req, res) { var data = { title: '服务端渲染示例', items: ['苹果', '香蕉', '葡萄'] }; res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }); res.end(renderPage(data)); // 浏览器拿到即可见,app.js 再做水合接管 }).listen(3000);