22-服务端渲染SSR-Vue3案例-开发环境原创

我们继续的来学习V的高级应用这一章，我们来看一下如何通过V实现服务端渲染，服务端渲染又成为SSR，也就是server side run。我们可以将view和react这些框架运行在note JS环境中，通过预渲染出来的HTML在客户端进行注水化处理，从而实现对SEO友好的网站。官网上给的这个文档说这是一个底层的API，专门是为库和框架的作者而准备的。如果呢，我们的目标是构建一个应用程序，那请确保我们优先查看了这个章节，更上层的SSR和工具我们点开看一下。这里边呢，给我们提到了关于SSR的libraries，也就是一些库，像v SSR v plug in SSR ss等等，这些库呢都支持RA和VIEW3，另外呢还有一些框架，比如像vtage v text以及rocks等等等等，这一章我们给大家介绍的也是通过low level API来实现服端渲染。

学习这个部分的内容呢？假设我们要对view和react都有一定的了解。我们先来看一个V3的服端渲染的案例。回到Vs code，我们来创建一个新的项目，按照CTRL加波浪线打开我们整个项目的根目录，执行一下PN PM create wait。起个名字，Wait。Advanced。SSR view3。回车选择view view，然后CD到v advanced SSR view。三、执行PN PM install，安装一下依赖。

然后我们可以启动一下我们的项目，执行PNPMDV。好，这样我们的项目就启动起来了，我们可以访问一下logo house的3000。我们先来观察一下我们的项目，打开v advanced SSR view3，这是一个最基本的view，通过V创建起来的项目，然后在这里头呢，我们可以做一些改造，把它变成一个基于路由的项目。我们可以看一下S2C下载man.JS，这里呢，很显然我们只是加载了app.view这个组件，还没有创造路由。那我们可以在S2C里边创建一个新的文件夹，取名为pages，我们来创建两个页面，这里呢，我们新建一个叫做home.view然后我们通过VT创建一个模板，这里呢，我们写个D，写一个home，保存一下。

然后我们在配置词下面再创建一个新的文件，叫做about.view通过VT创建一个模板，然后div，我们写一个about。好，两个组件创建好了以后，我们通过路由来去加载这两个组件。我们在src下面创建一个新的文件夹，叫做rootr，然后在这下面创建一个新的文件，叫做roots.js。然后我们编写一段JS定义路由来去载入我们的组件。首先呢，我们先做一个导入，从哪里呢？从view router，那我们还得需要安装一下VI router，我们先退出这个服务，执行一下PN PM install view router杠打S。

安装好了以后呢，我们可以从这里边载入create。Router这样的一个方法，我们可以给它起个别名earth_create router，接下来呢，我们再去导出一个create web history。这样的话我们就可以创建一个路由，并且在页面上来去定义它了，然后呢，我们来去载入我们在配置四里边定义的所有的组件，我们可以使用V给我们提供的这个import.me的globe这个功能，我们先定义一个变量配S等于import.mat.globe后边呢，我们可以写入这个路径，就是当前目录下的pages下的星点view，我们这个入词点JS是放在了router这个目录下面，所以呢，我们还得上一层，上一层目录下的pages下的星点view，关于这个import.might的globe我们在前面也介绍过了，这样的话呢，它会返回一个数组，那接下来呢，我们对这个数组进行遍历，我们可以定义一个roots，通过object.case我们就。

就拿到了配S这样K的一个数组，然后呢，我们进行map map里头呢是一个回调函数，我们可以拿到这个路径，这个函数题里边我们就可以去做一些详细的处理了。首先呢，我们先定义一个变量name，让它等于pass.match我们去定义一个正则，这个正则呢，其实事实上就是pages下面的任何的以点view作为扩展名的组件，我们可以写一个斜线，斜线在这里边来定一个正则，我们加一个转移字符点，再加个转移字符斜线，然后pages下面呢，就是一些点will文件，所以呢，我们可以定义成任意的字符，写个小括号，写一个点星表示任意字符，然后后面呢，再加一个斜线点will表示我们以点will结尾的，所以我们再加个Dollar，那最后呢，拿到这个信息以后，然后我们写一个中括号一最后呢。

