什么是服务器端渲染（SSR）
服务器端渲染(以下称为SSR)：网页通常是通过后端路由直接给客户端的。也就是说网页的html一般是后端服务器里通过模板引擎渲染好后再交给前端的。
对于其他的效果，则是由预先写在页面里的jq，bootstrap等常见的前端框架去完成的。
什么是前端渲染
以VUE为例，我们查看生产环境的页面的html源码，会得到如下的样子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="xxxx.xxx.js"></script>
<script type="text/javascript" src="yyyy.yyy.js"></script>
<script type="text/javascript" src="zzzz.zzz.js"></script>
</body>
</html>
其实，这个就是浏览器从服务器端拿到的html。这里只有空的 <div id="app"></div> 入口，以及一系列的js。其实，我们看到的页面就是由这些js渲染出来的，这就是 前端渲染
SSR VS 前端渲染
| 名称 | SSR | 前端渲染 |
|---|---|---|
| 优点 | 有利于SEO 对完全性要求高的页面采用SSR更保险 |
很大程度上缓解了服务器端的压力 可以做到无缝的页面切换体验 |
| 缺点 | 耦合性太强 jq时代的页面不好维护 切换页面出现白屏等 |
SEO不友好 |
为什么要用SSR
- 更好的 SEO, 由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
- 更快的内容到达时间（time-to-content）,特别是对于缓慢的网咯情况或运行缓慢的设备。无需等待所有的JavaScript
使用SSR需要权衡之处
- 开发条件限制。一些浏览器特定的代码，只有在生命周期的某些钩子函数中使用；一些外部扩展库，可能需要特殊处理，才能在服务器端渲染程序中运行。
- 涉及构建和部署的更多要求。SSR需要处于Node.js Server运行环境。
- 更多的服务器端负载。
什么时候使用SSR
- 主要取决于内容到达时间（time-to-content）对应用的重要程度。当内容到达时间（time-to-content）要求是绝对关键的指标时，就可以用SSR来实现最佳的初始加载性能。
SSR VS 预渲染
- 预渲染： 无需使用web服务器动态编译HTML，在构建事简单的生成针对特定的路由的静态HTML文件
- 何时使用预渲染：只是用于改善少数营销页面的SEO。
- 优点：设置简单，并可以将前端作为完全静态的站点。
怎么用SSR
参考链接：