day11/上午/212-尚硅谷-尚融宝-服务器端和客户端渲染的优缺点比较和使用场景

好，我们来看一下这个我们笔记当中的这个图啊，这个是简单的一个时序图了，然后呢，就是上面是角色浏览器，有controller，有service，当然我这边就多画了一个service层出来啊，然后这面呢，是time那个模板，首先呢，我们根据我们刚才啊看到的这个这个页面，这个页面它的具体的一个执行的流程就是这样的啊，我们用户呢，在浏览器当中输入一个URL地址哈，就这个地址了，好，然后这个URL地址我们一敲回车的时候，这个请求是不是就发送给服务器了，好，那我们这个请求就发送给务器的controller了，然后controller呢，它进行一系列的调用，可能调用service，还可能调用map，还可能调用数据库啊等等一系列的流程，然后呢，拿到了数据，拿到数据之后呢，它就会把这个数据呢，返回给controller controller这个地方呢，它就会去调用模板，那怎么调用模板呢，在这个位置。他就会去找这个视图对吧，好找视图之后呢，他就会把这个视图呢，和谁呢，和我们上面的这个数据啊，也就是说它这个模板和我们的这个数据啊，也就是说这部分的内容。

这个模板和这个model中的数据对吧？啊，然后呢，进行一个模板渲染，这个模板渲染是在哪做的，是controller这面在服务器端做的好，渲染完了之后呢，形成一个完整的HTML，这个HTML呢，就是它了啊，然后把这个完整的HTL作为一个响应啊，响应的内容是什么？就是它啊，作为一个完整的字符串返回给前端。啊，所以这块呢，我们会发现这个渲染的部分是发生在controller这一端，它controller是在服务器这一端，所以呢，我们就管它叫服务器端渲染啊，服务器端渲染的特点呢，就是在服务器端生成完整的一些天码网页，然后客户端呢只负责显示啊好然后接下来呢，我们再来看，结合这个图再总结一下客户端渲染，客户端渲染呢，一般就是我们前后端分离开发的过程当中，前端浏览器向服务器端发起这种阿贾克斯的HTP请求，然后获取到想要的数据的时候，再开始渲染网页，好怎么做呢？比如说还是我们刚才这个这个功能啊，这个功能比如说我在访问这个页面的时候。

统一访问你会发现呢，后台呢，它实际上XHR这块，它是有一个阿贾克斯请求的，对吧？啊好，那我们来看一下我们的这个图。我呢，浏览器一访问网页好，访问网页首先访问的是什么？访问的是前端服务器，那我就是说我访问的是这个地址对吧？这个9528呢，是前端服务器好，前端服务器呢，是不是给我们的，呃，浏览器返回什么呀，返回这个地址所连接的页面，那么我们说我们这个是一个单页应用啊，我们单页应用呢，所连接的页面呢，就是它了啊，所以把这个页面呢，就返回给前端了，所以H千万不要返回给前端，然后前端这个里面呢，它在加载这个页面的时候呢，他其实什么都没看见，就看见一大堆javascript是吧？啊javascript在哪。

是不是在这儿啊啊，我们说所有的script的脚本呢，都被啊，最终打包封装到了这个APP的JS里面，那当然也包括我们发起的远程的阿贾克斯请求，实际上呢，都会被打包封装啊好打包封装之后呢，他在这个前端的浏览器，也就在执行脚本的过程当中呢，他发现了GS当中有阿贾克斯，那么他就把这个阿贾克斯呢就执行了，执行了之后呢，其实这个请求呢，就发送给了另一台服务器，就是后端服务器，好后端服务器呢也像啊，我们前面这个就差不多吧，调用service呀，Map啊，数据库啊，然后呢，来执行我们的应用程序的业务，然后呢，返回一个什么呀，Jason数据，好，Jason数据给谁返回了呢？直接给浏览器端返回了。

