javascript中的服务端渲染如何工作_与客户端渲染有何不同-js教程-PHP中文网

javascript中的服务端渲染如何工作_与客户端渲染有何不同

幻影之瞳

发布： 2025-12-21 21:44:02

原创

241人浏览过

服务端渲染（SSR）指服务器在响应请求时动态生成含真实内容的完整HTML并返回浏览器，由服务器完成首次渲染，浏览器再通过hydrate激活交互能力。

javascript中的服务端渲染如何工作_与客户端渲染有何不同

服务端渲染（SSR）在 JavaScript 中，是指页面的 HTML 结构由服务器在响应请求时动态生成并直接返回给浏览器，而不是让浏览器下载空壳 HTML 后再靠 JS 拼出内容。核心区别在于“谁负责首次渲染”——SSR 是服务器，客户端渲染（CSR）是浏览器。

以 Node.js + React（或 Vue、Next.js、Nuxt 等框架）为例：用户访问 /product/123，Node 服务收到请求后，会：

不是快慢问题，而是职责和时机不同：

首屏内容可见时间：SSR 页面打开即见内容（无需等 JS 下载执行）；CSR 首屏常是白屏或 loading，直到 JS 加载、解析、挂载完成
SEO 友好性：搜索引擎爬虫能直接抓取 SSR 返回的完整 HTML；CSR 返回的初始 HTML 通常只有 <div id="root"></div>，不利于索引
网络与设备压力：SSR 把渲染压力放在服务器，适合内容型站点；CSR 把计算交给用户设备，适合复杂交互应用，但对低端手机或弱网更不友好
数据获取时机：SSR 在服务端就可请求 API 并注入 props；CSR 必须等 JS 运行后才发起请求，多一次往返延迟

没有绝对优劣，看场景：

音疯

音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。

178

营销页、博客、电商列表页 → 优先 SSR（或静态生成 SSG）
后台系统、画图工具、实时协作编辑器 → CSR 更自然，状态管理集中，交互响应更可控
混合方案常见：用 Next.js 的 getServerSideProps 做部分页面 SSR，getStaticProps 做预渲染，SWR 在 CSR 阶段增量更新
注意 SSR 不等于“不用 JS”——它仍需客户端 JS 来 hydrate 和后续交互，只是起点不同