那我们再去把它通过to lower case来去变成小写。好，这样的话，我们就拿到了这个文件的名字，这里还少了一个点，再加一个杠点。好，这个name获取到了以后呢，我们可以做个测试，我们先去对外暴露个东西，我们在这个外头呢，我们叫export，然后function去暴露一个函数，这个函数的名字呢，我们可以叫create router，然后在方法体的里头，我们去返回一个下划线，Create router，这是真正的创建路由的一个方法，在这里头我们先去定义一个history，这history的话呢，我们先使用create。

Web history，然后我们调用一下这个方法，接下来呢，我们再去定义一个roots，这个roots呢，就是我们上边定义的roots，好，我们为了检查这个name到底是什么，我们可以consolelo一下name。好，这个路由的基本定义我们就完成了，接下来呢，我们在man GS里边去引用一下这个路由，那我们就直接import，然后from当前下的router下的roots.gs这个GS呢，导出了一个create router这样的一个函数，所以在这里边呢，我们可以把它导入进来。那这是一个函数，在这里边呢，我们要去应用一下这个路由，所以我们在这前面写一个use给这个函数呢，我们可以传入一个create router这个方法，这个方法的话，我们需要调一下这个方法，调用完了以后呢，就返回了一个create router这个函数的一个执行结果，所以呢，我们直接可以通过use子来去引用它。

然后我们保存一下，我们重新启动一下服务，执行PN PM run d。好，起来以后呢，我们再次打开浏览器，我们刷新一下，好，我们打开检查控制台conso，我们看到呢，这里的above和home就定义出来了，但这里面呢，有一个需要读取路径的信息，我们一会儿再去解决它，所以现在呢，我们拿到的就是一个g about和g home啊两个内容。好，返回Vs code，我们再次的进行路由的编写，那在root.js这个文件里头呢，我们现在已经拿到了这个所谓的文件的名字，在这个打印里边，我们看到about和home就是我们这个组件的字，不过已经转成小写了，并且呢在前面还加个斜线，那么现在我们知道这个name是什么内容了，那么接下来呢，我们开始准备往下写，继续的去使用我们这个name，然后我们可以返回一个对象，这个对象呢，作为我们这里root的一个对象内容，那它通过map方法返回的对象，很显然这个roots是一个对象数组，那么在这个结果里边呢，我们先定义一个路径，路径的话我们还可以看看这个name是否等于等于。

所谓的杠home，如果是的话呢，我们就可以返回一个斜线，让它做一个基本路由的跳转，然后在这后边呢，我们再加个冒号name，就是如果我们这个路由不是杠home的话，那么它就取到我们这个name的名字了，接下来呢，我们再定义一个component，就是路径匹配以后的这个组件，这里头呢，我们可以使用配置四。

然后我们再加一个中括号，把这个pass放进去，那pass是什么呢？刚才我们知道就是我们在这里头拿到的每个路径的内容，其实这句话相当于我们一个动态的一个组件的载入，我们相当于一个import，一个函数的调用，里边呢就是一个所谓的叫做上一层的pages下的星点view，好了，这个component以及path我们都定义好了，返回这个对象呢，会装载到一个root的数组里，那这样的话我们roots就定义好了。那接下来呢，我们再次打开浏览器，好，我们看到现在呢，页面上显示了一个正常的页面，但事实上呢，我们的路由还没有真正的渲染出来，所以我们回到代码，再次打开我们的app.view。这块的代码呢，是我们之前的代码，我们暂时可以把它删除掉，然后呢，我们定义一个真实的一个路由的定义，我们在template里边去定义一个div，在div的下面我们先定一个router link。

在router link里头，我们写一个home，我们给route link定义一个属性to，它的值呢就是斜线，然后我们再次定义一个route link，然后再定义一个属性to，它的值呢就是斜线。about，再去写一个内容，我们再去给它定义一个显示的内容，叫做about。那有了两个链接以后，我们再去定义一个路由的插座outlet，我们定义一个root view，让路由渲染的组件都放在这里头进行显示。好，这个改完了以后呢，我们再次回到浏览器，大家看到现在我们有一个home about这样的一个路由了，这是一个使用V加VIEW3定义的一个路由，而且呢是在浏览器端定义的，那么接下来呢，我们开始准备一步一步的逼近我们的SSR，看看如何通过服务端渲染来去渲染出这个路由来。

