25-服务端渲染SSR-React案例原创

这一节我们来看一下react在wait环境下如何实现SSR。其实它的实现方法跟VIEW3特别的类似，下面呢，我们就来看一个react实现SSR的案例。回到Vs code的，我们现在呢，已经把代码给大家写好了，因为它的实现方法，因为它的实现方法跟V3特别的类似，所以呢我们读一下代码就可以了，首先呢，我们先来看一下这个文件夹，它里边呢包含了两个文件夹以及一些文件。我们大概看一下这两个文件夹呢，一个是node modus，一个是SRRC，毫无疑问src里边放的就是我们的原文件，那在外侧呢，我们看到有一个index hml，就是我们的入口文件，Package的Jason弄的JS的包管理的配置文件以及pro。以及per，就是我们的预渲染文件，还有server的JS，那么这些文件呢，其实上跟我们之前的VIEW3的那个配置有点类似。

那下面呢，我们来先运行一下这个项目的效果来看一下，首先呢，我们在这个文件夹上面点右键，然后在集成终端中打开，然后呢，我们执行一下。首先呢，我们在这个文件夹上面点击右键，在集成终端中打开。然后我们先打开这个package.jason我们来看一看这些脚本，然后我们运行一下，这些脚本呢和我们VIEW3的SSR的脚本特别的类似，Div和serve肯定是一个生产环境和开发环境的两个配置，那build client以及build server就是将我们的项目build到一个client文件夹里以及server文件夹里，它的内容分别是wait build杠刚、after DR client以及wait build杠刚SSRSRC下面的try server g sx杠杠after DR r server。我们看这个跟VIEW3的SSR的配置是一样的。

那当我们执行build的时候呢，相当于把这两个命令都同时的执行了一下，它分别的会在client以及server里面产生我们的文件。那还有一个generate，就是生成静态资源，我们看它的内容是wait build，刚刚RDR目录下的static，然后又执行了n PM run build、冒号server，以及又执行了no pre reer，那这个跟我们VIEW3的SSR也是一样的，那下面呢，我们分别来做个运行来看一下效果。首先呢，我们先执行一下PM PM re build，这样的情况下就会在我们当前的工程下面产生了一个Dis目录，在这个目录下面我们能看到client以及SERVER2个文件夹。那接下来呢，我们就可以运行在生产环境和开发环境里边的两个所谓的server。

首先我们运行一下P，首先我们运行一下PN PM run d，也就是运行开发环境的效果，我们看这里边有个local house的3000，现在呢我们已经可以访问这个地址了，那我们现在就可以访问一下，我们看到这里边呢，打开的就是这样的一个所谓的路由，不过这个效果呢，是用react代码来实现的，我们点击一下about in home，分别打开了不同的内容。那接下来呢，我们来退出来再去看一看，在。生产环境下面。在生产环境下面的效果执行一下PN PM serve。号称就是log house的3000，我们只需要在这里边刷新一下页面就可以了，我们看到效果跟刚才的是一样的，那另外呢，它还有一个生成静态页面的效果，我们退出来执行一下PN PM run gen。

那它就会在data目录下面产生一个static这个目录，这里边包含了我们生成的一些静态资源，那我们也可以去运行它，点击右键在集成终端中打开，然后我们执行一下，然后我们执行一下NPXHTTP-server。这样就会在。LOCALHO8081上面去启动我们这个服务，我们可以打开这个服务看一下，那我们点击啊这几个链接发现呢，效果是一样的，不过在这个情况下呢，我们运行的都是一些静态资源，我们就可以把这个目录部署到任何的地方去，那通过这个演示，我们发现在RA环境里面实现SSR跟VIEW3是非常类似的，那接下来呢，我们来仔细的研读一下里面的代码。首先我们来看一下外侧的这个所谓的index的HTML，这是我们的入口文件，这个文件呢跟我们VI3是一样的，这里边有一个注释PHHTML，一会儿呢，我们就把各个路由的组件装载到这个位置，这里呢还加载了一个模块src下的音锤点JSX那V。

