如何判断网站采用SSR、CSR或混合渲染？怎样验证SSR渲染？

1. 用浏览器审查元素直接判断 #

打开浏览器开发者工具（F12/右键选审查元素），切换到Elements标签页：

• 如果页面核心内容（比如文章正文、产品详情）直接在HTML结构里完整呈现，大概率是SSR
• 如果核心区域只有空容器（比如<div id="app"></div>），实际内容是后续动态生成的，那就是CSR
• 混合渲染的话，会看到首屏关键内容在HTML里，其余内容靠JS动态加载（比如滚动到底部才渲染的列表）

2. 禁用JavaScript测试 #

在浏览器里禁用JS（Chrome可在开发者工具的Settings→Debugger里勾选Disable JavaScript），刷新页面：

• 核心内容依旧完整显示？那就是SSR——因为内容是服务器直接输出的，不依赖前端JS
• 页面只剩空白或基础框架，核心内容消失？这就是CSR
• 混合渲染的话，首屏内容能保留，但后续交互或滚动加载的内容会消失

3. 分析网络请求 #

打开开发者工具的Network标签页，刷新页面看第一个HTML请求的响应：

• 响应里包含完整的核心内容，是SSR
• 响应只有基础HTML骨架，没有实际内容，后续靠XHR/Fetch拉取数据渲染，是CSR
• 混合渲染会看到首屏内容在HTML响应里，同时有后续的API请求加载其他内容

4. 查看原始页面源码 #

右键页面→选「查看页面源代码」（注意不是审查元素的Elements）：

• 源码里能直接看到页面的核心文本（比如标题、段落内容），就是SSR
• 源码只有空容器和JS引用，看不到实际内容，就是CSR
• 混合渲染的话，源码里有部分关键内容，其余内容需要JS补充

确认内容是否为SSR生成的小技巧 #

• 对比「页面源码」和「审查元素的Elements」：如果两者核心内容完全一致，没有JS动态修改的痕迹，基本能确定是SSR输出
• 看页面加载视觉反馈：SSR页面加载时会逐步渲染内容，CSR则要等JS下载执行完才显示内容（常先看到空白或骨架屏）

内容的提问来源于stack exchange，提问作者Mack Shaw