React服务端渲染之路06——优化

时间 2019-11-09

标签 react 服务渲染之路优化栏目 React 繁體版

原文原文链接

全部源代码、文档和图片都在 github 的仓库里，点击进入仓库javascript

1. redux 与路由优化

到目前咱们已经实现了服务端的异步获取数据，可是如今依然还有几个问题
第一，多级路由与路由精确匹配，咱们并无实现多级路由，并且对路由的校验也比较简单，没有深层次的校验
第二，Promise.all 这个方法，要求的是，里边若是有一个方法失败了，那么整个 Promise.all 就是失败的。可是这样是有问题的，咱们是要先经过 Promise.all 获取到数据并修改 store，而后才进行页面渲染的。若是 Promise.all 失败了，那么就再也不往下执行，页面就一直处于 loading 的状态，渲染不出页面，这样明显不是咱们想要的。咱们想要的是，无论 Promise.all 里边有几个失败请求，都不会影响到咱们客户端渲染，同时，若是服务端请求失败了，store 里没有拿到咱们想要的值，那么客户端还能够继续获取数据，不影响用户使用，这样至关因而双保险
那么接下来，咱们就要开始解决这两个问题

1.1 创建 App 组件

在解决这两个问题以前，咱们先一个 App 组件，就像是客户端渲染时的 App 组件，主要是为了作总体页面的一个入口，就是说，咱们进入到每个页面及组件的时候，都要经过 App 组件，这样有助于咱们创建多级路由
同时，这样咱们还能够把 Header 组件从 src/server/render.js 里拿出来，放在 App 组件里，这样便于代码的管理
src/App.js

import React, { Component } from 'react';
import Header from './components/Header';

class App extends Component {

  render() {
    return (
      <div>
        <Header />
        <div className="container">

        </div>
      </div>
    );
  }
}

export default App;

那么咱们能够想两个问题，第一个问题是， container 里应该放什么，确定是路由，由于 Header 是导航，那么导航下边确定要放路由，这样才能把内容显示出来
第二个问题是，路由怎么放，咱们要创建多级路由，确定不能像以前那样采用 routes.map() 这样的方法显示路由，那么该怎么作，要解决这个问题，咱们先修改路由文件

1.2 配置多级路由

多级路由的根入口，就是 App 组件，那么也就是说，根路由就是 App 组件，剩下的 Home 和 News 组件都是子路由，尽管 Home 页面显示的也是根路由，可是咱们依然把它做为一个子路由
接下来，咱们修改路由文件
src/routes.js

// src/routes.js
import React from 'react';
import {Route} from 'react-router-dom';
import App from './App';
import Home from './containers/Home';
import News from './containers/News';

export default [
  {
    path: '/',
    component: App,
    key: 'app',
    routes: [
      {
        path: '/',
        component: Home,
        loadData: Home.loadData,
        exact: true,
        key: '/'
      },
      {
        path: '/news',
        component: News,
        exact: true,
        key: '/news'
      }
    ]
  }
];

1.3 服务端使用多级路由

配置完成了，可是咱们该怎么使用呢，这是一个问题，react-router-dom 里有一个 matchPath 的方法，这个方法能够匹配路由，可是它只能匹配单级路由，多级路由不支持，因此咱们不能使用 matchPath
有一个库叫作 react-router-config，这个库里边有两个方法，一个是 matchRoutes ，另外一个是 renderRoutes，这两个方法一个是匹配路由，一个是渲染路由，恰好能够知足咱们的须要。可是顺序咱们要先搞清楚，确定是先匹配路由，匹配完了以后，而后才开始渲染路由
下载依赖 npm i react-router-config -S
首先在服务端匹配多级路由前端
- 就这一句话，routes 就是在 src/routes.js 配置的新的路由，req.path 就是服务的请求路由，匹配完以后获得的是一个数组对象，每一个对象都是所匹配到的路由
- 有一个不同的地方就是，匹配完以后获得的 matchedRoutes 里的结构体不同了，loadData 已经不在是属于单个 item 的，而是 item.route.loadData，其余的没有什么须要改变的

// src/server/render.js
import { matchRoutes } from 'react-router-config';

let matchedRoutes = matchRoutes(routes, req.path);

let promises = [];

matchedRoutes.forEach(item => {
  let loadData = item.route.loadData;

  if (loadData) {
    const promise = loadData(store);
    promises.push(promise);
  }
});

而后服务端开始渲染路由，渲染路由就比较简单，直接调用 renderRoutes 方法，传入 routes 参数就行

// src/server/render.js

import { renderRoutes } from 'react-router-config';

let domContent = renderToString(
  <Provider store={store}>
    <StaticRouter context={context} location={req.path}>
      {
        renderRoutes(routes)
      }
    </StaticRouter>
  </Provider>
);

1.4 客户端使用多级路由

