1. 什么是服务端渲染？
我们平时做的Vue项目，他的渲染流程都是，下载一个基本上为空的html文件，然后通过js在里面添加各种元素，这种我们叫他客户端渲染CSR（Client Side Render） ，渲染重在客户端。
那么，服务端渲染 SSR（Server Side Render） ，自然就是渲染重在服务端的一种加载方式，浏览器渲染html来渲染页面这是肯定的，那为啥说重在服务端，指的是html中要加载的大部分内容，不再由浏览器执行js生成，而是在后端生成完整的html直接发送给浏览器渲染。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15126.html
2. 为什么都在说服务器渲染，他有啥好处？对开发者？对用户？
先来说一下对用户的好处：文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15126.html
- 降低等待时间这个优点在网速慢的用户身上尤为明显，对客户端渲染来说，加载页面要先下载html，下载完html还要再下载一堆js文件，还要等js执行完来生成页面，流程太长。对服务端渲染来说，下载完html直接渲染就好，大大缩短了等待时间。
- 更好的SEOSEO全称是搜索引擎优化（Search Engine Optimization），大家都知道，我们平时使用的浏览器，百度也好，chrome也好，搜索功能的实现与爬虫差不多，使用爬虫的时候，我们或许可以通过修改代码，等到js加载完成后再去爬取数据，但是搜索引擎要处理海量数据，他不会等到所有页面的js加载完成，所以对于js加载的内容，他很难捕捉到。
服务端渲染将页面直接生成完整的html，这对与一些官网或者商品网站具有重大意义，比如你搜索某品牌的菜刀，而你的商品网站上有这个产品，浏览器能直接给用户定位到你这个网页链接，是不是网站知名度一下就打开了？这些是客户端渲染的网站做不到的。
再来说一说对开发者的好处：文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15126.html
我是不想按条来写的，因为他的确增加了我们的学习成本，好像并没有什么好处。嘿嘿嘿，但是当你学会了他以后就会发现，他还是有一些可圈可点的地方的。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15126.html
- 简化开发工作量回忆过去，我们曾经使用的jsp就是一种服务端渲染，相比之下，使用Vue语法来做服务端渲染大大简化了代码量，而且Nuxt框架中很多细节搞得不错，比如路由的优化， 不用再去文件中配置路由了，还有组件注册的优化，不用挨个注册组件了等等这些相比于客户端渲染时都更加省力。
- 提高个人作战能力都已经服务端渲染了，当然支持写服务端代码了，只要你够拼（注：忽视身体健康的努力是毫无意义的！），前端人从此也可以是全栈工程师了。
3. Nuxt与Vue的关系是啥？
最直观的理解，Vue是JavaScript的框架，Nuxt是Vue的框架。只是“框架”的方式有些不同，Vue相当于创造了一种新的语法，但是按照一定规则编译后最终还是生成原生js；Nuxt是一个支持Vue语法，但增强了Vue功能的框架，比如说开发过程中还是Vue语法，但是不用手动配置路由了；访问数据时，还是Vue语法，通过一些插件，可以访问数据库等等，就像一个很哇塞的Vue脚手架。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15126.html
文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15126.html
4. 服务端渲染就一个js文件都没了？
这个问题涉及到Nuxt的渲染方式，返回html就真的只是html了吗，那页面上数据变动怎么办，页面跳转怎么办，难不成每个动作都换html？那岂不是会闪屏而且很费劲?文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15126.html
其实并不是的，通过查看后端返回的html文件和开发者工具我们可以发现，即使是服务端渲染，也不是说仅仅返回一个html，Nuxt只是尽可能的将一些数据提前加载到html中，对于一些动态数据还是依赖js文件的，而且在路由变化时，也没有重新去下载新的html，所以并不会存在闪屏的情况。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15126.html
看以下几个图文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15126.html
1.进入初始页面，查看后端返回的数据文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15126.html
可以看到，后端返回的html中，已经将页面内容和按钮加载到html中了，并且，页面中是还有其他js文件的，并非只是一个html
2.清空开发者工具，页面进行路由跳转，查看网络控制台变化
可以看到，页面进行路由跳转，新返回来的是一些js内容，并非html文件，并且页面无感变化，没有进行闪屏刷新，说明页面切换是由js进行局部dom操作完成的。
5. 他这么好，我无脑用就完了？
这里首先要说明，Nuxt并不仅仅是一个服务端渲染框架，他也是支持仅进行客户端渲染的，所以理论上讲，他完全可以支持我们日常开发中进行的大部分项目开发。
对于一些全栈开发或者就是需要服务端渲染的项目，建议使用，但是对于Vue的初学者，或者一些仅需要客户端渲染的项目，使用原来的Vue脚手架方式也未尝不可。
对于Vue初学者来说，Nuxt屏蔽了一些配置，比如路由的配置，组件的注册等等，这对熟练掌握Vue的使用方式会有一定的不便。
对仅需客户端渲染的项目来说，直接使用脚手架可能更轻量级一些，并且Nuxt存在一定的学习成本。
当然，我相信在熟练掌握Nuxt后，无论是什么项目，都能大大提升开发效率。
评论