刚才的这一波操作呢，都属于VI3的基础知识，下面呢，我们在S2C的外边去创建一个新的文件，我们取名为叫做server.js。那这个服务端渲染呢，我们可以把这个后端的服务通过note JS环境给接管过来，我们得需要去通过一个note JS的服务，我们可以安装一个note JS的框架，比方说X express，那我们现在可以把其他的。先关闭掉。然后呢，我们再次停止这个服务，在这下面我们安装一下PN PM install express，安装完了以后呢，我们就可以使用这个X express了，我们定义一个常量叫做X express，然后等于require，我们去载入一下express。

载入进来以后，我们再去定义一个常量，当然这个常量的话呢，我们是从V里边解构出weight的相关的一些创建server的方法，所以呢，我们这里边要去解构出一个create server方法，那我们可以给它起个别名叫做create server。我们去定义一个函数，函数的名字呢，我们可以取名为叫做server。然后呢，我们可以在函数题里边做一些事情，比方说我们先定一个常量APP，它应该就是X express的一个实例了，由于这里面呢，我们是以中间建的模式来创建V应用的，这样就会禁用我们VT自身携带的HTML服务器的逻辑，并让上级服务器来接管我们整个的服务的控制。如果我们想用使用wait自己来去创建一个HTML的服务逻辑的话，我们可以去做一些配置来完成，比方说我们可以定一个常量cost。

Weight等于，然后呢，我们就去create一个wait server，那这个server的话可以去加一个配置，这个配置就是server，它的具体的内容就是个对象，我们来定义一个属性叫做midwere mode，这个值呢有两个，一个是HTML，一个是SSR，那如果是我们纯粹是创建一个服务的话，就像我们之前的为的那个server服务，那我们选择HTML，我们先使用HTML，我们来看一下效果，然后在下面呢，我们得需要去通过P点柚子去创建一个connect的一个实例，我们可以使用weight这个实例上的middlewaes，这样的话我就创建了一个connect的一个中间键实例，然后最后我们要去通过app.lesson去监听一个端口，比方说这里我们端监听3000端口，这。

在server的方法呢，我们已经定义好了，我们得需要去执行一下这个server方法，所以呢，我们在下边去调用一下create server，调用完了以后，我们就可以去运行这个server的JS了，注意这个JS呢是在note JS的环境里头，并且呢，它把我们之前wait的那个server，也就是我们在package的Jason里边启动的这个wait来接管起来了，然后通过express来创建了一个server，所以呢，在这命令行里边我们可以执行no的server.gs好，我们看到呢，这里报了个错，这个错误信息呢，其实是比较诡异的，其实它的原因是这样的，就是我们这个create wait server，它返回的是个promise，所以呢，在它前面我们需要加一个a weight，然后去等待它返回的结果，但这个a wait有个条件，就是它所在的这个函数一定是一个异步函数，所以呢，我们在这函数前面加个think，好，接下来我们再次去运行一下。

好，我们发现呢，这里头已经正常的启动起来了，我们再次打开浏览器，我们看到呢，现在这个页面仍旧是能够正常的显示出来，然后我们点击一下也没有问题，这跟之前呢是没有任何区别的，不过呢，我们是使用了一个note GS来去接管了我们之前的启动服务的方法，那接下来呢，我们来开始正式的用SSR来去实现我们这个应用，那我们可以把这个middle mode HTML改成SSR，改完以后呢，我们再次保存这个文件，我们重新的启动一下我们这个服务。

好，启动完了以后呢，大家发现它就停留在这个地方了，我们回到浏览器，诶发现呢，这个路由已经不能够正常的访问了，那说明我们已经把这个后端变成了一个SSR的形式来提供服务了，所以呢，我们还得需要去做一些事情，第一步呢，我们得需要在server JS里边去定义一个所谓的任何请求的监听，因为现在呢，我们把前端的所有的请求都拦截下来了，我们可以把它放在这个下边。执行一下app.u然后路径的话，我们可以用星表示，任何的请求都会走我这个路径后边呢，是一个回调函数，那学过express的同学应该知道，在这个回调函数里边有一个request和RESPONSE2个对象，我们可以在这个函数题里边呢，去做一些异步的操作，所以呢，我们可以把这个函数对应成a think，也就是异步的函数。那下面呢，我们在这个方法题里边去定义很多内容，那具体的定义什么内容呢？我们来一步一步的做，首先呢，我们先去定义一个URL，它的值应该就等于req，就是request，后边呢，我们定义一个original URL，也就是它的原始的URL，拿到以后呢，我们可以去做个实验，比方说我们可以console log URL来我们看是什么内容，我们可以重新的启动一下我们这个服务。

