react koa rematch 如何打造一套服务端渲染架子

2023-08-20 22:54:04 172

前言

本次讲述的内容主要是react与koa搭建的一套ssr框架，是在别人造的轮子上再添加了一些自己的想法和完善一下自己的功能。

本次用到的技术为： react| rematch| react-router| koa

react服务端渲染优势

SPA（singlepageapplication)单页应用虽然在交互体验上比传统多页更友好，但它也有一个天生的缺陷，就是对搜索引擎不友好，不利于爬虫爬取数据（虽然听说chrome能够异步抓取spa页面数据了）；

SSR与传统SPA（Single-PageApplication-单页应用程序）相比，服务器端渲染(SSR)的优势主要在于：更好的SEO和首屏加载效果。

在SPA初始化的时候内容是一个空的div，必须等待js下载完才开始渲染页面，但SSR就可以做到直接渲染html结构，极大地优化了首屏加载时间，但上帝是公平的，这种做法也增加了我们极大的开发成本，所以大家必须综合首屏时间对应用程序的重要程度来进行开发，或许还好更好地代替品（骨架屏）。

react服务端渲染流程

组件渲染

首先肯定是根组件的render，而这一部分和SPA有一些小不同。

使用ReactDOM.render()来混合服务端渲染的容器已经被弃用，并且会在React17中删除。使用hydrate()来代替。

hydrate与render相同，但用于混合容器，该容器的HTML内容是由ReactDOMServer渲染的。React将尝试将事件监听器附加到现有的标记。

hydrate描述的是ReactDOM复用ReactDOMServer服务端渲染的内容时尽可能保留结构，并补充事件绑定等Client特有内容的过程。

importReactfrom'react';
importReactDOMfrom'react-dom';

ReactDOM.hydrate(,document.getElementById('app'));

在服务端中，我们可以通过renderToString来获取渲染的内容来替换html模版中的东西。

constjsx=




consthtml=ReactDOMServer.renderToString(jsx);

letret=`







${html}

`; returnret;

服务端返回替换后的html就完成了本次组件服务端渲染。

路由同步渲染

在项目中避免不了使用路由，而在SSR中，我们必须做到路由同步渲染。

首先我们可以把路由拆分成一个组件，服务端入口和客户端都可以分别引用。

functionAppRoutes({context,initialData}:any){
return(

{
routes.map((d:any)=>(

key={d.path}
exact={d.exact}
path={d.path}
init={d.init||''}
component={d.component}
/>
))
}


);
}

(routes.js)

exportconstroutes=[
{
path:'/Home',
component:Home,
init:Home.init,
exact:true,
},
{
path:'/Hello',
component:Hello,
init:Hello.init,
exact:true,
}
];

这样我们的路由基本定义完了，然后客户端引用还是老规矩，和SPA没什么区别

import{BrowserRouterasRouter}from'react-router-dom';
importAppRoutesfrom'./AppRoutes';
classAppextendsComponent>{
...
render(){
return(



);
}
}

在服务端中，需要使用将BrowserRouter替换为StaticRouter区别在于，BrowserRouter会通过HTML5提供的historyAPI来保持页面与URL的同步，而StaticRouter则不会改变URL，当一个匹配时，它将把context对象传递给呈现为staticContext的组件。

constjsx=




consthtml=ReactDOMServer.renderToString(jsx);

至此，路由的同步已经完成了。

redux同构

在写这个之前必须先了解什么是注水和脱水，所谓脱水，就是服务器在构建HTML之前处理一些预请求，并且把数据注入html中返回给浏览器。而注水就是浏览器把这些数据当初始数据来初始化组件，以完成服务端与浏览器端数据的统一。

组件配置

在组件内部定义一个静态方法

classHomeextendsReact.Component{
...
publicstaticinit(store:any){
returnstore.dispatch.Home.incrementAsync(5);
}
componentDidMount(){
const{incrementAsync}:any=this.props;
incrementAsync(5);
}
render(){
...
}
}

constmapStateToProps=(state:any)=>{
return{
count:state.Home.count
};
};

constmapDispatchToProps=(dispatch:any)=>({
incrementAsync:dispatch.Home.incrementAsync
});
exportdefaultconnect(
mapStateToProps,
mapDispatchToProps
)(Home);

由于我这边使用的是rematch，所以我们的方法都写在model中。

constHome:ModelConfig={
state:{
count:1
},
reducers:{
increment(state,payload){
return{
count:payload
};
}
},
effects:{
asyncincrementAsync(payload,rootState){
awaitnewPromise((resolve)=>setTimeout(resolve,1000));
this.increment(payload);
}
}
};
exportdefaultHome;

然后通过根store中进行init。

import{init}from'@rematch/core';
importmodelsfrom'./models';

conststore=init({
models:{...models}
});

exportdefaultstore;

然后可以绑定在我们redux的Provider中。

路由方面我们需要把组件的init方法绑定在路由上方便服务端请求数据时使用。


{
routes.map((d:any)=>(

key={d.path}
exact={d.exact}
path={d.path}
init={d.init||''}
component={d.component}
/>
))
}

以上就是客户端需要进行的操作了，因为SSR中我们服务端也需要进行数据的操作，所以为了解耦，我们就新建另一个ServiceStore来提供服务端使用。