唯独跟我们VI3不一样的地方就是这里边的是GSX，因该是react代码，那现在呢，我们来看一下所谓的S2C下的intri collect GSX，首先呢，它从RI do里边结构出RI do，那很显然是在浏览器端进行渲染，那另外呢，从RI do。另外呢，从router DOM里面结构出broad router，这是我们路由的根组件，那通过red DOM里边的hydrate，也就是执行我们所谓的服端渲染的一个方法，在这方法里边呢，我们去把这个所谓的路由的组件给装载进去，外侧路由套过了一个APP，那么APP呢，就是我们write这个组件了，在这组件里边呢，它通过red do里边解构出link root switch3个关于路由的组件，然后又通过import.me.lo e来去加载我们配置下面的所有的组件，这就是。

这些组件呢，都是我们的页面了，然后我们把这个配置词数组做个便利，那会拿到我们每一个组件的名字，然后构造出这个组件的一个所谓的路径，那这个思路呢，跟我们之前的VIEW3的思路是一样的，最后返回一个对象数组，这里边定义了路径以及组件，然后呢，通过。然后呢，通过react的组件渲染方法，先渲染一个路由的导航，然后又去加载了我们这个所谓的导航匹配的组件，那这个具体的re语法呢，我们就不再细说了，那熟悉re小伙伴呢，应该对这个代码非常的熟悉了。那接下来呢，我们再来看回到我们刚才的呃，Index atml，这里头引到了intri client，那我们再去看一下client，那这个代码呢，我们基本上就看完了，那么接下来呢，我们再去看一下外侧的所谓的叫。Sjs在这GS里呢，我们来仔细的看一眼里边包含什么效果，首先呢，我们回顾一下我们在VIEW3里边做的这个事情，在VIEW3里边呢，我们也是通过create server来创建了一个server，然后呢，我们运行这个create server，那这里边的运行呢，它是返回了一个promise，在promise的回调函数里边做了一个lesson端口的监听。

好了，那接下来我。好了，接下来呢，我们重点来看一下k server k server呢也传入了一个is proud，也就是is production这样的一个变量，它呢也是通过一个process.v node env，看看它是否等于production，也就是是否等于，也就是是否在生产环境下面，如果是的话呢，Is pro就是一个true了。那很显然这个方式呢，跟我们VIVO3也是一样的，那现在呢，我们来打开这个文件。那现在呢，我们打开这个方法看一下，首先定义这个resolve方法来解析我们的绝对路径。然后又去获取了一下我们D目录下的client下的index attml，把这个HTML的内容装载到了index pro里面去，但是前提是它是一个在生产环境下面，如果开发环境下面呢，那我们就空着就可以了。然后这里边载入了express，我们声明了一个express的应用，然后呢，我们就去声明了一个weight，如果这个是在开发环境下面，那么我们就require weight，通过create server来创建一个服务，那么我们以把weight下的middlewas，也就是中间键装载到我们的express里边。如果在生产环境下面呢，我们只需要定义一个静态目录就可以了。静态目录的方法的定义呢，是通过serve static，然后去解析了我们Dis目录下的client这个文件夹，当然了，我们index文件是不能够被索引的。

然后我们去监听浏览器的各种各样的请求，那么所有的请求呢，都会走我这个函数，在这个函数里边呢，我们看到首先呢，获取了一个原始的UR，然后定义了一个模板和RENDER2个变量，如果在开发环境下面，那么我们就读取这个index atml的文件，生成一个模板，然后呢，我们再通过为了点transform index atml把我们原始的URL和模板传进去，最后产生一个专业，最后产生了一个转移好的模板。