启动完了以后呢，我们到了浏览器上面刷新一下，好，我们看到呢，现在没有任何的反馈，所以呢，我们应该写一个res.end好让它结束了，我们看到这里头有个打印了，就是about，对吧？在浏览器上面呢，我们并没有看到东西，但是我们在这里边看到了这个原始的URL，就是我们在浏览器里边访问的这个杠about，好了，URL拿到以后呢，那么接下来我们就可以去做后面的事情了，首先呢，我们得需要去做一个try catch来去捕获一下错误，那至于说catch的底下写什么，我们一会再写，我们先写TRY里的内容，第一步呢，我们先要读取我们的index.atml就是我们这个文件，那index atml的话，我们得需要一个文件的一个模块，所以呢，在这上边我们得需要去。

载入一个文件模块，我们cost一个FS等于require FS载入进FS以后呢，我们在这里头就可以做文件的读写了，我们可以使用light来定义一个变量，叫做template，后边呢，我们可以使用fs.read file加一个think think的话呢表示同步，那我们就省得再再去定义回调函数了。在这个方法里头呢，又要传两个参数，第一个呢，就是我们去定义一个pass.resolve那这个pass现在还没有，所以呢，我们现在得需要去定义一下这个pass，从我们弄的JS的原生的模块里边载入进来，那我们就可以去调这个pass resolve了。那我们去看第一个参数下划线，下划线DR name表示我们server的JS所在的物理路径，也就是这个SSR view3的这个目录。

库，然后后边呢，我们可以去读取这个目录下面的index.atml因为这个indextml呢跟我们sir的JS是在同一级，拿到以后呢，我们还别忘了传递第二个参数就是utf-八，让它能够解析任何的字符。好，第一步读取HTML已经完成了，并且呢把它装载到了template这个字符串里，那么第二步呢，我们就使用wait HTML转换，这家呢会注入wait的HML客户端，同时也会从V插件中应用我们HTML转换，那我们现在可以去重新的定义这个template，然后它的值呢，我们可以去调一个方法叫做weight.transform index HTML，它需要传递两个参数，第一个参数URL，第二个参数就是template。

那经过这个转化以后呢，我们的模板应该发生了变化，我们可以去演示一下，但是这个方法返回的是promise，所以呢我们要在这前面加个AV，那我们就直接的去打印一下这个template，看看是什么内容，我们需要重新启动一下，大家发现每次我们都需要重新启动，所以呢，我们可以安装一个工具，让它只要在我们的弄的JS环境下面，我们改了JS，它就会帮助我们重启，这样的工具有很多，比方说弄的monitor啊，Supervisor啊等等哈，现在呢，我们先出来执行一下。

PN PM install，比方说node monitor，然后杠G，我们在全局里头安装这个工具，然后我们执行node monitor，然后当前下载server JS，好，这样的话呢，当我们去改变这个代码的时候，它会自动帮助我们重启好了，那接下来我们到前端呢，再次刷新一下页面，好接着我们到后端看一下，这里头就返回了一段HTML。这个atml为什么打印在我们note JS环境下呢？因为我们这个打印是在后端打印的，所以呢，大家看到note JS这里边就返回了我们HTML的内容，好，那经过这样的一个转化以后，那么接下来呢，我们就来看第三步，我们要加载服务器入口了，这个我们可以通过wait.ssr load mode来自动转换我们的ESM源码，就可以在note JS中运行了，无需打包啊，我只要我们提供HMR的相关信息就可以。好接下来呢，我们就来去定义它，我们来定义一个常量，然后等于a wait，后边呢，wait.ssr load module，那接着我们就来开始准备载入一个所谓的叫server的一个JS，这个JS的话呢，我们可以把它放在S2C的下面，一会儿我们去创建，我们先把路径写好，应该是。

当前文件夹我们可以写个杠，S2C下的inry-server.gs大家知道这个JS呢，现在还没有，那我们现在呢开始准备去定义这个JS，我们在S2C的下面创建一个新的文件，好，我们起名为叫做intry-server.gs那这个GS干什么事呢？就是刚才我们说的，它可以帮助我们进行模块的转化。

