SSR是服务器用JavaScript运行时执行前端组件生成完整HTML返回浏览器,首屏内容直出、利于SEO和弱网体验;CSR则返回空壳HTML,依赖浏览器下载JS后动态渲染,适合交互密集型应用。

JavaScript服务端渲染(SSR)不是指“用 JavaScript 在服务端跑渲染逻辑”这个动作本身有多特殊,而是指:利用 JavaScript 运行时(如 Node.js),在服务器上执行前端框架(如 React、Vue、Next.js、Nuxt)的组件代码,把数据和模板提前合成完整的 HTML 字符串,再返回给浏览器。它本质仍是服务端渲染,只是实现语言是 JavaScript,不是 PHP 或 Java。
服务端渲染(SSR)的核心特征
服务器收到请求后,立刻做三件事:
– 从数据库、API 或缓存中获取页面所需数据;
– 把数据传给前端组件(比如一个 ProductPage),让它在服务端执行并生成 HTML;
– 返回一份带内容的、可直接渲染的 HTML 文档(不是空壳,也不是 JS 脚本)。
用户打开页面时,几乎立刻看到文字、图片、标题等主要内容,不需要等 JS 下载、解析、执行、再发请求、再拼 DOM。
- 首屏内容由服务器“喂”好,不是浏览器“现做”
- HTML 中已包含真实文本和语义结构,搜索引擎能直接读取并索引
- 服务端组件默认不带交互逻辑(比如 onClick、useState),那些必须交由客户端接管
- 生命周期有限:Vue 的
mounted、React 的useEffect等只在浏览器运行,服务端只触发created或server-side only钩子
客户端渲染(CSR)是怎么工作的
服务器只返回一个极简 HTML 文件(常叫 “shell”),里面可能只有 和几个 标签。浏览器下载完 JS 后才开始干活:
– 执行框架代码(如 ReactDOM.render 或 createApp);
– 发起 API 请求拿数据;
– 用 JS 动态创建 DOM 节点;
– 最终把内容“画”到页面上。
立即学习“Java免费学习笔记(深入)”;
- 用户首次访问时,屏幕可能空白几秒,或显示 loading,直到 JS 加载完毕
- 所有交互、路由跳转、状态更新都靠浏览器里的 JS 完成,无需刷新整页
- 搜索引擎爬虫若不执行 JS,就只能看到空壳 HTML,抓不到正文内容
- 适合高度交互型应用,比如后台系统、仪表盘、编辑器
关键区别不在“谁写 JS”,而在“谁负责生成可见内容”
很多人误以为“用 Node.js 渲染就是 SSR,用浏览器渲染就是 CSR”,其实更准确的区分维度是:用户第一眼看到的内容,是在哪一端生成的?
- 如果 HTML 响应体里已有文章标题、商品价格、列表项——这是 SSR
- 如果响应体里只有
,其余全靠 JS 补齐——这是 CSR - 同构(Universal)应用是混合体:首屏 SSR,后续导航 CSR(如 Next.js 的 App Router 默认行为)
选 SSR 还是 CSR?看实际需求
不靠框架名气,而看业务场景:
- 要被百度、Google 搜到?内容型网站(博客、电商详情页、企业官网)优先 SSR
- 用户多在弱网环境(三四线城市、海外部分地区)?SSR 首屏更快、更稳
- 是内部系统、登录后才可见、或纯工具类应用?CSR 开发快、交互顺、维护轻
- 想兼顾两者?现代框架(Next.js、Nuxt、Remix)支持按路由/组件粒度选择渲染策略,不必二选一










