在讲浏览器渲染和服务器渲染之前，我们先说说，什么是渲染？
因为数据一般都是变化的，而我们不可能为每一套数据都弄一套视图，所以，我们一般是分离的数据和视图的，那么什么是渲染？其实就是使用一种技术将数据塞到视图中去，生成html文件可供浏览器查看，这种技术就是叫渲染。这工作放在服务器上做就是服务器渲染，放在浏览器做就是浏览器渲染。
(一)纯浏览器渲染的优劣势：
例如vue开发的项目, 客户端渲染路线：
1）请求一个html ->
2）服务端返回一个html -> 此时，这个html页面body中基本是空的失去了seo的性能
3）浏览器下载html里面的js/css文件 ->
4）等待js文件下载完成 ->
5）等待js加载并初始化完成 ->
6）js代码终于可以运行，由js代码向后端请求数据( ajax/fetch ) ->
7）等待后端数据返回 ->
8）客户端从无到完整地，把数据渲染为响应页面
优点：后端只提供数据，前端做视图和交互逻辑，分工明确。服务器只提供接口，路由以及渲染都丢给前端，服务器计算压力变轻了。
劣势：
1、首屏加载过慢：执行js生成一个页面肯定比直接拿页面渲染要慢一些。
2、seo性能问题：这里我们说一下搜索引擎： 其实就是发起一个爬虫来爬取网站的html, 刚开始没有执行js的时候，这个html是空的，爬不到任何内容，所以，客户端渲染可以说几乎完全失去了seo的性能。
3、给浏览器的压力过大了：首先需要请求服务器，等待js加载完成，然后执行js，再次发请求重新数据，再渲染，内存压力太大了，相对于服务端渲染（请求数据是服务端内网请求，比客户端快）。 用户只关心浏览器的体验，所以服务端渲染给客户的体验要好很多。
（二）ssr：服务器渲染
相当于把渲染的过程放在服务端去，在服务器上执行js生成html
服务端渲染路线：
1）请求一个html ->
2）服务端请求数据( 内网请求快 ) ->
3）服务器初始渲染（服务端性能好，较快） ->
4）服务端返回已经有正确内容的页面 ->
5）客户端请求js/css文件 ->
6）等待js文件下载完成 ->
7）等待js加载并初始化完成 ->
8）客户端把剩下一部分渲染完成( 内容小，渲染快 )
所以，哪些需要使用服务器渲染，哪些不需要呢？
一般所有面向客户的网站（toC），需要流量的网站，都需要做ssr，而像后台系统这些就可以不用做。
作为前端开发者，服务端渲染我们怎么做呢？ 拿vue来说，我们可以使用Nuxt
1、 npx create-nuxt-app projectName 创建项目
2、 生成的目录是这样的
assets: 静态资源文件存放目录 components: 组件存放目录 layouts:打开是这样的， 其实就相当于我们之前的App.vue
middleware:中间件的存放位置
需要注意的是： 没有路由文件夹，那么路由规则怎么做的呢？ 是在pages中自动创建的，读取文件夹名，文件名就是作为路由路径
Nuxt的项目，命名文件夹文件时要特别注意了，希望路由是怎样的，名称就怎样写
运行： npm run start
打包上线：npm run build