下面呢，我们就来编写这个server的内容，首先呢，我们先把慢文件导入进来，我们要import，然后from man JS，就是我们当前目录下面有个man JS，这个man JS的话，这是之前我们使用浏览器端进行的应用的创建，那么这个代码呢，可能就要修改，所以呢，现在我们先把这个代码先删掉，我们要重新编写一下mad.js的内容，我们呢，先去import一下APP，然后from，应该是当前目录下的app.view导入进来以后呢，接下来我们再去import导入，然后从哪里呢？从view里，从view里边因为我们要做SSR，就不断渲染，我从这里边呢，再去导入一个create SSR APP，然后我们再去做一个导入，然后from，应该是当前下的router。

下载roots，我们把我们路由导入进来，当然了，这个方法呢，就是create router，这个我们刚才已经使用过了，接下来呢，我们就去export一个function，我们要导出一个函数叫做create APP，我们要重写这个create APP那里头呢，我们可以去鉴定一个常量APP，等于create SSR APP，好，然后呢，把我们的APP这个组件给放进去。接下来我们再去定义一个常量，名字叫做routeer，好，它就等于create router，把我们刚才定义好的那个方法调用一下，然后我们再去执行一下app.use这个方法，把我们的router给放进去，最后呢，我们要返回两个对象，一个就是APP，一个就是router，好，这个写完了以后呢，我们接着再回到intri.serve JS，这样话我们就可以导入这个man下边导出的那两个对象了，这个方法呢，当然就是create APP了，导入进来以后，我们接着再去导入一个东西，从我们的view下的。

叫做server render，这里边我们要导出一个方法，叫做render to string。好，这个方法导出来以后呢，接下来我们就可以定义一个函数了，这个函数的名字我们可以定义成render。我们可以给这个函数定义两个接收参数的型参，一个是URL，一个是manifest manifest我们先不定义，那在这里头呢，我们来开始准备去定义一个常量，然后我们去调一下create APP，然后解构出一个APP，还一个router来，这个我们刚才已经看到了，在漫JS里边呢，我们已经做了导出了，那么定义好这个导入以后，接下来呢，我们就来开始准备去调用rootor下的push方法，我们给它push个路由，这个路由的话呢，就是我们传递过来的URL，然后接下来我们再去调用一下routeor.is ready。

注意，这个方法反回的是promise，所以呢我们要加个wait，那么这个函数呢，也得需要加一个a think，由于这个方法呢，我们将来要去导出，所以呢我们在前面还要加个export，好了，那这个定义好了以后呢，接下来我们再去定义一个上下文对象context，我们先首先定义一个空的对象，接下来呢，我们再去定义一个HTML，这个我们还是仍旧是用a wait去等待一个promise，我们调一下render to string，这个方法呢，需要传递两个参数，一个是APP，一个是contest。

好，HTML达到以后呢，我们就直接把渲染好的HTML给返回回去就可以了，那么这个render函数其实实上就是给一个URL路径，然后呢，我们通过render图string，把我们的这个传递过来的string转化成一个HTML，这样的话呢，我们在后端把真实要返给浏览器的HTML给转化出来，然后我们才能够在浏览器上渲染，那么这个软方法定义好了以后呢。我们再次回到server.js。那看我们再去SSR load module的时候，我们就可以通过inttra server JS里边显露出刚刚我们定义好的render这个函数，这个函数的话应该就是我们这个方法导出的，那我们看到这里边我们导出一个render，定义好了一个render函数。然后接下来呢，我们再往下做，我们来做第四步就是渲染我们应用的HTML，这里呢，我们假设inttra.SOJS导出的这个runner方法函数呢，调用了适当的SSR框架的API，那我们现在呢，开始准备定义一个常量叫做APHTML，后边呢，我们可以用a weight去等待一下render调用的结果，我们可以把这个URL呢传递给这个runner函数，那么这个p.HTML的话呢，其实上就可以显示了，我们可以consrlo一下PHTML保存一下。

那我们现在在浏览器上面呢，我们再去刷新一下，好，我们的后端来看一下这个打印结果，好我们看到呢，仍旧是返回了这样的一段HTML，那你可能会说这个HTML跟刚才有什么区别呢？其实事实上是有区别的，它已经做了这个转化了，那么这个转化我们要干什么呢？我们得需要这个AP的atml，把我们准备要返回给浏览器的内容装载到我们的页面上，我们在浏览器上很显然没有看到任何的内容，就是因为我们还没有去装载，那我们可以再次打开index的TL去定义一个注释，这个注释的可以帮助我们进行内容的加载。

