服務端初始化Redux的必要性

1. SSR為了解決首屏渲染時間和SEO的問題，那么首屏的內(nèi)容怎么辦？
2. 服務端請求完首屏數(shù)據(jù)后，客戶端接管后是否又重新去請求首屏數(shù)據(jù)
3. 為了解決以上問題所以服務端加載首屏數(shù)據(jù)并初始化到狀態(tài)樹非常必要

服務端加載首屏數(shù)據(jù)

// 1. 服務端拿到首屏數(shù)據(jù)放入狀態(tài)樹
app.get( "/*", async ( req, res ) => {
  try {
    let modules = [];
    const context = {};
    const store = createServerStore();
    const { dispatch } = store;
    const result = await fetchUserMsg('binyellow'); // 請求完首屏需要的數(shù)據(jù)
    dispatch(initializeUserMsg(result.data)); // 將首屏數(shù)據(jù)傳入狀態(tài)樹
    const jsx = (
      <Provider store={store}>
        <Loadable.Capture report={moduleName => modules.push(moduleName)}>
          <StaticRouter context={ context } location={ req.url }>
              <Layout />
          </StaticRouter>
        </Loadable.Capture>
      </Provider>
    );
    const reactDom = renderToStaticMarkup( jsx );
    let bundles = getBundles(stats, modules);
    const state = store.getState();
    res.writeHead( 200, { "Content-Type": "text/html" } );
    res.end( htmlTemplate( reactDom, bundles, state ) );
  } catch (error) {
    throw error;
  }
});
// 2.將JSON數(shù)據(jù)掛載到window的特殊key上
<script>
  window.REDUX_DATA = ${ JSON.stringify( state ) }
  window.env = 'server'
</script>

客戶端

// 1. 將window上的JSON數(shù)據(jù)初始化到Store中
const store = createClientStore( window.REDUX_DATA );
const jsx = (
    <Provider store={store}>
      <Router>
        <Layout />
      </Router>
    </Provider>
);

要考慮的問題

1. 服務端請求數(shù)據(jù)可能造成用戶等待時間，所以要簡化請求數(shù)據(jù)
2. 客戶端要判斷develop狀態(tài)下(調(diào)試頁面)，或者服務端請求出錯的情況下，去加載首屏數(shù)據(jù)