# 服务端渲染SSR的理解
`SSR`服务端渲染`Server Side Render`就是当进行请求时，页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的`HTML`即可。


## 客户端渲染CSR
通常在构建一个普通的`SPA`单页应用时，就是构建的客户端渲染的应用，`CSR`客户端渲染`Client Side Render`就是当进行请求时，页面上的内容是通过加载的`Js`文件渲染出来的，`Js`文件动态运行在浏览器上面，服务端只返回一个`HTML`模板。  

### 优点
* 使得服务器计算压力变轻。
* 做到了前后端分离，在团队开发中只要负责各自的任务即可，使开发效率有明显提升。

### 缺点
* 不利于`SEO`、搜索引擎爬虫无法完整解析用户页面。
* 请求增多时用户等待时间变长，导致首屏渲染慢。
* 消耗的是用户浏览器的性能。

## 服务端渲染SSR
`SSR`服务端渲染`Server Side Render`就是当进行请求时，页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的`HTML`即可。对于传统服务端渲染，也称为后端模板渲染，如`jsp`或者`php`等，这是最早时期的`web`，是指客户端请求时，在服务器上使用模板引擎将模板与数据拼接成完整的`HTML`，再发送给客户端，客户端接收后直接解析`HTML`就可以在浏览器上展示出来，不需要额外的异步请求获取数据，如果要使`web`有交互性，客户端需要再用`Js`去操作`DOM`或者渲染其他动态的部分。

### 优点
* 更好的`SEO`，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，如果`SEO`对站点至关重要，而页面又是异步获取内容，则可能需要服务器端渲染`SSR`解决此问题。
* 更快的内容到达时间`time-to-content`，特别是对于缓慢的网络情况或运行缓慢的设备，无需等待所有的`JavaScript`都完成下载并执行，用户将会更快速地看到完整渲染的页面，通常可以产生更好的用户体验，并且对于那些内容到达时间`time-to-content`与转化率直接相关的应用程序而言，服务器端渲染`SSR`至关重要。

### 缺点
* 开发条件所限，浏览器特定的代码，只能在某些生命周期钩子函数`lifecycle hook`中使用，一些外部扩展库`external library`可能需要特殊处理，才能在服务器渲染应用程序中运行。
* 涉及构建设置和部署的更多要求，与可以部署在任何静态文件服务器上的完全静态单页面应用程序`SPA`不同，服务器渲染应用程序，通常需要处于`Node.js server`运行环境。
* 更大的服务器端负载，在`Node.js`中渲染完整的应用程序，显然会比仅仅提供静态文件的`server`更加大量占用`CPU`资源`CPU-intensive`-`CPU`密集型，因此如果预料在高流量环境`high traffic`下使用，需要准备相应的服务器负载，并明智地采用缓存策略。

## 预渲染Prerendering
如果使用服务器端渲染`SSR`只是用来改善少数营销页面，例如`/`、`/about`、`/contact`等的`SEO`，那么你可能需要预渲染，无需使用`web`服务器实时动态编译`HTML`，而是使用预渲染方式，在构建时`build time`简单地生成针对特定路由的静态`HTML`文件。如果使用`webpack`，则可以使用`prerender-spa-plugin`轻松地添加预渲染。

### 优点
* 设置预渲染更简单，并可以将前端应用作为一个完全静态的站点。

### 缺点
* 只适合对于特定静态页面而应用。

## 总结
本质上对于渲染都是一样的，都是进行的字符串拼接生成`HTML`,两者的差别最终体现在时间消耗以及性能消耗上。客户端在不同网络环境下进行数据请求，客户端需要经历从`Js`加载完成到数据请求再到页面渲染这个时间段，导致了大量时间的消耗以及浏览器性能的消耗。而服务端在内网请求，数据响应快，不需要等待`Js`代码加载，可以先请求数据再渲染可视部分然后返回给客户端，客户端再做二次渲染,这样大部分消耗的是服务端的性能，客户端页面响应时间也更快。  
`SSR`服务端渲染主要解决的是首屏渲染和`SEO`优化，是否需要`SSR`服务端渲染主要取决于`SEO`对于网站是否非常重要以及内容到达时间`time-to-content`对应用程序的重要程度。例如，如果你正在构建一个内部仪表盘，初始加载时的额外几百毫秒并不重要，这种情况下去使用服务器端渲染`SSR`将是一个小题大作之举。然而如果大量的访问流量来自于搜索引擎的抓取，那么服务端渲染`SSR`将是势在必行的解决方案，或者内容到达时间`time-to-content`要求是绝对关键的指标，在这种情况下服务器端渲染`SSR`可以帮助你实现最佳的初始加载性能。总而言之，开发需要根据实际场景寻找解决方案。

## 每日一题

```
https://github.com/WindrunnerMax/EveryDay
```

## 参考

```
https://ssr.vuejs.org/zh/
https://zhuanlan.zhihu.com/p/90746589
https://www.jianshu.com/p/10b6074d772c
https://github.com/yacan8/blog/issues/30
https://juejin.im/post/6890810591968477191
https://juejin.im/post/6844903959241424910
```