React服務端渲染實現（基於Dva)

時間 2019-11-16

標籤 react 服務渲染實現基於 dva 欄目 React 简体版

原文原文鏈接

React服務端渲染實現 (基於Dva)

功能

基於 Dva 的 SSR 解決方案 (react-router-v4, redux, redux-saga)
支持 Dynamic Import （再也不使用Dva自帶的 dva/dynamic加載組件）
支持 CSS Modules

SSR實現邏輯

概覽

.png)

上圖是SSR的運行時流程圖（暫時不考慮構建的問題）javascript

圖中左側是瀏覽器端看到的頁面源碼。其中紅色框標識的3個部分，是SSR須要關注的重點內容。css

最簡單的是中間一個框，它是服務端渲染的App的內容部分。html
第一個是分片（splitting）代碼文件。即SSR Server必需要知道，瀏覽器要正確展現這個頁面，須要包含哪些分片的js代碼。若是不計算並返回這個script標籤，那麼瀏覽器render這個list 組建時，會發現這個組件不存在，還須要異步加載並re-render 頁面。java
最後一個框，是服務端返回的 window._preloadedState 即全局狀態對象。瀏覽器端要使用這個對象對redux的store進行初始化。node

收到客戶端的SSR請求後，SSR Server將依次執行以下五部操做：react

對請求的路徑，進行路由匹配；並 "獲取/加載"(獲取對應同步組件，加載對應異步組件) 所涉及的組件

// 初始化
  const history = createMemoryHistory();
  history.push(req.path);
  const initialState = {};

  const app = dva({history, initialState});
  app.router(router);
  const App = app.start();
  let routes = getRoutes(app);

  // 匹配路由，獲取須要加載的Route組件（包含Loadable組件）
  const matchedComponents = matchRoutes(routes, req.path).map(({route}) => {
    if (!route.component.preload) {
      // 同步組件
      return route.component;
    } else {
      // 異步組件
      return route.component.preload().then(res => res.default)
    }
  });
  const loadedComponents = await Promise.all(matchedComponents);
複製代碼

對1中組件進行初始化（如需），進行接口請求，並等待請求返回。

注：須要進行數據初始化的組件，須要定義 static fetching 方法webpack

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);
複製代碼

調用 ReactDOMServer.renderString 渲染數據

// Render Dva App。同時使用Loadable.Capture 捕捉本次渲染包含的Loadable組件集合Array<String>。
const modules = [];
const markup = renderToString(
    <Loadable.Capture report={module => modules.push(module)}>
      <App location={req.path} context={{}}/>
    </Loadable.Capture>
);

//  構造須要render的 script標籤。其中利用了react-loadable的webpack插件在構建過程當中生成的module字典
let bundles = getBundles(moduleDict, modules);
let scripts = bundles.filter(bundle => bundle.file.endsWith('.js'));
let scriptMarkups = scripts.map(bundle => {
  return `<script src="/public/${bundle.file}"></script>`
}).join('\n');
複製代碼

Loadable 的相關概念和用法，請參考 github: react-loadablegit

Code Splitting

獲取preloadedState

const preloadedState = app._store.getState();
複製代碼

拼裝Html，並返回

res.send(` <!DOCTYPE html> <html> <head> <title>React Server Side Demo With Dva</title> <link href="/public/style.css" rel="stylesheet"> </head> <body> <div id="app">${markup}</div> <script>window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\\u003c')}</script> <script src="/public/main.js"></script> ${scriptMarkups} </body> </html> `);
複製代碼

如何支持Dva

本節分幾個部分：github

如何既支持 dva/dynamic 又支持 SSR
SSR Server 端如何支持 Dva
SSR Client 端如何支持 Dva

如何既支持 dva/dynamic 又支持 SSR

以前使用dva的Code Splitting功能時，用的是 dva/dynamic。示例代碼以下：web

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 除了實現了加載組件以外還實現了哪些功能。

經過查閱dva源碼，發現 dva/dynamic 額外實現的功能比較純粹，就是 register model

// packages/dva/src/dynamic.js

const 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];
              }
              
              // 註冊 model
              m.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
});

複製代碼

不難發現，這是不可以徹底匹配 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}/>; }, }); 複製代碼

通過修改，咱們能夠獲得兼容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配置，寫上面這個配置項代碼較多。咱們能夠考慮對其進行封裝。基於此，咱們能夠考慮實現 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組件的數據字典。 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"
    }
  ]
  //... 如下省略
}

複製代碼

實際使用發現，上述代碼 dynamicLoader 沒法生成正確的字典。

後通過Debug發現，問題根源是代碼中使用了帶參數的 import。即 import(./${prefix}/${path})，而webpack 在構建過程當中沒法靜態獲取Loadable組件的路徑。所以，不能使用帶參數的 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

默認狀況下：

app.start('#root');
複製代碼

server 端應該不加參數

// 官方示例
import { IntlProvider } from 'react-intl';
...
const App = app.start();
ReactDOM.render(<IntlProvider><App /></IntlProvider>, htmlElement);

// 本實現的示例

const App = app.start();
const markup = renderToString(
    <Loadable.Capture report={module => modules.push(module)}>
      <App location={req.path} context={{}}/>
    </Loadable.Capture>
  );
複製代碼

model register

const matchedComponents = matchRoutes(routes, req.path).map(({route}) => {
    if (!route.component.preload) {
      return route.component;
    } else {
      
      // 加載Loadable組件
      return route.component.preload().then(res => {
        if (res.default) {
          // Loadable 組件
          return res.default;
        } else {
          // Loadable.Map 組件
          let result;
          for (let i in res) {
            if (res.hasOwnProperty(i)) {
              if (res[i].default.hasOwnProperty('namespace')) {
                // model 組件
                registerModel(app, res[i]);
              } else {
                // route 組件
                result = res[i].default;
              }
            }
          }
          return result;
        }
      })
    }
  });


複製代碼

調用組件初始化方法fetching時，須要傳入 dispatch。而全局的dispatch對象在 app._store 裏

const actionsList = loadedComponents.map(component => {
    if (component.fetching) {
      return component.fetching({
        ...app._store,
        ...component.props,
        path: req.path
      });
    } else {
      return null;
    }
  });

// 示例 fetching 方法

static fetching({dispatch, path}) {
    let language = path.substr("/popular/".length);
    return [
      dispatch({type: 'grid/init', payload: {language}}),
    ];
}

複製代碼

客戶端如何支持 Dva

render

Loadable.preloadReady().then(() => {
  const App = app.start();
  hydrate(
    <App/>,
    document.getElementById('app')
  );
});

複製代碼

組件的初始化數據方法 fetching

因爲一個route 可能須要依賴多個model做爲數據源。故返回一個dispatch 的數組。這樣server就能夠經過多個接口拿數據。

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}})
    ];
}

複製代碼