客户端使用的多级路由，和服务端区别不大，不同的地方就是客户端不须要匹配路由，直接渲染就能够

import { renderRoutes } from 'react-router-config';

hydrate(<Provider store={store}>
  <BrowserRouter>
    {renderRoutes(routes)}
  </BrowserRouter>
</Provider>, window.root);

1.5 App 组件使用多级路由

App 组件是客户端和服务端都要使用到的组件，因此这个组件就不太同样，渲染路由须要传递参数
renderRoutes 这个方法比较有意思，在服务端使用的时候，直接就获取到了全部匹配到的路由，同时，把匹配到的路由做为属性值保留在组件的 props 里，因此，在服务端 {renderRoutes(routes)} 的时候，就已经把匹配到的信息保留了下来。那么在 App 里使用的时候，直接调用 props 里的属性值就能够了
咱们先修改代码，src/App.js

// src/App.js
import React, { Component } from 'react';
import { renderRoutes } from 'react-router-config';
import Header from './components/Header';

class App extends Component {

  render() {
    console.log(this.props);
    return (
      <div>
        <Header />
        <div className="container">
          {
            renderRoutes(this.props.route.routes)
          }
        </div>
      </div>
    );
  }
}

export default App;

咱们在控制台查看一下 this.props 的值是什么

能够看到，props 里有路由的三个属性，history，location 和 match，还有一个静态属性 staticContext，这个咱们后边再说。最重要的是 route 属性，route.routes 里就是咱们定义的路由文件里的 routes 属性，因此咱们直接使用这个 routes 属性渲染路由
此时咱们再进行页面的切换，服务端异步获取数据，客户端同步修改数据，均可以正常操做，没有任何的问题

1.6 解决 Promise.all 的问题

Promise.all 的问题实际上就是每个 promise 的问题，而每个 promise 的问题就是这个 promise 的状态可能会失败，那么咱们须要解决的就是，如何把 promise 失败的状态，也改成成功的状态。就算失败了，不修改 store 的值也不要紧，客户端能够修改，最重要的是不能引发页面一直 loading 而不渲染页面
因此咱们修改 promise 的状态，把失败的状态也改成成功的状态，这样就解决了 promise 失败的状态，能够尝试一下把接口改成一个不存在的接口，而后调用接口，看一下页面是否会正常渲染，同时查看一下 store 里的值
src/server/render.js

// src/server/render.js
matchedRoutes.forEach(item => {
  let loadData = item.route.loadData;

  if (loadData) {
    const promise = new Promise((resolve) => {
      loadData(store).then(resolve).catch(resolve);
    });
    promises.push(promise);
  }
});

这里还须要再进行一步操做，就是在有 loadData 属性的组件里，咱们要在 componentDidMount 或者 componentWillMount 生命周期方法里去判断 store 里是否有咱们想要的值，若是没有，在这两个生命周期方法里进行调用，这样就不会由于注水失败，而致使页面没有数据
咱们修改 Home 组件里的代码，src/containers/Home/index.js

// src/containers/Home/index.js

componentDidMount () {
  if (!this.props.user.schoolList.length) {
    this.props.propGetSchoolList();
  }
}

可是，若是服务端没有获取到数据，客户端也没有数据，那就是出 bug 了，这个须要测试接口，还须要测试前端的代码

2. 服务端代理转发

咱们开发的时候，由于有安全问题，因此尽可能不让客户端去直接调用第三方接口。可是咱们服务端渲染的时候，不提供第三方的接口，这该怎么办？咱们能够采用代理
代理，跟代购(海淘)很像，咱们要买一双空军一号耐克鞋，可是因为国内粉丝热情，一鞋难求，并且还有黄牛囤货，价钱太贵。国内没有空军一号，可是美国有呀，咱们能够去美国买呀。这下就有问题了，去美国就得买机票办签证定酒店，并且还有拒签的风险，再说，也不可能去美国专门买一双鞋回来的呀。这成本加起来，别说买一双了，买 10 双都够了，何须呢，因此，找代购，代购才多花多少钱，花不了多少钱，比起签证机票酒店便宜了的海了去了，因此，代购，就是咱们最好的选择
咱们把咱们须要购买的物品告诉代购，代购去美国购买，购买完以后，再把物品带回来给我。这个过程，代购就是一个中间人的过程，跟代理是如出一辙的，咱们的客户端是创建在 Node 服务器上的，客户端发送请求给 Node 服务器，Node 服务器把请求信息转发给第三方服务器，好比 Java，那么 Node 服务器去请求 Java 服务器，Java 服务器把数据返回给 Node 服务器，Node 服务端再把数据返回给客户端。这里的 Node 服务器，就是中间层代理

