服务端渲染（SSR）原理与客户端（CSR）渲染区别，你知道吗？

hwyzw

    服务端渲染是一种在服务器上生成页面内容的技术，客户端渲染是在浏览器中动态构建用户界面，两者在实现方式和性能表现上存在显著差异，理解它们的根本不同有助于开发人员选择合适的技术方案，服务端渲染主要关注服务器端的处理逻辑，客户端渲染则侧重于用户设备的交互响应，这种区别决定了它们各自适用的场景和优化方向，服务端渲染通过预先生成完整的HTML页面发送给客户端，客户端渲染通过动态操作DOM元素来呈现内容，这两种方式的优缺点和适用范围各有不同，需要根据具体项目需求进行权衡，服务端渲染可以提高首屏加载速度，客户端渲染则能提供更丰富的交互体验，选择哪种渲染方式需要综合考虑应用的性能要求和使用场景。

    服务端渲染简单来说就是：

    用户访问的网页大多结构简单，无需过多处理，这些页面内容均由服务器端预先组合好的html构成，组合完成后传输给客户端，客户端收到完整数据后便能直接进行解析和呈现，这种方式即为服务器端渲染。

    组件或页面由服务器制作成HTML文本，然后传送给浏览器，最终把固定的标记与客户端整合成能完全操作的应用程序。

    二、客户端渲染（CSR）是什么

    客户端渲染简单来说就是：

    前端页面的构造日益繁复，不再局限于简单的页面呈现，而是会集成更多具备特定作用的模块，整体构造难度随之提升，与此同时，ajax 技术的普及，促使业界普遍采用前后端分离的工程思路，即后端不再直接输出完整的网页代码，而是通过接口传输 json 格式的信息，前端在获取这些数据后，自行完成页面结构的构建，最终将结果呈现给用户，这种模式被称为客户端动态生成界面

    三、SSR的优势

    服务器渲染有诸多好处，首先对搜索引擎优化十分有利，其次首屏呈现速度很快，这是由于客户端得到的是完整的静态网页。

    有利于搜索引擎优化，各类爬虫运行机制基本相同，它们仅获取网页的原始代码，并不运行其中的任何脚本程序,当网站采用React或其它类似MVVM架构开发时，页面上的多数DOM节点都是通过在客户端动态构建的，能够被爬虫获取并解析的信息显著降低，具体情况如图一所示,此外，浏览器类型的爬虫不会等到数据准备就绪后再去抓取页面的相关内容服务器端生成的是包含动态内容并运行过脚本的完整页面代码，客户端接收后，网络爬虫就能获取全部页面细节。

    首页加载迅速，因为其HTML内容借助node生成，用户能立刻获取全部HTML文本，因此速度提升。

    三、CSR的优势

    节省后端资源，局部刷新页面，多端渲染，前后端分离。

    1、节省后端资源。

    服务器需要处理html模板的解释工作，当请求数量增加时，会给服务器带来显著的负担。而采用前端渲染的方式，可以将原本由服务器承担的解析任务，转移到客户端去完成。

    2、便于前后端分离。

    前端主要负责界面设计，后端则负责接口实现，并且前端拥有更大的自主权，无需遵循后端预设的规范。

    3、用户体验更好。

    例如，将网站构建为单页应用，或者仅将部分内容设计成单页应用，这样，特别是在移动设备上，能够让使用感受更加贴近原生应用程序。

    对比图

    四、渲染过程服务端渲染过程

    客户端渲染过程

    五、SSR的局限性

    后端负责画面生成，导致服务器负担沉重，开发条件受到限制，在服务器端制作画面时，仅能运作到先前的环节，不利于前后端分工，开发效能不高。

    1、服务端压力较大

    原先是在客户端进行画面生成，现在集中到服务器端的node服务来处理。特别是在访问量激增的时候，会大量消耗服务器的处理能力。

    渲染任务由服务器承担，必然占用服务器上的计算能力。传输数据量大，即便只是部分内容更新，也必须传输全部数据。这种方式不利于前后端系统各自独立运作，同时造成开发过程缓慢。

    2、开发环境受限

    在服务端渲染环节，生命周期钩子只会执行到某个阶段，因此项目所依赖的第三方库也无法使用其它生命周期钩子，这对选用这些库形成了很大约束。

    六、CSR的局限性

    首屏加载时间会比较慢、性能差，白屏，对于SEO无能为力、

    1、前端响应较慢。

    客户端生成内容，因为网页呈现环节涉及文件获取与React代码运行，前端还需执行字符串组合操作，会占用更多时间，所以其效率低于服务器端生成。

    2、不利于SEO

    对于SEO，也就是搜索引擎优化，完全无效，由于搜索引擎的爬虫只能识别HTML结构的内容，无法识别代码的内容。

    七，区别及适用场景

    CSR和SSR最大的区别在于：

    前者页面显示由处理完成，后者则由服务器直接发送HTML文档供浏览器解析呈现。

    CSR和SSR重要的区别在于：

    究竟是谁来完成html文件的完整拼接

    适用场景

    不谈业务场景而盲目选择使用何种渲染方式都是耍流氓。

    1、比如企业级网站，

    核心用途在于呈现信息而非实现繁杂的互动，同时还要注重搜索引擎优化，那么在这种情况下就应该采用服务器端渲染技术。

    2、类似后台管理页面，

    互动性很高，无需关注搜索引擎优化，便能够采用客户端进行呈现。

    3、具体使用何种渲染方法并不是绝对的

    诸如某些站点运用了初始界面服务器端执行技术，针对访客初次接触的版面实施服务器端执行，因此确保了呈现效率，而其他部分则运用客户端执行，从而达成了前后端解耦。

    ————————————————