然后呢，我们再从SR ctra server jss里边解构出一个render，不过这里边呢，我们要使用weight的SSR load module这个方法，那re函数呢，我们在开发环境下面就制定好了，那如果在生产环境下面呢，我们只需要去读取一下我们打包好以后的那个HTML文件付给模板就可以了，然后呢，我们再去呃，获取serverttra server的JS里边的render这个方法，然后呢，我们再付给render，那这里边有个前提，就是这些文件都得需要存在的，那很显然，那我们通过build已经产生了这样的一些文件了。然后接下来呢，这里定义了一个变量叫contexttest，然后调用run点方法把URL和contextest给传进去，注意这里边的contextest和我们之前使用VIVO3的时候是不一样的，我们在使用VIVO3的SSR的时候呢，并没有去定义这个contest，这contest的话有什么作用呢？我们看一下，如果这contest URL如果存在，那我们就给浏览器返回一个301，那301的话意思就是说你不需要从。

服务器端来获取资源了，你只需要去使用你浏览器端已经缓存的内容，说白了，为了实现一个路由跳转的时候不刷新页面的一个好的用户体验的效果。那我们也可以回到浏览器，我们来看一下这个效果，比方说我们点击about，点击EV，我们发现呢，这个页面并没有刷新，那我们之前在VI3实现的时候呢，都是刷新页面的，大家可以不妨去改造一下我们之前的代码，最后呢，我们再把这个template的patml给替换掉，用我们生成的那个a phtml，最后呢，我们给浏览器返回这个内容。

报错的时候呢，我们去拦截一下，最后再返回APP和wait，那我们看这个代码呢，几乎啊，跟我们之前写的代码是一模一样的，我们把它关闭掉以后呢，我们再来看一下pre render这个代码，这个代码的话呢，就是生成静态页面的时候的一个处理，首先呢，载入FS和pass，生成一个绝对路径的一个函数，然后呢，我们去读取这个data static的index tml，读取回来以后呢，生成一个模板，然后我们再去，呃。加在this server下的entry server JS，然后结构出我们的server方法，这里边呢，也定义了一个routes to preer这样的一个变量，这个变量的话呢，就是通过FS去读取了我们S2C的配S，读取出我们所有的这个页面以后呢，我们生成一个数组，然后呢去遍历这个数组，遍历数组以后呢，我们就是呃将。

每个呃，配置四下的文件的GSX的这个扩展名给干掉，然后呢，返回我们这个文件的名字，如果这个名字是home的话，那我们就返回一个斜线，否则返回一个斜线加上这个文件名，那获取的这个所谓的数组以后干什么用呢？就是为了产生我们所谓的文件名的生成，我们根据这个配置字体下面所有的页面来生成不同的页面。那为了生成前的页面呢，我们需要便利root to pre render，然后生成一个上下文，然后传下去，最后执行runnder方法，返回我们每个路由啊生成的这个所谓组件的内容，然后呢，我们把这个内容给替换掉，然后生成HTML，最后呢，我们先定义一个路径，我们把生成的建态页面放在this static下面，那如果这里边有个判断，这里边呢，如果这个杠啊是存在的，那我们就返回杠index，否则返回URL，然后呢，我们再生成一个HTML这样的一个扩展名，最后呢，我们通过write file s写文件的方法，呃，定义好路径，然后再定义好我们写的内容，这样的话呢，就会在S2就会。

就会在D目录下的static里面去生成我们不同的这样的页面了。好，这就是我们preer生成页面的这个GS，我们发现呢，跟我们之前的VIEW3的实现也是一样的，那接下来我们再去打开。S2C里边的这些内容，首先我们看一看APP的GSX，在这里边呢，其实实上它去加载了我们的几个组件，那么这些组件的话，其实上就是我们便利的这个页面，这页面里头呢，包含了about inv和home几个组件，这几个组件呢，都是通过我们RA来去编写的，那么具体的RA代码呢，不是我们这节课的重点，大家呢自己去看一下就可以了，那使用RA技术架构的小伙伴呢，可以参照咱们这个案例来去实现一个原生的基于weight的服端确染。

好，有关weight环境下VIEW3和react的端渲染，我们就讲这么多，大家加油。