99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

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

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

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

let ret = `
  
    
    
     
     
    
    
     ${html}

服務(wù)端返回替換后的 html 就完成了本次組件服務(wù)端渲染。

路由同步渲染

在項(xiàng)目中避免不了使用路由，而在SSR中，我們必須做到路由同步渲染。

首先我們可以把路由拆分成一個(gè)組件，服務(wù)端入口和客戶端都可以分別引用。

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

這樣我們的路由基本定義完了，然后客戶端引用還是老規(guī)矩，和SPA沒(méi)什么區(qū)別

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

在服務(wù)端中，需要使用將BrowserRouter 替換為 StaticRouter 區(qū)別在于，BrowserRouter 會(huì)通過(guò)HTML5 提供的 history API來(lái)保持頁(yè)面與URL的同步，而StaticRouter 則不會(huì)改變URL，當(dāng)一個(gè) 匹配時(shí)，它將把 context 對(duì)象傳遞給呈現(xiàn)為 staticContext 的組件。

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

至此，路由的同步已經(jīng)完成了。

redux同構(gòu)

在寫(xiě)這個(gè)之前必須先了解什么是注水和脫水，所謂脫水，就是服務(wù)器在構(gòu)建 HTML 之前處理一些預(yù)請(qǐng)求，并且把數(shù)據(jù)注入html中返回給瀏覽器。而注水就是瀏覽器把這些數(shù)據(jù)當(dāng)初始數(shù)據(jù)來(lái)初始化組件，以完成服務(wù)端與瀏覽器端數(shù)據(jù)的統(tǒng)一。

組件配置

在組件內(nèi)部定義一個(gè)靜態(tài)方法

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，所以我們的方法都寫(xiě)在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;

然后通過(guò)根 store 中進(jìn)行 init。

import { init } from '@rematch/core';
import models from './models';

const store = init({
 models: {...models}
});

export default store;

然后可以綁定在我們 redux 的 Provider 中。

路由方面我們需要把組件的 init 方法綁定在路由上方便服務(wù)端請(qǐng)求數(shù)據(jù)時(shí)使用。

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

以上就是客戶端需要進(jìn)行的操作了，因?yàn)?SSR 中我們服務(wù)端也需要進(jìn)行數(shù)據(jù)的操作，所以為了解耦，我們就新建另一個(gè) ServiceStore 來(lái)提供服務(wù)端使用。

在服務(wù)端構(gòu)建 Html 前，我們必須先執(zhí)行完當(dāng)前組件的 init 方法。

import { matchRoutes } from 'react-router-config';
// 用matchRoutes方法獲取匹配到的路由對(duì)應(yīng)的組件數(shù)組
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);

注意我們新建一個(gè) Promise 的數(shù)組來(lái)放置 init 方法，因?yàn)橐粋€(gè)頁(yè)面可能是由多個(gè)組件組成的，我們必須等待所有的 init 執(zhí)行完畢后才執(zhí)行相應(yīng)的 html 構(gòu)建。

現(xiàn)在可以得到的數(shù)據(jù)掛在 window 下，等待客戶端的讀取了。

let ret = `
   
    
    
     
     
    
    
     ${html}