那我们可以在这里边写一个叹号杠杠，这样的话我们可以在这里边去写个注释，当然我们也可以不加这个空格，SSR after late，当然这个注释你写什么都可以，我们一会儿呢，要把它给替换掉，这多了一个间号，我们要把它去掉，那接着我们就把它给复制一下，到达我们server GS，然后做一个替换，替换的方法呢，就是我们可以定一个常量HTMLL等于template，就是刚刚我们定义好的那个模板，然后呢，我们再去做一个replace，然后我们要把一个字符串替换成一个新的内容，就是APHHTML，就是把我们刚才拿到的这个HTML。然后替换到我们的server athlete里面去。

好，接下来呢，我们就可以把HTML返给我们前端了，最后一步我们要返回渲染后的HTML，我们执行一下res.status我们发给前端是200，然后呢，我们执行一下set。我们定义一下这个返回给前端的content type，也就是类型，它应该是个text HTML，那最后呢，我们要在这下边执行一下点end。这N以后呢，把HTML就返给浏览器了，我们这个N呢就可以删掉了，好保存一下，然后接下来呢，我们的页面上刷新一下。好，我们返回代码来看一下这是什么问题，我们可以把这个catchche里边的这个内容给定义好，然后呢，我们就可以捕获这个错误了，也就是让wait来修复我们这个堆栈，可以映射出我们在实际开发代码中的哪些问题，我们可以来一个SSR fix staches里边呢，我们传个E，接下来我们再cancel.error打印一个错误，把E放进去，然后我们再来个les.status我们给给浏览器返回一个500的状态码，然后呢，我们再end，然后返回1.message。

我们来看一下到底是出了什么问题，好，我们看到这里的已经有打印了，说window没有定义，我们在浏览器上看也是这样的，说window没有定义，那接下来呢，我们就来看看，呃，这个问题是怎么出现的，我们现在呢，可以把这些代码先都删掉。好，那window没有定义，很显然我们当前的这个环境呢，并不是呃，通过服务器端渲染来产生的，肯定里边用了关于浏览器的一些对象了，那我们想一想，应该是出在路由的那个地方，我们可以打开root.js，在这里边呢，我用的是create web history，那我们得需要去把它转成一个基于内存的一个路由，这样的话呢，我们可以在服务器端来进行一些操作，那学过VI3路由的同学应该知道，我们曾经有一个叫做create memory history，也就是在内存里创建路由，我们可能一直没有用过，那现在呢，我们应该知道了，它就是服务端渲染啊，去使用的一个路由的方法，那在这上面呢，我们可以去呃载入一个新的路由，叫做create history。

那拿到它以后呢，那我们得需要去做个置换，什么情况下才使用这个呢？那我们也可以把这个改造一下，我们可以使用V给我们提供的import.mat.en nv，它后边有个SSR，如果是SSR环境的话呢，那我们就使用create memory history，否则我们再去使用。

Web history，好，这样的话呢，我们把路由改造成非浏览器的环境，我们再去到页面上刷新一下，诶，我们发现现在这个路由跳转就没有问题了。一个SSR的关于开发环境的代码我们就写好了，那我们验证一下它是不是达到了我们要求呢？我们现在来检查，在cons这个地方，我们再刷新一下，点一下页面，然后我们看一下网页源代码。好，我们看到这里果然都是一个在页面上渲染好的这样的一个内容，这就说明将来我们爬虫去爬取我们页面的时候呢，是能爬取到相关内容的，而之前呢，我们没有这些内容，只是一个div的一个空的div，现在呢，我们已经有实质性的内容渲染了。好，这就是服务端渲染的作用，那大家想一下，如果是我们整个页面都被渲染成一个真实的这样有内容的页面的话，那么搜索引擎呢，就可以抓到我们页面的内容了，所以这就是我们服务端渲染的一个最大的意义所在。

这一节的内容比较多，大家仔细的去照着视频啊，去敲一下代码就可以了，这是在开发环境下通过wait来集成SSR，那么生产环境的话，我们wait是如何集成SSR呢？我们下一节来介绍，大家加油。