React服务端渲染实现（基于Dva)
React服務端渲染實現(xiàn) (基于Dva)
功能
- 基于 Dva 的 SSR 解決方案 (react-router-v4, redux, redux-saga)
- 支持 Dynamic Import （不再使用Dva自帶的 dva/dynamic加載組件）
- 支持 CSS Modules
SSR實現(xiàn)邏輯
概覽
.png)上圖是SSR的運行時流程圖（暫時不考慮構建的問題）
圖中左側是瀏覽器端看到的頁面源碼。其中紅色框標識的3個部分，是SSR需要關注的重點內(nèi)容。
-
最簡單的是中間一個框，它是服務端渲染的App的內(nèi)容部分。
-
第一個是分片（splitting）代碼文件。即SSR Server必須要知道，瀏覽器要正確展示這個頁面，需要包含哪些分片的js代碼。 如果不計算并返回這個script標簽，那么瀏覽器render這個list 組建時，會發(fā)現(xiàn)這個組件不存在，還需要異步加載并re-render 頁面。
-
最后一個框，是服務端返回的 window._preloadedState 即 全局狀態(tài)對象。瀏覽器端要使用這個對象對redux的store進行初始化。
收到客戶端的SSR請求后，SSR Server將依次執(zhí)行如下五部操作：
注： 需要進行數(shù)據(jù)初始化的組件，需要定義 static fetching 方法
const actionList = loadedComponents.map(component => {if (component.fetching) {return component.fetching({...app._store,...component.props,path: req.path});} else {return null;}}); await Promise.all(actionList); 復制代碼Loadable 的相關概念和用法，請參考 github: react-loadable
Code Splitting
如何支持Dva
本節(jié)分幾個部分：
如何既支持 dva/dynamic 又支持 SSR
之前使用dva的Code Splitting功能時，用的是 dva/dynamic。示例代碼如下：
import dynamic from 'dva/dynamic';const UserPageComponent = dynamic({app,models: () => [import('./models/users'),],component: () => import('./routes/UserPage'), });復制代碼它的問題是不支持SSR。解決方法是使用 react-loadable 代替 dva/dynamic。為了不影響dva的功能， 我們需要了解 dva/dynamic 除了實現(xiàn)了加載組件之外還實現(xiàn)了哪些功能。
通過查閱dva源碼，發(fā)現(xiàn) dva/dynamic 額外實現(xiàn)的功能比較純粹，就是 register model
// packages/dva/src/dynamic.jsconst cached = {};function registerModel(app, model) {model = model.default || model;if (!cached[model.namespace]) {app.model(model);cached[model.namespace] = 1;} }// ..... 省略部分代碼export default function dynamic(config) {const { app, models: resolveModels, component: resolveComponent } = config;return asyncComponent({resolve: config.resolve || function () {const models = typeof resolveModels === 'function' ? resolveModels() : [];const component = resolveComponent();return new Promise((resolve) => {Promise.all([...models, component]).then((ret) => {if (!models || !models.length) {return resolve(ret[0]);} else {const len = models.length;ret.slice(0, len).forEach((m) => {m = m.default || m;if (!Array.isArray(m)) {m = [m];}// 注冊 modelm.map(_ => registerModel(app, _));});resolve(ret[len]);}});});},...config,}); }復制代碼因此，我們需要在 react-loadable 的基礎上，增加 registerModel 功能，且需要自己維護 cached model 這個對象。
為什么選擇 react-loadable ?
通過翻閱若干個支持SSR Code Splitting的Repo，只有 react-loadable 比較好的支持 "多個文件加載"。
下面是react-loadable 的基本用法：
Loadable({loader: () => import('./components/Bar'),loading: Loading,timeout: 10000, // 10 seconds });復制代碼不難發(fā)現(xiàn)， 這是不能夠完全匹配 dva/dynamic 的能力的。因為在Dva里，有model這個概念。 我們不僅需要加載UI組件本身，還需要加載它所依賴的model文件。而react-loadable 可以很好的支持這個特性。
下面是 react-loadable 的 Loadable.Map 用法
Loadable.Map({loader: {Bar: () => import('./Bar'),i18n: () => fetch('./i18n/bar.json').then(res => res.json()),},render(loaded, props) {let Bar = loaded.Bar.default;let i18n = loaded.i18n;return <Bar {...props} i18n={i18n}/>;}, }); 復制代碼經(jīng)過修改，我們可以得到兼容dva的dynamic方案。 例如，有一個頁面叫做 Grid。它依賴2個model，分別是 grid 和 user。
Loadable.Map({loader: {Grid: () => import('./routes/Grid.js'),grid: () => import('./models/grid.js'),user: () => import('./models/user.js'),},delay: 200,timeout: 1000,loading: Loading,render(loaded, props) {let Grid = loaded["Grid"].default;let grid = loaded["grid"].default;let user = loaded["grid"].default;registerModel(app, grid);registerModel(app, user);return <Grid {...props} />;},});復制代碼對于復雜的項目，可能有很多route配置，寫上面這個配置項代碼較多。我們可以考慮對其進行封裝。 基于此，我們可以考慮實現(xiàn) dynamicLoader 方法。
const dynamicLoader = (app, modelNameList, componentName) => {let loader = {};let models = [];let fn = (path, prefix) => {return () => import(`./${prefix}/${path}`);};if (modelNameList && modelNameList.length > 0) {for (let i in modelNameList) {if (modelNameList.hasOwnProperty(i)) {let model = modelNameList[i];if (loader[model] === undefined) {loader[model] = fn(model, 'models');models.push(model);}}}}loader[componentName] = fn(componentName, 'routes');return Loadable.Map({loader: loader,loading: Loading,render(loaded, props) {let C = loaded[componentName].default;for (let i in models) {if (models.hasOwnProperty(i)) {let model = models[i];if (loaded[model] && getApp()) {registerModel(app, loaded[model]);}}}return <C {...props}/>;},}); };// 使用const routes = [{path: '/popular/:id',component: dynamicLoader(app, ['grid'], 'Grid') }];復制代碼但是，上述代碼在 SSR Server端是無法工作的。
首先，react-loadable 需要在webpack打包過程中生成Loadable組件的數(shù)據(jù)字典。 SSR Server 需要利用這個字典的信息生成 分片js代碼的 script 標簽。
字典文件示例：
// react-loadable.json{"./routes/Grid.js": [{"id": 141,"name": "./src/routes/Grid.js","file": "0.js","publicPath": "/public/0.js"}],"lodash/isArray": [{"id": 296,"name": "./node_modules/lodash/isArray.js","file": "0.js","publicPath": "/public/0.js"},{"id": 296,"name": "./node_modules/lodash/isArray.js","file": "1.js","publicPath": "/public/1.js"}]//... 以下省略 }復制代碼實際使用發(fā)現(xiàn)，上述代碼 dynamicLoader 無法生成正確的字典。
后經(jīng)過Debug發(fā)現(xiàn)，問題根源是代碼中使用了帶參數(shù)的 import。即 import(./${prefix}/${path})， 而webpack 在構建過程中無法靜態(tài)獲取Loadable組件的路徑。因此，不能使用帶參數(shù)的 import。
最終的方案是，定義路由配置文件 routes.json。然后編寫一個路由生成器，生成需要的路由文件。
示例的routes.json 文件如下：
[{"path": "/","exact": true,"dva_route": "./routes/Home.js","dva_models": []},{"path": "/popular/:id","dva_route": "./routes/Grid.js","dva_models": ["./models/grid.js"]},{"path": "/topic","dva_route": "./routes/Topic.js","dva_models": []} ]復制代碼到此，我們就完成了對于dva/dynamic 和 SSR 的支持。
SSR Server 端如何支持 Dva
默認情況下：
app.start('#root'); 復制代碼server 端應該不加參數(shù)
// 官方示例 import { IntlProvider } from 'react-intl'; ... const App = app.start(); ReactDOM.render(<IntlProvider><App /></IntlProvider>, htmlElement);// 本實現(xiàn)的示例const App = app.start(); const markup = renderToString(<Loadable.Capture report={module => modules.push(module)}><App location={req.path} context={{}}/></Loadable.Capture>); 復制代碼客戶端如何支持 Dva
由于一個route 可能需要依賴多個model作為數(shù)據(jù)源。故返回一個dispatch 的數(shù)組。這樣server就可以通過多個接口拿數(shù)據(jù)。
static fetching({dispatch, path, params}) {let language = path.substr("/popular/".length);return [dispatch({type: 'grid/init', payload: {language}}),dispatch({type: 'user/fetch', payload: {userId: params.userId}})]; }復制代碼使用
- npm install
- npm run dev
- view localhost:3000
轉載于:https://juejin.im/post/5bc40ad6e51d450e4d3031cf
總結
以上是生活随笔為你收集整理的React服务端渲染实现（基于Dva)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SourceTree跳过Atlassia
- 下一篇： hadoop 2.x HA 出现ssh不