day11/下午/226-尚硅谷-尚融宝-使用asyncData实现服务器端渲染

好，接下来呢，我们说一个非常重要的内容，就是在咱们的那当中啊，咱们真正去实现服务器端渲染是通过什么手段，因为今天咱们讲的一个核心的内容就是服务器端渲染技术，对不对？那么我们现在要知道的就是咱们怎么样啊，通过纳斯进行服务器端渲染，那么到目前为止呢，我们前面写的这个啊，获取远程这个获取本地IP，并且渲染到页面当中的这个还是停留在客户端渲染阶段，为什么呢？我们来看一下哈，就是。这个IP地址是我们通过阿贾克斯请求发送出去获取到的，所以这个是我们发送的一个阿贾克斯请求，然后呢，它作为响应啊，响应到了我们的客户端浏览器当中，那么是不是整个的页面。嗯，包含了这样的一个IP地址，从服务器端给我们响应回来的呢，并不是我们看一下这个网页的源代码，网页的源代码当中呢，并没有这个IP地址出现啊，这个IP地址出现在哪呢？应该是啊，你你的IP是啊搜一下这个。

好，这块呢，就有你的IP式，但是后面IP地址并没有出现，也就是说IP地址和整个目前为止的这个HTML，他们两个渲染到一起的过程是浏览器做的，是浏览器做的，我们从服务器端得到的整个的这个HTM结果里面并没有把渲染好的IP地址给我们，而这个IP地址呢，是由我们的阿贾克斯请求从向后台发送这个远程调用单独返回来的，所以呢，很明显这是一个客户端渲染的过程，那么客户端渲染的过程呢，就导致这一部分的内容呢，肯定是不能被搜索引擎收录的，假设说哈，你想让这部分的内容被搜索引擎爬取过去，那么是不可能实现的啊，所以说那接下来呢，我们就来看看如何啊，在那这个地方呢啊，实现一个服务器端渲染。

那么实现服务器端渲染呢，很简单，因为纳斯呢就专门做这件事情的，所以呢，他给我们提供了一个现成的这样的一个啊方法哈，这个方法呢叫做。同步叫做ay c啊叫异步数据定义方法。我先这样写一下啊，叫aync，然后asyn c呢和这个data呢很像，只不过呢，我们来区分一下它。好，我们来看一下啊。

我刚才写到哪个页儿了，是。知道index是吧。好，大家看，那么asy nc data塔它所定义的这样的一个啊，数据模型是不是也是我们当前页面当中的data塔的一部分呀，对吧？啊，然后呢，我们再来看一下，那么ay c塔和data塔有什么区别。Ay c data呢，能够帮助我们实现浏览器端的数据渲染，啊，不是那个能够帮助我们实现服务器端的数据渲染。好，怎么做呢？啊，我们在这个大家都知道，我们去获取数据的时候，是想在这个create里面获取数据，对吧，而create执行的时候，它是什么时候执行的，它是在浏览器端执行的，也就是说它在浏览器端他才去向服务器端发送这个远程请求，那么服务器端呢，肯定会直接把这个远程请求呢，发回给浏览器，也就是说我们的这个。

啊，整个的流程是这样的，这created呢在浏览器端执行，那所以呢，这面呢有一个浏览器，这面呢有一个后台的服务器，然后呢，你要在浏览器端去向后台服务器发远程请求呢，后台服务器一定是把这个东西发给你全程浏览器，所以呢，我们整个的数据渲染的过程就在全程浏览器完成了，但是现在呢，我们不想让浏览器端呢给这个服务器发请求，我们想让前端服务器这边有个前端服务器，我们想让前端服务器呢给这个后台的服务器呢发请求，然后后台服务器呢，把这个结果呢返回前端服务器，前端服务器把这个数据渲染完了之后呢，再返回给浏览器，这样的话呢，我们就做到了一个前端服务器端的服务器端渲染，那我们浏览器拿到的呢，就是搜索引擎啊，这个比较喜欢的这个页面了，而不是这样的这个页面对吧，所以那怎么做呢？如果你想在浏览器端给服务器发请求，那你就在这个create里面写，如果你想在前端服务器端。

给服务器发请求，那么我们就写在这个asyc塔里面，明白哈，好，那写在asyc塔里面的话，就意味着我得把这句话移植一下，移到哪去呢？移到这面来。移到这就行了啊，移到这个里面来啊，是注意，然后接下来呢，在这个里面呢，我们去访问这个地址，然后呢，Response对吧，Response完了之后呢，Cancel，然后log，然后大家注意这个你可以把它理解为啊，这个更深的概念，我我没有办法给大家去讲，因为这里面太太复杂了，前端的内容，但是呢，你可以想象一下我们的Java里面是不是有一个静态方法呀，啊，你可以把它理解为我们Java的静态方法，也就是说整个的这个，比如上下文对象还没有创建出来呢，然后这个方法呢，就是会先行执行，在服务器端，在前端服务器端先行执行，所以整个的这个asy c data里面，它是没有办法写this的。

