区别：
CSR和SSR最大的区别在于前者的页面渲染是JS负责进行的，而后者是服务器端直接返回HTML让浏览器直接渲染
传统CSR的弊端：
- 由于页面显示过程要进行JS文件拉取和React代码执行，首屏加载时间会比较慢。
- 对于SEO(Search Engine Optimazition,即搜索引擎优化)，完全无能为力，因为搜索引擎爬虫只认识html结构的内容，而不能识别JS代码内容。
客户端渲染流程：
- 浏览器发送请求
- 服务器返回HTML
- 浏览器发送bundle.js
- 服务器返回bundle.js
- 浏览器执行bundle.js中的React代码
服务器端端渲染流程：
- 浏览器发送请求
- 服务器运行React代码生成页面
- 服务器返回页面
SSR的弊端：
- 使原本简单的 React 项目变的非常复杂
- 项目可维护性会降低
- 代码问题的追溯也会变的困难
- 除非项目特别依赖搜索引擎流量，或者对首屏加载时间有特殊要求，否则不建议使用SSR
概念：
客户端渲染：
客户端渲染，页面初始加载的HTML页面中无网页展示内容，需要加载执行JavaScript文件中，通过JavaScript渲染生成页面，同时，JavaScript代码会完成页面交互事件的绑定。
服务端渲染:
用户请求服务器，服务器上直接生成HTML内容并返回给浏览器，页面的内容是由Server端生成的，但由于服务器端渲染的页面交互能力有限，如果要实现复杂交互，还是要通过引入JavaScript文件来辅助实现。
同构：
同构这个概念存在于Vue/React这些新型的前端框架中，同构实际上是客户端和服务端渲染的一个整合。把页面的展示内容和交互写在一起，让代码执行两次。在服务端执行一次，用于实现服务器端渲染，在客户端再实现一次，用于接管页面交互。
前提条件：
SSR之所以能实现，本质上是因为虚拟DOM的存在:
- 在SSR中，由于js代码在 浏览器和 node 端都可以执行，因此代码会在客户端和服务端分别都执行一次，但是，如果代码里面有DOM操作，则会因为 Node端没有DOM，而不能实现。
- 然而，如React / Vue 这类框架都不是直接操作DOM，而是 虚拟DOM（真实DOM的对象映射），这就使SSR的实现称为可能。服务器端我们可以将虚拟DOM以字符串的形式输出；客户端则可以直接转换为 真实DOM，实现页面挂载。
若有收获，就点个赞吧
0 人点赞