啊，所以说浏览器端呢，在我们HTML以及这个当中呢，解析到了有一个JS的加载，从JS当中呢，又解析到了阿贾克斯，从阿贾克斯呢，啊又访问了后端，后端呢生成了Jason，又返回给前端，好前端这个时候是不是分别拿到了HTM和Jason数据啊，你看和后端和刚才咱们相对应的是这面是controller分别拿到了数据和什么呀。HT和HTML的那个视图对吧？啊好，那这面呢是前端啊，前端浏览器拿到了HTM和这个Jason数据，然后浏览器就负责做页面的渲染，所以这个呢就是很典型的一个客户端渲染啊，我们的客户端指的是浏览器，那么服务器端给浏览器的是什么？是数据啊，而不是网页，不像前面这个服务器端给浏览器的直接是一个完整的网页啊好，所以这面呢，他给浏览器的就是一个数据，那么既然给的只是数据的话，所以浏览器呢，就必须负责将数据渲染到我们的HT页面当中，所以这个呢就是客户端渲染，那么两两种方式呢，他们是各自有优缺点的，首先呢，我们来说一下我们前面刚刚讲完的这个客户端渲染的优缺点，它的缺点很明显，不利于网站进行ICU，因为前面我们在讲过爬虫对什么不友好啊，对javascript不友好，对Jason不友好，对不对？

它只识别什么呀，从我们的服务器端直接返回的HTML，所以呢，网站大量的使用了javascript技术呢，我们的爬虫呢，根本就没有办法爬我们的网页内容啊，好，那它的缺点也很明显，就是用户体验好呀，然后前后端分离开发呀，我们服务度服务器端只关心这个接口的开发就行了，不用关心页面的整合呀，你像前面我们这个服务器端渲染的这个，我们还得关心这个类似HTML数据怎么绑定，因为这个代码就是在我们的Java程序员端嘛，对吧，基本上就是我们自己写的嘛，我们绑它还要是还要绑数据，那么如果是前后端分离开发的话，你会发现呢，整个前端的内容都可以移到前端的这个部门去做，对吧？啊，所以呢啊，有利于提高服务器端的开发效率啊，把这个大量的前端工作呢，就抽离出去了，那它的适用场景是什么呀？就是对SEO没有。

要求的系统，比如说我们这种后台管理系统。就对搜索引擎优化没有要求，因为你也不是要把它发布在互联网上，并你并不想让互联网上的用户来访问我们这个后台管理系统对不对，所以呢，他对搜索引擎优化一点要求都没有啊，那所以这种我们就非常适合于使用这个客户端渲染技术啊，就是各种后台管理，电商的后台管理啊，在线教育的后台管理啊，金融系统的后台管理啊等等等等啊，都可以用这种客户端渲染，那服务器端渲染呢，它也有优点和缺点，它的优点和客户端渲染相比来说就是可以有利于SEO的优化，因为它返回的其实就是一个完整的HTML，而这个完整的HTML对搜索引擎来说是非常友好的啊啊，那么它也有缺点，它的缺点肯定就是没有办法完成前后端的分离开发，那我们的这个人员的这个最大的使用率，能不能够达到最最佳的一个效率，对吧？啊所以呢。

这种就是开发效率肯定会低了啊，啊，那就是它的缺点啊，那这种服务器端渲染，虽然它的开发效率低，但是它也有它的试用场景，它的试用场景呢，就是对SEO有要求的系统，一般情况下像门户网站这种啊，还有就是商商城，商城系统里面的商品详情等等啊，还有就是首页等等啊，都可以用这个服务器端渲染技术，所以呢，这个我们讲的呢，就是客户端渲染和服务器端渲染的优点和缺点，那么我们有没有一种方法既能够。

保证我们的项目是前后端分离开发的，就是我们要这个优点，我们也要这个优点，就是我们想鱼和熊熊掌都兼得，有没有这样的一个方式，那么从技术层面考虑的话，其实是有的啊，我们可以使用next JS这个技术，它呢有利于帮助我们啊，在使用前后端分离开发这种技术的技术上完成服务器端渲染。好，那么接下来呢，我们就要看一看next，它是。如何帮助我们完成这样的一个任务的哈。