SSR与CSR

CSR（客户端渲染）
其过程为（以react为例）：
用户在浏览器地址栏输入 url，浏览器首先会去服务器请求对应的 html 资源，服务器成功返回 html 页面，其中包含 js、css、图片等资源路径，浏览器根据资源路径再去请求对应的 js、css 图片等资源，资源加载成功后，浏览器开始执行 js，然后会调用 ReactDOM 提供的 render 方法，将虚拟 Dom 渲染到页面上，完成页面的渲染过程。

SSR（服务端渲染）
其过程为（以react为例）：
在浏览器地址栏输入 url，请求发送到服务端，服务端根据请求的 pathname，找到对应要渲染的路由组件，调用 React 提供的 renderToString 或者 renderToStaticMarkup 方法，完成将 React Component 转换为字符串，最后返回给浏览器进行渲染。浏览器获取 html 之后，会再执行一遍 js 代码，来执行事件绑定等操作。

从上面对 CSR 和 SSR 的过程分析，我们可以看出，SSR 的优点很明显。

• 避免白屏现象，提高首屏的加载速度 服务端返回的字符串已经包含了页面的整个 Dom 结构，因此页面加载速度会很快，不需要等待浏览器执行完 js，才能看到页面效果。这点尤其针对比较大型的单页应用优势很明显，因为单页应用打包后的 js 体积通常比较大，加载并执行完 js需要耗费一定的时间，这就会导致页面加载出现短暂白屏的现象，SSR 可以很好的避免这一现象的出现。
• 更好的SEO 很多搜索引擎目前对单页应用的支持不是很好，因为网页中的很多数据需要通过执行完 js才能获取到，这非常不利于爬虫分析与索引。SSR 很好的解决了这一痛点，因为通过 SSR 生成的页面是已经包含了完整数据的页面，再结合 html 的 meta 标签、title 和 description 等，可以大大提高搜索的排名。

判断应用属于哪种渲染方式：选择鼠标放在网页的任意位置，点击鼠标右键，选择显示网页源代码，客户端渲染的页面是不会包含页面的具体内容的，通常会有一个空的 div 容器。服务端渲染则能看到完整的页面内容。