reactkoarematch怎么打造一套服务端渲染架子-创新互联

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.hydrate(, document.getElementById('app'));

const jsx = 
  
    
  
  
const html = ReactDOMServer.renderToString(jsx);

let ret = `
  
    
    
     
     
    
    
     ${html}

服务端返回替换后的 html 就完成了本次组件服务端渲染。

路由同步渲染

在项目中避免不了使用路由，而在SSR中，我们必须做到路由同步渲染。

首先我们可以把路由拆分成一个组件，服务端入口和客户端都可以分别引用。

function AppRoutes({ context, initialData }: any) {
 return (
  
   {
    routes.map((d: any) => (
     
      key={d.path}
      exact={d.exact}
      path={d.path}
      init={d.init || ''}
      component={d.component}
     />
    ))
   }
   
  
 );
}

(routes.js)

export const routes = [
 {
  path: '/Home',
  component: Home,
  init: Home.init,
  exact: true,
 },
 {
  path: '/Hello',
  component: Hello,
  init: Hello.init,
  exact: true,
 }
];

这样我们的路由基本定义完了，然后客户端引用还是老规矩，和SPA没什么区别

import { BrowserRouter as Router } from 'react-router-dom';
import AppRoutes from './AppRoutes';
class App extends Component> {
...
 render() {
  return (
  
   
  
  );
 }
}

在服务端中，需要使用将BrowserRouter 替换为 StaticRouter 区别在于，BrowserRouter 会通过HTML5 提供的 history API来保持页面与URL的同步，而StaticRouter 则不会改变URL，当一个 匹配时，它将把 context 对象传递给呈现为 staticContext 的组件。

const jsx = 
  
    
  
  
const html = ReactDOMServer.renderToString(jsx);

至此，路由的同步已经完成了。

redux同构

在写这个之前必须先了解什么是注水和脱水，所谓脱水，就是服务器在构建 HTML 之前处理一些预请求，并且把数据注入html中返回给浏览器。而注水就是浏览器把这些数据当初始数据来初始化组件，以完成服务端与浏览器端数据的统一。

组件配置

在组件内部定义一个静态方法

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 中。

路由方面我们需要把组件的 init 方法绑定在路由上方便服务端请求数据时使用。

   {
    routes.map((d: any) => (
     
      key={d.path}
      exact={d.exact}
      path={d.path}
      init={d.init || ''}
      component={d.component}
     />
    ))
   }
   
  

以上就是客户端需要进行的操作了，因为 SSR 中我们服务端也需要进行数据的操作，所以为了解耦，我们就新建另一个 ServiceStore 来提供服务端使用。

在服务端构建 Html 前，我们必须先执行完当前组件的 init 方法。

import { matchRoutes } from 'react-router-config';
// 用matchRoutes方法获取匹配到的路由对应的组件数组
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 的数组来放置 init 方法，因为一个页面可能是由多个组件组成的，我们必须等待所有的 init 执行完毕后才执行相应的 html 构建。

现在可以得到的数据挂在 window 下，等待客户端的读取了。

let ret = `
   
    
    
     
     
    
    
     ${html}