在服务端构建Html前，我们必须先执行完当前组件的init方法。

import{matchRoutes}from'react-router-config';
//用matchRoutes方法获取匹配到的路由对应的组件数组
constmatchedRoutes=matchRoutes(routes,url);
constpromises=[];
for(constitemofmatchedRoutes){
if(item.route.init){
constpromise=newPromise((resolve,reject)=>{
item.route.init(serverStore).then(resolve).catch(resolve);
});
promises.push(promise);
}
}
returnPromise.all(promises);

注意我们新建一个Promise的数组来放置init方法，因为一个页面可能是由多个组件组成的，我们必须等待所有的init执行完毕后才执行相应的html构建。

现在可以得到的数据挂在window下，等待客户端的读取了。

letret=`







${html}

window.__INITIAL_STORE__=${JSON.stringify( extra.initialStore||{} )} `;

然后在我们的客户端中读取刚刚的initialStore数据

....
constdefaultStore=window.__INITIAL_STORE__||{};
conststore=init({
models,
redux:{
initialState:defaultStore
}
});

exportdefaultstore;

至此，redux的同构基本完成了，因为边幅的限定，我就没有贴太多代码，大家可以到文章底部的点击我的仓库看看具体代码哈，然后我再说说几个redux同构中比较坑的地方。

1.使用不了 @loadable/component异步组件加载，因为不能获取组件内部方法。解决的办法就是在预请求我们不放在组件中，直接拆分出来写在一个文件中统一管理，但我嫌这样不好管理就放弃了异步加载组件了。

2.在客户端渲染的时候如果数据一闪而过，那就是初始化数据并没有成功，当时这里卡了我好久喔。

css样式直出

首先，服务端渲染的时候，解析css文件，不能使用style-loader了，要使用isomorphic-style-loader。使用style-loader的时候会有一闪而过的现象，是因为浏览器是需要加载完css才能把样式加上。为了解决这样的问题，我们可以通过isomorphic-style-loader在组件加载的时候把css放置在全局的context里面，然后在服务端渲染时候提取出来，插入到返回的HTML中的style标签。

组件的改造

importwithStylesfrom'isomorphic-style-loader/withStyles';

@withStyles(style)
classHomeextendsReact.Component{
...
render(){
const{count}:any=this.props;
return(
...
);
}
}
constmapStateToProps=(state:any)=>{
return{
count:state.Home.count
};
};

constmapDispatchToProps=(dispatch:any)=>({
incrementAsync:dispatch.Home.incrementAsync
});
exportdefaultconnect(
mapStateToProps,
mapDispatchToProps
)(Home);

withStyle是一个柯里化函数，返回的是一个新的组件，并不影响connect函数，当然你也可以像connect一样的写法。withStyle主要是为了把style插入到全局的context里面。

根组件的修改

importStyleContextfrom'isomorphic-style-loader/StyleContext';

constinsertCss=(...styles:any)=>{
constremoveCss=styles.map((style:any)=>style._insertCss());
return()=>removeCss.forEach((dispose:any)=>dispose());
};

ReactDOM.hydrate(




,
elRoot
);

这一部分主要是引入了StyleContext初始化根部的context，并且定义好一个insertCss方法，在组件withStyle中触发。

部分isomorphic-style-loader源码

...
functionWithStyles(props,context){
var_this;
_this=_React$PureComponent.call(this,props,context)||this;
_this.removeCss=context.insertCss.apply(context,styles);
return_this;
}

var_proto=WithStyles.prototype;

_proto.componentWillUnmount=functioncomponentWillUnmount(){
if(this.removeCss){
setTimeout(this.removeCss,0);
}
};

_proto.render=functionrender(){
returnReact.createElement(ComposedComponent,this.props);
};
...

可以看到context中的insert方法就是根组件中的定义好的insert方法，并且在componentWillUnmount这个销毁的生命周期中把之前style清除掉。而insert方法主要是为了给当前的style定义好id并且嵌入，这里就不展开说明了，有兴趣的可以看一下源码。

服务端中获取定义好的css

constcss=newSet();//CSSforallrenderedReactcomponents

constinsertCss=(...styles:any)=>{
returnstyles.forEach((style:any)=>css.add(style._getCss()));
};

constextractor=newChunkExtractor({statsFile:this.statsFile});

constjsx=extractor.collectChunks(







);

consthtml=ReactDOMServer.renderToString(jsx);
constcssString=Array.from(css).join('');
...

其中cssString就是我们最后获取到的css内容，我们可以像html替换一样把css嵌入到html中。

letret=`



...



${html}

1.不能使用分离css的插件 mini-css-extract-plugin，因为分离css和把css放置到style中会有冲突，引入github大神的一句话

2.很多文章说到在service端的打包中不需要打包css，那是因为他们使用的是style-loader的情况，我们如果使用isomorphic-style-loader,我们也需要把css打包一下，因为我们在服务端中毕竟要触发withStyle。

因为代码太多了，所以只是展示了整个SSR流程的思想，详细代码可以查看。还有希望大牛们指导一下我的错误，万分感谢！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

react koa rematch 如何打造一套服务端渲染架子

热门推荐

随机推荐