1. CSR是什么CSR客户端渲染浏览器拿到空白HTML下载JS打包文件JS下载、解析、执行完才渲染页面。流程空白HTML → 加载大bundle.js → 执行JS生成DOM → 渲染页面2. SSR是什么SSR服务端渲染服务器提前把完整HTML页面拼接好直接返回给浏览器。流程服务器组装完整HTML → 浏览器直接解析渲染页面3. SSR更快的核心3点原因1. 首屏白屏时间短CSR要等JS跑完才有内容一开始白屏SSR返回带内容的完整HTML浏览器立刻展示文字、图片肉眼感知更快。2. 无需等待JS初始化挂载CSR依赖Vue/React运行时解析虚拟DOM再生成真实DOMSSR后端已经渲染成真实DOM省去框架初始化渲染开销。3. 网络层面并行加载SSR页面HTML里自带内容、可内嵌样式HTML解析时就能同步加载资源CSR必须等JS加载完成后才去请求接口、拉取数据。- SSR服务器有CPU压力并发高要做负载、缓存- 部分浏览器API(window/document)服务端不存在代码要做环境判断- 项目架构更复杂部署成本高于纯CSR。1. 渲染时机不同CSR渲染全部交给客户端设备手机低配、弱网体验极差SSR把计算渲染压力转移到性能更强的服务端。弱网环境差距最明显CSR大js包下载慢直接卡死首屏。2. 数据请求时机差异- CSR浏览器拿到JS → 执行JS → 发起接口请求 → 拿到数据再渲染串行流程多一层等待- SSR服务端拿到请求后先并行请求接口拿数据数据填充模板生成完整HTML一次性下发把数据请求前置到服务端减少客户端串行等待耗时3. 浏览器渲染流水线效率浏览器解析HTML会直接构建DOM树、渲染树CSR初始HTML只有 div idroot/div 空节点DOM树几乎为空必须等JS插入DOM才有内容SSR返回的HTML具备完整DOM结构浏览器拿到就能走完整渲染流水线FP首次绘制、FCP首次内容绘制指标大幅领先。4. SEO附带优势顺带提加分爬虫不怎么执行JSCSR爬不到页面真实内容SSR直出完整文本HTML搜索引擎抓取友好顺带解决SEO问题。追问1那为什么很多项目还用CSR1. 交互复杂的后台管理、内部系统几乎无SEO需求页面跳转多、首屏压力不大2. CSR部署简单静态文件丢CDN即可成本极低3. 页面交互频繁、大量复杂动画、实时状态客户端渲染后续切换速度不输SSR4. 高并发大流量场景SSR服务器成本、运维压力更高。追问2SSG、ISR和SSR区别- SSG静态生成构建时预生成所有页面HTMLCDN分发速度比SSR还快适合内容固定页面博客、官网- ISR增量静态再生构建预渲染后台定时/访问时更新页面兼顾速度和动态内容- SSR每次访问实时渲染适合个性化、实时数据页面个人中心、订单页追问3SSR Hydration水合是什么服务端吐出静态HTML只是看得见没有点击、输入等交互事件浏览器下载JS后给已有DOM绑定事件、恢复状态的过程叫水合。优化点可做部分水合、孤岛架构减少水合耗时进一步缩小和纯静态页面的差距。SSR将页面渲染、数据请求前置到高性能服务端浏览器直接接收带完整内容的HTML大幅优化首屏FCP、减少白屏等待而CSR全部渲染逻辑放在客户端弱网、低配设备首屏劣势明显但架构简单、运维成本更低。