这能理解吧，它是没有办法写this的，这里面没有this，就像我们Java当中的静态方法当中是没有办法写this的，因为静态方法是先于啊对象的创建执行，那所以这个地方没有办法写this，那怎么办？这地方就不能这么写，那怎么写呢？恰好这个next给vsy c data塔啊，这个输入了一个全局的这样的一个上下文对象，这个上文对象你叫什么都行，这个对象里面呢，有一个叫做Dollar配置的一个属性，所以我们输入它完了之后呢，可以配置点X。有一个叫做这个呃，Dollar X一个属性啊，你可以配置掉X，然后我们可以看一下这个配置里面有什么，我先把这个都屏蔽掉啊。

Can so.log这个参数注意啊，不是说你不定义就没有，是你定不定义，他都在这，你要想用，你就把起个名字，然后就直接拿出来用就行了，你要不想用，你就不用起名，你也不用用它就直接做后面的事情，明白吧，所以这个参数呢，是啊，整个纳斯人家已经准备好的，已经固定在这儿的啊，它呢，就可以把咱们当前的页面当中的上下文当中的所有的信息呢都取出来，所以我们可以看一下。注意这个是在服务器端执行啊，那在服务器端执行呢，就意味着。你看它在这个地方呢，有一个叫做next SSR，就叫server side，对吧，在server server side端置型，然后这就是刚才咱们那个配置，这是个引用类型，然后这里面有好多内容，包括你咱们之前在配置文件当中的一些配置信息，你看在这都能找到是吧？这是之前咱们配置，包括路由信息啊，这里面有拿到一个路由对象，还可以拿到had对象，还可以拿到next对象，Render对象，Data对象，反正你知道的不知道的，还有一些生命周期的这些方法，对吧，都在这块定义着呢，Methods component content。

啊都有，然后这里面有很多东西，你看这个是上下文环境，这个嗯快对象，然后这里面有非常多的内容啊，你再往下找一找。好，其中这里面有一个内容呢，这个它后面由由于展示的原因吧，看不见了，太太长了啊好，那么其中这里面有一个内容呢，叫做。点他还有个这个对象。

你看这个就是他的那个封装的对象。就是所有ex对象的内容，Ex access里面有什么request delete呀，Get head options post put patch呀，对吧，有这样的一些基本的方法啊，然后这个就是我们的X，所以呢，我们这面呢，其实就可以怎么写呀，可以这样写，配置点X，可以是这样写，但是呢，我们之前学过这个结构赋值，结构赋值的话呢，就是比如说这个配置这个对象里面的其他的对象，其实我都用不上，我只用这个X，那我们完全可以用解构的形式，直接把X写到这就可以了，注意大家，大家注意这块是一个结构的形式，结构的形式就是写一个大括号。对吧，大括号，然后我把这个呃，对象里面的X属性拿出来，那这样的话我们就可以直接这样写了。好，这个结构赋值，如果大家不记得了的话，去看一看咱们前面啊，前端基础那块啊，相关的内容啊，ES6当中相关的内容，好，然后呢，这样的话呢，我们这个X呢，就通过这种方式就直接拿到了哈，我们看一下是不是也是跟刚才一样能拿到这个X。

好，这样的话，你看还是这个对象啊，我们在这呢就完全拿到它了，拿到它之后呢，在这面我们就避免了，像这样使用this加X来调用X，直接就调用就好了，调用好了之后呢，这块也是一样的，你不能用this IP它是没有this的。啊，它是没有对的，那所以这怎么办呢？这个地方执行的时候，这个东西还没定义呢，所以呢，我们一般情况下呢，会在这个地方呢，去返回一个IP，而且这个里面返回的值呢，不能和这个里面相同，相同的话他俩就冲突了，你会发现最后呢，我们页面当中实际上数据模型呢，是它俩合并起来的一个结果，就是有IP，还有IP1对不对，但是名字不能相同啊。

