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}