day11/上午/211-尚硅谷-尚融宝-服务器端渲染和客户端渲染的典型案例

好，那接下来了解到了搜索引擎的一个啊基本的特点之后呢，我们要了解啊，接下来的一个和搜索引擎的特点密切相关的另一个概念哈，叫做服务器端渲染以及客户端渲染。那么首先呢，我们先来了解一下什么叫服务器端渲染，服务器端渲染呢，它有一个简称叫SSR啊，然后呢，它的全称呢，叫server side render，就是渲染的意思，好，那具体的意思呢，就是在服务器端完成我们HTML页面内容的渲染，而不是在客户端完成页面内容的渲染。那么SSR呢，它其实并不是前端特有的技术，我们通过GSP或者是他们livef这样的一些服务器端的模板语言啊来生成的，呃，我们最终的一个在浏览器当中可以运行的页面，其实就是典型的SSR。

好，接下来呢，我们来啊运行一个啊，典型的SSR的服务器端渲染的一个程序啊，那这个程序呢，我们是看一下用spring做的，那么就是这个例子叫SSRDEMO哈，我把它解压一下。好，然后呢，我把它放到我们的项目下面。把它放在Java下面啊，把它粘过来，粘过来之后呢，我把它运行一下。所以呢，打开。然后接下来呢，选择刚才这个项目。然后呢，这边是SSRDEMOOK英走。好。然后接下来呢，我们先简单的把这个项目看一下啊，这个其实是一个很典型的spring BOO项目，是一个最基本的spring BOO项目，有可能你们第一次学spring BOO项目的时候做的内容呢，都比这个要复杂一点哈，然后我们来看一下这个poem poem里面呢，首先它是继承了这样的一个spring put start parent啊，所以它呢就是一个典型的spring，然后接下来呢，这里面呢，我们引入了start web这个依赖，所以这是一个we部项目啊，引入了time live啊，一个服务器端模板，然后引入了longb啊，引入了my circle的呃，这个connector啊驱动，然后引入了测试包啊，然后呢，这块呢，就是我们一个初始化的一个spring BOO项目了，好，那在这个spring BOO项目当中呢，我们还有一个就是。

嗯，它的application properties application properties这块呢，我们给它就简单的定义了一个端口号叫四个八，接下来呢，在Java这个里面，我们呢，分两个层次啊，啊做了一个简化，没有写service层和map层，只写了controller层和安层，好，那我们来看一下这个anity里面呢，就是一个简单的teacher对象的啊，这个这个类的一个定义好，有ID，有name，有level啊，就是讲师的ID，讲师的名字，讲师的级别哈，好，然后第二个呢，就是teacher controller teacher controller呢，我们就在这个地方，在内存当中啊，就简单的创建了一个啊讲师对象，其实啊，并没有连接我们的MYSQL哈，好。

也就是说这块虽然引入了买SQ，但是其实作为啊一个简单的程序吧，我们就没有连，但是这个地方之所以引这块了，就告诉大家真正的应用程序后面可能会连买色的啊，就是它这个完整的程序，但是我们就把这个部分省略掉了啊，然后在内存当中创建一个提出来，那内存当中创建的T出来之后呢，我们直接把它存在这个model对象里，那么model呢，大家看它是当前页面的一个数据模型对象啊，然后呢，这个数据模型对象呢，实际上最终都会下染到这个视图解析器当中，那么这个地方teacher-list，实际上呢，就去利用视图解析器去查找视图，那么这个视图在哪呢？视图就在我们的timelless teacher里面，这块呢，有个类似HTML，这是一个典型的time live模板视图，好，然后接下来呢，在我们的controller这个里面呢，它当它返回到这个真正的浏览器端之前呢，那么视图解析器就会把这个模型的内容。

和这个视图的内容，把它们渲染到一起，生成一个完整的解析好的HTML啊，然后呢，并且呢，这个部分的动态的内容都会在服务器端替换完成，在服务器端，也就是说在我们他们开的服务器端替换完成之后，这些动态的内容才会把完整的HTML返回给我们的浏览器吧，然后我们浏览器呢，就能看到这个结果了，好，那现在呢，我们，呃，这个程序熟悉了，我们呢来运行一下啊这个程序，那这边呢，有一个启动啊启动类，我们运行这个启动类。

好，运行起来之后呢，我们来访问一下，就是8888是不是local host。8888888下面呢，我们有一个地址啊，我们把来访问这个地址。地址是什么呢？就是刚才我们这个teacher controller叫teacher list啊，我们这边访问的是我们的controller的一个地址，好这样的话呢，我们就找到了啊这样的一个页面，那么这个页面呢，大家看右键查看网页源代码。

他呢，网页里面的所有的内容呢，都在。啊，然后呢，我们去请求这个后台的这个地址的时候，大家会发现F12啊。我们看一下这个networkout为这个刷新，然后看一下这个类这个页面，我们去请求后台这个地址的时候，大家会发现response给我们返回的就是一个完整的HTML页面，而这个HTML页面里面呢，包含完整的这样的一个数据信息，并且所有的数据都已经替换到模板当中了，把模板当中的战略服都替换好了啊，用完整的一些TML的形式作为一个响应，从服务器端响应给我们的啊，浏览器端，所以呢，那我们就会说整个的这个页面渲染的这个工作是由谁做的呢？是由服务器端做的呢，还是由浏览器端做的呢？那么很显然一定是由服务器端做的，对不对，服务器端把它渲染好了才返回给我们，所以这个我们就把它叫什么呀，叫服务器端渲染啊，叫服务器端渲染，那么与之相对的就是我们所说的这种浏览器端渲染，那么大家可能会发现右键查看源代码啥也没渲染出染，对不对，服务器端返回的就是这个JS啊和什么呀，和这个页面框架。

以及什么呀，以及这这一堆Jason数据，那么整个页面渲染成这个样子，是由谁来做的，是由服务器端来做的，还是由浏览器来做的，是由浏览器做的，因为服务器端它给你的是JS文件，给你的是这个HTL，就这么几行代码框架，对不对，给你的是这个里面的这son数据，所以由浏览器端把Jason数据啊，结合HTML，然后呢，再利用JS啊，然后就把Jason就渲染到整个的页面当中了，所以我们管这个呢叫做客户端渲染。

叫客户端渲染啊好，所以这个呢，就是大体的服务器端渲染与客户端渲染啊，我们从这个实际的项目当中能够看到的一个区别，那么很显然我们现在了解到的服务器端渲染一般都是通过我们服务器端的模板语言实现的，比如说像咱们现在看到的这个他live模板语言，或者是之前咱们学习的GSP模板啊，都可以实现服务器端渲染，或者是说他们本身就是服务器端渲染技术啊，然后接下来呢，我们现在看到的这个。这个叫什么呢？这就是我们前后端分离开发技术，对不对啊，所有的接口都是后端写，所有的页面都是前端写，然后前端用阿贾克斯交后端页面，那你会发现这种形式得到的啊，这样的一个啊页面啊，它所产生的一个结果，实际上呢，就使用的是客户端渲染技术啊，使用的是客户端渲染技术，所以呢，现在啊，我们有两种基本的解决方案来完成服务器端的渲染与客户端的渲染，一种就是JSP他live啊，一种就是前后端分离，好大家先了解这个。