JS 框架 词条目录
前端Wiki/词条/服务端渲染 SSR

服务端渲染 SSR

定义把首屏 HTML 在服务器端生成好再发给浏览器的渲染方式,解决白屏慢与 SEO 两大痛点

纯客户端渲染的首屏要走完 下载 JS、解析、执行、请求数据、渲染 这一长串链路,用户盯着白屏等待,爬虫也只能拿到空壳。SSR 把这块工作搬到服务器:请求到达时已经组装好完整 HTML,浏览器拿到即可呈现,爬虫也能直接读到内容。

代价也很真实:服务器要承担渲染 CPU 开发本,并发高时成本上升;开发约束变多,生命周期里访问 window/document 的代码会炸;部署从静态 CDN 退化为需要 Node 进程常驻。因此常见折中是首屏 SSR + 后续交互走客户端水合。

JavaScript
// 最小 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);
⚠ 常见误区
🔗 相关词条响应式原理Vite
← 返回来源章节前端