SSR 和 CSR

2025-03-13

node

SSR

Nodejs 使用 DOM API

Nodejs 本身是没有 DOM 的，只有浏览器环境才有。

jsdom 是一个模拟浏览器环境的库，可以让我们在 Nodejs 中使用 DOM API。

const { JSDOM } = require("jsdom");
const fs = require("fs");
const root = new JSDOM(
  `<!DOCTYPE html><html><head></head><body><div id='app'></div></body></html>`
);
const window = root.window;
const document = window.document;

fs.writeFileSync("./index.html", root.serialize());

这个完全由服务端渲染的页面就属于 SSR（服务端渲染）。

CSR

客户端渲染。（Vue、React 等 SPA）

SSR 和 CSR 区别

页面加载方式：CSR 首屏渲染慢，SSR 快。
内容生成和渲染：CSR 页面的生成和渲染由客户端 JS 负责，当数据发生变换时，JS 会重新生成并更新 DOM，从而实现内容动态变换；SSR 大部分都由服务端渲染好了，多为静态的。
用户交互和体验：CSR 多用 ajax 或 websocket 与服务端进行数据交互，再通过 js 更新页面内容，这样可以拥有更快的页面切换和响应速度，但不利于搜索引擎爬虫和 SEO；SSR 对 SEO 优好。

应用场景

SSR：密集型应用，ToC。新闻网站、博客网站、电子商务、门户网站等需要更高的 SEO 支持。
CSR：ToB。后台管理系统，大屏可视化等。