溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了react koa rematch怎么打造一套服務(wù)端渲染架子，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
前言
本次講述的內(nèi)容主要是 react 與 koa 搭建的一套 ssr 框架，是在別人造的輪子上再添加了一些自己的想法和完善一下自己的功能。
本次用到的技術(shù)為： react | rematch | react-router | koa
react服務(wù)端渲染優(yōu)勢
SPA（single page application)單頁應(yīng)用雖然在交互體驗上比傳統(tǒng)多頁更友好，但它也有一個天生的缺陷，就是對搜索引擎不友好，不利于爬蟲爬取數(shù)據(jù)（雖然聽說chrome能夠異步抓取spa頁面數(shù)據(jù)了）；
SSR與傳統(tǒng) SPA（Single-Page Application - 單頁應(yīng)用程序）相比，服務(wù)器端渲染(SSR)的優(yōu)勢主要在于：更好的 SEO 和首屏加載效果。
在 SPA 初始化的時候內(nèi)容是一個空的 div，必須等待 js 下載完才開始渲染頁面，但 SSR 就可以做到直接渲染html結(jié)構(gòu)，極大地優(yōu)化了首屏加載時間，但上帝是公平的，這種做法也增加了我們極大的開發(fā)成本，所以大家必須綜合首屏?xí)r間對應(yīng)用程序的重要程度來進行開發(fā)，或許還好更好地代替品（骨架屏）。
react服務(wù)端渲染流程
組件渲染
首先肯定是根組件的render，而這一部分和SPA有一些小不同。
使用 ReactDOM.render() 來混合服務(wù)端渲染的容器已經(jīng)被棄用，并且會在React 17 中刪除。使用hydrate() 來代替。
hydrate與 render 相同，但用于混合容器，該容器的HTML內(nèi)容是由 ReactDOMServer 渲染的。 React 將嘗試將事件監(jiān)聽器附加到現(xiàn)有的標(biāo)記。
hydrate 描述的是 ReactDOM 復(fù)用 ReactDOMServer 服務(wù)端渲染的內(nèi)容時盡可能保留結(jié)構(gòu)，并補充事件綁定等 Client 特有內(nèi)容的過程。
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.hydrate(<App />, document.getElementById('app'));在服務(wù)端中，我們可以通過 renderToString 來獲取渲染的內(nèi)容來替換 html 模版中的東西。
const jsx =
<StaticRouter location={url} context={routerContext}>
<AppRoutes context={defaultContext} initialData={data} />
</StaticRouter>
const html = ReactDOMServer.renderToString(jsx);
let ret = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
</head>
<body>
<div id="app">${html}</div>
</body>
</html>
`;
return ret;服務(wù)端返回替換后的 html 就完成了本次組件服務(wù)端渲染。
路由同步渲染
在項目中避免不了使用路由，而在SSR中，我們必須做到路由同步渲染。
首先我們可以把路由拆分成一個組件，服務(wù)端入口和客戶端都可以分別引用。
function AppRoutes({ context, initialData }: any) {
return (
<Switch>
{
routes.map((d: any) => (
<Route<InitRoute>
key={d.path}
exact={d.exact}
path={d.path}
init={d.init || ''}
component={d.component}
/>
))
}
<Route path='/' component={Home} />
</Switch>
);
}(routes.js)
export const routes = [
{
path: '/Home',
component: Home,
init: Home.init,
exact: true,
},
{
path: '/Hello',
component: Hello,
init: Hello.init,
exact: true,
}
];這樣我們的路由基本定義完了，然后客戶端引用還是老規(guī)矩，和SPA沒什么區(qū)別
import { BrowserRouter as Router } from 'react-router-dom';
import AppRoutes from './AppRoutes';
class App extends Component<any, Readonly<State>> {
...
render() {
return (
<Router>
<AppRoutes/>
</Router>
);
}
}在服務(wù)端中，需要使用將BrowserRouter 替換為 StaticRouter 區(qū)別在于，BrowserRouter 會通過HTML5 提供的 history API來保持頁面與URL的同步，而StaticRouter 則不會改變URL，當(dāng)一個 匹配時，它將把 context 對象傳遞給呈現(xiàn)為 staticContext 的組件。
const jsx =
<StaticRouter location={url}>
<AppRoutes />
</StaticRouter>
const html = ReactDOMServer.renderToString(jsx);至此，路由的同步已經(jīng)完成了。
redux同構(gòu)
在寫這個之前必須先了解什么是注水和脫水，所謂脫水，就是服務(wù)器在構(gòu)建 HTML 之前處理一些預(yù)請求，并且把數(shù)據(jù)注入html中返回給瀏覽器。而注水就是瀏覽器把這些數(shù)據(jù)當(dāng)初始數(shù)據(jù)來初始化組件，以完成服務(wù)端與瀏覽器端數(shù)據(jù)的統(tǒng)一。
組件配置
在組件內(nèi)部定義一個靜態(tài)方法
class Home extends React.Component {
...
public static init(store:any) {
return store.dispatch.Home.incrementAsync(5);
}
componentDidMount() {
const { incrementAsync }:any = this.props;
incrementAsync(5);
}
render() {
...
}
}
const mapStateToProps = (state:any) => {
return {
count: state.Home.count
};
};
const mapDispatchToProps = (dispatch:any) => ({
incrementAsync: dispatch.Home.incrementAsync
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(Home);由于我這邊使用的是rematch，所以我們的方法都寫在model中。
const Home: ModelConfig= {
state: {
count: 1
},
reducers: {
increment(state, payload) {
return {
count: payload
};
}
},
effects: {
async incrementAsync(payload, rootState) {
await new Promise((resolve) => setTimeout(resolve, 1000));
this.increment(payload);
}
}
};
export default Home;然后通過根 store 中進行 init。
import { init } from '@rematch/core';
import models from './models';
const store = init({
models: {...models}
});
export default store;然后可以綁定在我們 redux 的 Provider 中。
<Provider store = {store}>
<Router>
<AppRoutes
context={context}
initialData={this.initialData}
/>
</Router>
</Provider>路由方面我們需要把組件的 init 方法綁定在路由上方便服務(wù)端請求數(shù)據(jù)時使用。
<Switch>
{
routes.map((d: any) => (
<Route<InitRoute>
key={d.path}
exact={d.exact}
path={d.path}
init={d.init || ''}
component={d.component}
/>
))
}
<Route path='/' component={Home} />
</Switch>以上就是客戶端需要進行的操作了，因為 SSR 中我們服務(wù)端也需要進行數(shù)據(jù)的操作，所以為了解耦，我們就新建另一個 ServiceStore 來提供服務(wù)端使用。
在服務(wù)端構(gòu)建 Html 前，我們必須先執(zhí)行完當(dāng)前組件的 init 方法。
import { matchRoutes } from 'react-router-config';
// 用matchRoutes方法獲取匹配到的路由對應(yīng)的組件數(shù)組
const matchedRoutes = matchRoutes(routes, url);
const promises = [];
for (const item of matchedRoutes) {
if (item.route.init) {
const promise = new Promise((resolve, reject) => {
item.route.init(serverStore).then(resolve).catch(resolve);
});
promises.push(promise);
}
}
return Promise.all(promises);注意我們新建一個 Promise 的數(shù)組來放置 init 方法，因為一個頁面可能是由多個組件組成的，我們必須等待所有的 init 執(zhí)行完畢后才執(zhí)行相應(yīng)的 html 構(gòu)建。
現(xiàn)在可以得到的數(shù)據(jù)掛在 window 下，等待客戶端的讀取了。
let ret = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
</head>
<body>
<div id="app">${html}</div>
<script type="text/javascript">window.__INITIAL_STORE__ = ${JSON.stringify(
extra.initialStore || {}
)}</script>
</body>
</html>
`;然后在我們的客戶端中讀取剛剛的 initialStore 數(shù)據(jù)
....
const defaultStore = window.__INITIAL_STORE__ || {};
const store = init({
models,
redux: {
initialState: defaultStore
}
});
export default store;至此，redux的同構(gòu)基本完成了，因為邊幅的限定，我就沒有貼太多代碼，大家可以到文章底部的點擊我的倉庫看看具體代碼哈，然后我再說說幾個 redux 同構(gòu)中比較坑的地方。
1.使用不了 @loadable/component 異步組件加載，因為不能獲取組件內(nèi)部方法。 解決的辦法就是在預(yù)請求我們不放在組件中，直接拆分出來寫在一個文件中統(tǒng)一管理，但我嫌這樣不好管理就放棄了異步加載組件了。
2.在客戶端渲染的時候如果數(shù)據(jù)一閃而過，那就是初始化數(shù)據(jù)并沒有成功，當(dāng)時這里卡了我好久喔。
css樣式直出
首先，服務(wù)端渲染的時候，解析 css 文件，不能使用 style-loader 了，要使用 isomorphic-style-loader 。使用 style-loader 的時候會有一閃而過的現(xiàn)象，是因為瀏覽器是需要加載完 css 才能把樣式加上。為了解決這樣的問題，我們可以通過isomorphic-style-loader 在組件加載的時候把 css 放置在全局的 context 里面，然后在服務(wù)端渲染時候提取出來，插入到返回的HTML中的 style 標(biāo)簽。
組件的改造
import withStyles from 'isomorphic-style-loader/withStyles';
@withStyles(style)
class Home extends React.Component {
...
render() {
const {count}:any = this.props;
return (
...
);
}
}
const mapStateToProps = (state:any) => {
return {
count: state.Home.count
};
};
const mapDispatchToProps = (dispatch:any) => ({
incrementAsync: dispatch.Home.incrementAsync
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(Home);withStyle 是一個柯里化函數(shù)，返回的是一個新的組件，并不影響 connect 函數(shù)，當(dāng)然你也可以像 connect 一樣的寫法。withStyle 主要是為了把 style 插入到全局的 context 里面。
根組件的修改
import StyleContext from 'isomorphic-style-loader/StyleContext';
const insertCss = (...styles:any) => {
const removeCss = styles.map((style:any) => style._insertCss());
return () => removeCss.forEach((dispose:any) => dispose());
};
ReactDOM.hydrate(
<StyleContext.Provider value={{ insertCss }}>
<AppError>
<Component />
</AppError>
</StyleContext.Provider>,
elRoot
);這一部分主要是引入了 StyleContext 初始化根部的context，并且定義好一個 insertCss 方法，在組件 withStyle 中觸發(fā)。
部分 isomorphic-style-loader 源碼
...
function WithStyles(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 = function componentWillUnmount() {
if (this.removeCss) {
setTimeout(this.removeCss, 0);
}
};
_proto.render = function render() {
return React.createElement(ComposedComponent, this.props);
};
...可以看到 context 中的 insert 方法就是根組件中的 定義好的 insert 方法，并且在 componentWillUnmount 這個銷毀的生命周期中把之前 style 清除掉。而 insert 方法主要是為了給當(dāng)前的 style 定義好id并且嵌入，這里就不展開說明了，有興趣的可以看一下源碼。
服務(wù)端中獲取定義好的css
const css = new Set(); // CSS for all rendered React components
const insertCss = (...styles :any) => {
return styles.forEach((style:any) => css.add(style._getCss()));
};
const extractor = new ChunkExtractor({ statsFile: this.statsFile });
const jsx = extractor.collectChunks(
<StyleContext.Provider value={{ insertCss }}>
<Provider store={serverStore}>
<StaticRouter location={url} context={routerContext}>
<AppRoutes context={defaultContext} initialData={data} />
</StaticRouter>
</Provider>
</StyleContext.Provider>
);
const html = ReactDOMServer.renderToString(jsx);
const cssString = Array.from(css).join('');
...其中 cssString 就是我們最后獲取到的 css 內(nèi)容，我們可以像 html 替換一樣把 css 嵌入到 html 中。
let ret = `
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>${extra.cssString}</style>
</head>
<body>
<div id="app">${html}</div>
...
</body>
</html>
`;那這樣就大功告成啦！?。?！
我來說一下在做這個的時候遇到的坑
1.不能使用分離 css 的插件 mini-css-extract-plugin ，因為分離 css 和把 css 放置到 style 中會有沖突，引入github大神的一句話
With isomorphic-style-loader the idea was to always include css into js files but render into dom only critical css and also make this solution universal (works the same on client and server side). If you want to extract css into separate files you probably need to find another way how to generate critical css rather than use isomorphic-style-loader.
2.很多文章說到在 service 端的打包中不需要打包 css，那是因為他們使用的是style-loader 的情況，我們?nèi)绻褂?isomorphic-style-loader, 我們也需要把 css 打包一下，因為我們在服務(wù)端中畢竟要觸發(fā) withStyle。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“react koa rematch怎么打造一套服務(wù)端渲染架子”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