咱们采用 express-http-proxy 这个库来作转发，可是转发以前咱们要考虑一下，哪些须要转发？哪些不须要转发？确定不是全部的都转发，咱们要知道第三方服务是作数据提供的，不是作页面渲染和资源提供的，因此只须要转发 api 数据接口就行，若是有须要，也能够转发须要的请求头，好比 cookie 信息，其余的不须要转发，因此，咱们统一把以 api 开头的接口，转发给 Java 服务器
src/server/index.js

import proxy from 'express-http-proxy';

app.use('/api', proxy('http://localhost:8757', {
  proxyReqPathResolver(req) {
    return `/api${req.url}`;
  }
}));

因此，咱们实际上仅仅是把以 api 开头的接口进行了转发，其余的都没有修改

3. axios 的请求优化

3.1 为何要作 axios 的请求优化

既然服务端已经把请求的接口进行了转发，那么咱们的客户端在请求的时候，就不须要直接请求第三方服务，直接去请求服务端就能够，由于服务端已经帮助咱们作了一层代理
还有一个问题，客户端请求服务端要转发，那么服务端请求的话，服务端就不须要转发，由于服务端直接请求的就是第三方服务，换句话说，客户端和服务端请求的路径，仍是有一些不同的，咱们能够对不一样的端请求进行不一样的处理

3.2 如何对 axios 进行优化

咱们经过 axios.create 方法建立一个实例，这个实例本质上与 axios 是同样的，只不过是说，建立出来的作个实例，咱们能够对请求头和响应头作统一的处理，这样更加方便。
在 src/client/ 建立一个 request.js 文件，供客户端请求使用

import axios from 'axios';

export default axios.create({
  baseURL: `/`
});

在 src/server/ 建立一个 request.js 文件，供服务端请求使用

import axios from 'axios';

const serverAxios = axios.create({
  baseURL: 'http://localhost:8757'
});

export default serverAxios;

3.3 如何使用 axios 实例

定义 axios 实例以后，咱们须要考虑如何去使用
咱们知道，redux 的 action 返回的是一个对象，经过 redux-thunk 能够返回一个方法。redux-thunk 还有一个 withExtraArgument 的属性方法，咱们能够把 axios 的实例做为 withExtraArgument 的参数进行传递，在 action 中直接使用这个参数
把 axios 的实例传递到 store 里，src/store/index.js

// src/store/index.js
import clientAxios from '../client/request';
import serverAxios from '../server/request';

export const getServerStore = (req) => createStore(
  reducers,
  composeWithDevTools(applyMiddleware(thunk.withExtraArgument(serverAxios(req)), logger))
);

export const getClientStore = () => {
  let initState = window.context.state;
  return createStore(
    reducers,
    initState,
    composeWithDevTools(applyMiddleware(thunk.withExtraArgument(clientAxios), logger))
  )
};

在 action 中使用，src/store/user/createActions.js

// src/store/user/createActions.js
export const getSchoolList = () => {
  return (dispatch, getState, axiosInstance) => {
    return axiosInstance.get('http://localhost:8758/api/getSchoolList').then(res => {
      if (res.status === 200) {
        let schoolList = res.data.schoolList;
        dispatch({
          type: Types.GET_SCHOOL_LIST,
          payload: schoolList
        });
      }
    });
  }
}

这个时候，咱们就实现了针对客户端和服务端不同，请求的方式也不同，也方便咱们后期对不一样的端的 axios 请求作一些扩展

3.4 关于 cookie

咱们知道，咱们如今的浏览器向服务器发送请求的时候，是有 cookie 信息的，然而如今服务端在向 Java 服务器请求的时候，是没有 cookie 信息的，可是咱们常常须要作登陆校验的判断，因此咱们还须要把 cookie 转发给 Java 服务器
咱们修改一下服务端的 axios 实例
src/server/render.js

// src/server/render.js
let store = getServerStore(req);

src/store/index.js

export const getServerStore = (req) => createStore(
  reducers,
  composeWithDevTools(applyMiddleware(thunk.withExtraArgument(serverAxios(req)), logger))
);

src/server/request.js

// src/server/request.js
const serverAxios = axios.create({
  baseURL: 'http://localhost:8757',
  headers: {
    cookie: req.get('cookie') || ''
  }
});

实际上就是，咱们把请求信息所有经过 getServerStore 传递给 serverAxios 实例，而后在 serverAxios 里修改请求头信息，服务端在向 Java 服务器发送请求的时候，就能够把 cookie 携带上，也能够携带其余的信息，好比请求的其余参数之类的

React服务端渲染之路06——优化

相关阅读

1. redux 与路由优化

1.1 创建 App 组件

1.2 配置多级路由

1.3 服务端使用多级路由

1.4 客户端使用多级路由

1.5 App 组件使用多级路由

1.6 解决 Promise.all 的问题

2. 服务端代理转发

3. axios 的请求优化

3.1 为何要作 axios 的请求优化

3.2 如何对 axios 进行优化

3.3 如何使用 axios 实例

3.4 关于 cookie

相关阅读