相同就会引起歧义，所以呢，这面比如说我叫IP1的话，我能不能这样写呢，就是。this.ip等于不行为，为什么？因为刚才说了就是不能用this啊，它不能用this的话，那我这个IP1我怎么返回呢？嗯，看看这样能不能返回。就是把刚才这个得到的这个response在这个地方呢，付给这个IP看看好不好。然后我们把这个听一下啊。然后大家看就报错了，为什么报错了呢？他说response is not DeFined，为什么response is not DeFined呢？在哪报的错呢？在这个第28行。这个地方就response，未定义。好，为什么response会被定义呢？大家想这款。

是个阿贾克斯请求，这个阿贾克斯请求呢是一个异步操作，好，既然这个阿贾克斯请求是个异步操作，就意味着这个then里面的这个语句，也就是说这个response响应回来之前，这个return早就被执行了。所以呢，异步操作就意味着这句话和这句话他们实际上并不是在同一个，用我们Java里面的那个概念说，就并不是在同一个线程当中执行的，对不对啊，它俩是异步执行的，所以呢，它很有可能就先于这个response返回了，那这样的话呢，就完不成我们整个这个代码的赋值工作了，好，现在我们这个是在服务器端执行的，其实我们并没有像前端那样要求一定说让他做走个异步，因为我们总之他也是在服务器端啊，异步的需求是在哪？要的是在客户端需要的就是我客户端该干嘛干嘛，然后你后台其悄悄发一个异步请求回来，然后给我返回，结果现在这个东西既然已经在服务器端执行了，其实这个异步呢就没有必要了，那我们把它变成同步请求，怎么变成同步请求呢？就asy nc啊。

好，然后呢，加这样的一个关键字，那同时呢，这个里面then不要了，变成wa，好等待等待它执行成功，而且这个wait必须和前面这个asy c配套出现，他俩同时出现啊，等待它执行成功，再继续执行下面的代码，所以这个就变成同步了，好，然后等它执行成功之后呢，我们声明一个，它的结果呢，直接可以作为这个啊请求的返回值返回了啊，就是如果它是一个同步请求的话，那么这个请求的结果就是response啊，如果它是一个异步请求的话，那么他的请求的结果就在问里面。

来的明白吧，这两种方式啊，然后所以呢，既然它变成同步的了，那就一定是它反应响应结果了，才给它赋值，它有值了才能够付给IP，这样的话，我们的这个代码执行的流程就是按顺序执行的了啊好，然后我们再来看一下。有点慢哈。我把这个关了，重访问一下，好，大家看F12，主要看那个IP有没有被复制。大家看这个IP是不是如愿以偿的被我们附上值了，那也就是说通过这种方式我们给IP1赋了值，然后接下来我们看一下IP1能不能被渲染到页面当中。

大家看IP呢，已经成功的被渲染到页面当中了，那么它和之前我们写的这个代码有什么区别？啊和我们把这段代码和这段代码做一个比较啊，这段代码大家知道它是一个。客户端渲染对吧？啊，在客户端拿到的数据，然后渲染，然后我们现在来看这段代码，这段代码现在呢，渲染出来的数据呢，在这儿。然后接下来呢，右键大家看查看网页源代码，你看一看这个您的IP，我看一下啊。给他渲染。嗯，在。FF，这么看吧。F12，然后接下来呢，看一下这个network这块，然后呢，我们看一下这个XR，我刷新一下，大家看我这种的话，我的这个请求是不是在浏览器端发送出去的。

这个地址。这个地址。有没有？是没有啊，这两个都是它这个辅助的一些工具啊，我们不用关心它，好那么是没有的，我们再来看一下，就是之前的这个把它屏蔽掉，然后把它放开。大家看。Get is看一下。啊得得把他屏蔽掉是吧，屏蔽多那个放太多了，就他。好，大家看一看，这一回我们有没有这个请求，有。看见了吗？这是有这个请求的，有这个请求意味着什么？意味着这个请求是不是从客户端的浏览器发送给服务器，服务器又返回给浏览器啊好，这是有啊，就是有，然后我们再来对比一下刚才那个。

那刷新一下哈，把这个之前的清一下刷新，大家看有没有那个请求是不是没有了。没有了意味着什么，这个请求并不是由我们的客户端发送给服务器的，而是由前端服务器发送给服务器的啊，所以呢，我们这面得到的一个结果呢，它其实呢，是一个完整的结果啊，是一个完整的结果，那这个完整的结果呢，就意味着我们整个的这样的一个渲染是在前端服务器端完成的，而并不是从浏览器端得到了一个Jason数据，因为我们这边没有拿到任何这的结果，没有没有拿到任何响应的这个响应的这个IP的结果，对不对，不是在这拿到的，不是在这组装的，是在服务器端组装的啊，是在前端服务器端组装，所以这块呢，就是我们所说的服务器端渲染。