react koa rematch 如何打造一套服務端渲染架子
前言
本次講述的內(nèi)容主要是 react 與 koa 搭建的一套 ssr 框架，是在別人造的輪子上再添加了一些自己的想法和完善一下自己的功能。
本次用到的技術為： react | rematch | react-router | koa
react服務端渲染優(yōu)勢
SPA（single page application)單頁應用雖然在交互體驗上比傳統(tǒng)多頁更友好，但它也有一個天生的缺陷，就是對搜索引擎不友好，不利于爬蟲爬取數(shù)據(jù)（雖然聽說chrome能夠異步抓取spa頁面數(shù)據(jù)了）；
SSR與傳統(tǒng) SPA（Single-Page Application - 單頁應用程序）相比，服務器端渲染(SSR)的優(yōu)勢主要在于：更好的 SEO 和首屏加載效果。
在 SPA 初始化的時候內(nèi)容是一個空的 div，必須等待 js 下載完才開始渲染頁面，但 SSR 就可以做到直接渲染html結構，極大地優(yōu)化了首屏加載時間，但上帝是公平的，這種做法也增加了我們極大的開發(fā)成本，所以大家必須綜合首屏時間對應用程序的重要程度來進行開發(fā)，或許還好更好地代替品（骨架屏）。
react服務端渲染流程
組件渲染
首先肯定是根組件的render，而這一部分和SPA有一些小不同。
使用 ReactDOM.render() 來混合服務端渲染的容器已經(jīng)被棄用，并且會在React 17 中刪除。使用hydrate() 來代替。
hydrate與 render 相同，但用于混合容器，該容器的HTML內(nèi)容是由 ReactDOMServer 渲染的。 React 將嘗試將事件監(jiān)聽器附加到現(xiàn)有的標記。
hydrate 描述的是 ReactDOM 復用 ReactDOMServer 服務端渲染的內(nèi)容時盡可能保留結構，并補充事件綁定等 Client 特有內(nèi)容的過程。
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.hydrate(<App />, document.getElementById('app'));
在服務端中，我們可以通過 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;
服務端返回替換后的 html 就完成了本次組件服務端渲染。
路由同步渲染
在項目中避免不了使用路由，而在SSR中，我們必須做到路由同步渲染。
首先我們可以把路由拆分成一個組件，服務端入口和客戶端都可以分別引用。
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>
);
}
}
在服務端中，需要使用將BrowserRouter 替換為 StaticRouter 區(qū)別在于，BrowserRouter 會通過HTML5 提供的 history API來保持頁面與URL的同步，而StaticRouter 則不會改變URL，當一個 匹配時，它將把 context 對象傳遞給呈現(xiàn)為 staticContext 的組件。
const jsx =
<StaticRouter location={url}>
<AppRoutes />
</StaticRouter>
const html = ReactDOMServer.renderToString(jsx);
至此，路由的同步已經(jīng)完成了。
redux同構
在寫這個之前必須先了解什么是注水和脫水，所謂脫水，就是服務器在構建 HTML 之前處理一些預請求，并且把數(shù)據(jù)注入html中返回給瀏覽器。而注水就是瀏覽器把這些數(shù)據(jù)當初始數(shù)據(jù)來初始化組件，以完成服務端與瀏覽器端數(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 方法綁定在路由上方便服務端請求數(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 中我們服務端也需要進行數(shù)據(jù)的操作，所以為了解耦，我們就新建另一個 ServiceStore 來提供服務端使用。
在服務端構建 Html 前，我們必須先執(zhí)行完當前組件的 init 方法。
import { matchRoutes } from 'react-router-config';
// 用matchRoutes方法獲取匹配到的路由對應的組件數(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í)行相應的 html 構建。
現(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的同構基本完成了，因為邊幅的限定，我就沒有貼太多代碼，大家可以到文章底部的點擊我的倉庫看看具體代碼哈，然后我再說說幾個 redux 同構中比較坑的地方。
1.使用不了 @loadable/component 異步組件加載，因為不能獲取組件內(nèi)部方法。 解決的辦法就是在預請求我們不放在組件中，直接拆分出來寫在一個文件中統(tǒng)一管理，但我嫌這樣不好管理就放棄了異步加載組件了。
2.在客戶端渲染的時候如果數(shù)據(jù)一閃而過，那就是初始化數(shù)據(jù)并沒有成功，當時這里卡了我好久喔。
css樣式直出
首先，服務端渲染的時候，解析 css 文件，不能使用 style-loader 了，要使用 isomorphic-style-loader 。使用 style-loader 的時候會有一閃而過的現(xiàn)象，是因為瀏覽器是需要加載完 css 才能把樣式加上。為了解決這樣的問題，我們可以通過isomorphic-style-loader 在組件加載的時候把 css 放置在全局的 context 里面，然后在服務端渲染時候提取出來，插入到返回的HTML中的 style 標簽。
組件的改造
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ù)，當然你也可以像 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 方法主要是為了給當前的 style 定義好id并且嵌入，這里就不展開說明了，有興趣的可以看一下源碼。
服務端中獲取定義好的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 打包一下，因為我們在服務端中畢竟要觸發(fā) withStyle。
總結
因為代碼太多了，所以只是展示了整個 SSR 流程的思想，詳細代碼可以查看。還有希望大牛們指導一下我的錯誤，萬分感謝?。?br />
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
React替換傳統(tǒng)拷貝方法的Immutable使用
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結構的實現(xiàn)之一。它實現(xiàn)了完全的持久化數(shù)據(jù)結構，使用結構共享。所有的更新操作都會返回新的值，但是在內(nèi)部結構是共享的，來減少內(nèi)存占用2023-02-02
React?浮層組件（也稱為彈出組件或彈窗組件）通常是指在用戶界面上浮動顯示的組件,本文主要介紹了浮層組件的實現(xiàn)方法,感興趣的小伙伴可以了解下2024-02-02
這篇文章主要介紹了react實現(xiàn)電商商品列表的流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了React Native 圖片查看組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了JavaScript React如何修改默認端口號方法詳解，文中通過步驟圖片解析介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要為大家介紹了react-native只保留3x圖原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
React18從0實現(xiàn)dispatch?update流程
這篇文章主要為大家介紹了React18從0實現(xiàn)dispatch?update流程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要給大家介紹了React優(yōu)雅的捕獲并處理渲染異常方式,文章通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-11-11
react-intl實現(xiàn)React國際化多語言的方法
這篇文章主要介紹了react-intl實現(xiàn)React國際化多語言的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
react component changing uncontrolled in
這篇文章主要為大家介紹了react component changing uncontrolled input報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12