リア・サーバ側レンダリングでの初期ローディング・データの取得

Question

リア・サーバ側レンダリングでAPIから初期ローディング・データをフェッチするためのベスト・プラクティスは何ですか？ コンストラクタメソッドで初期データを読み込もうとしました。しかし、それは動作していません。

Answer 1

componentDidMount（）を使用して、データをフェッチするアクションを開始します。それはあなたの店を埋めるでしょう。 isomorphic/universal reactを利用することで、ストアのJSONをマークアップに埋め込み、クライアント側に読み込むことができます。

Answer 2

redux-sagaを使用して、サーバー側で初期データを取得するのを手伝ってください。以下は

は、あなたの質問にいくつかの追加情報を追加した場合、私のReact example that uses Redux Saga and Hapi for Server-side Rendering

class ReactController { 

    _html = null; 

    mapRoutes(server) { 
     server.route({ 
      method: 'GET', 
      path: '/{route*}', 
      handler: async (request, reply) => { 
       const store = ProviderService.createProviderStore({}, true); 
       const context = {}; 
       const app = (
        <RouterWrapper 
         store={store} 
         location={request.path} 
         context={context} 
         isServerSide={true} 
        /> 
       ); 

       this._html = (this._html === null) ? await this._loadHtmlFile() : this._html; 

       store.runSaga(rootSaga).done.then(async() => { 
        const renderedHtml = renderToString(app); 
        const state = store.getState(); 
        const initialState = { 
         ...state, 
         renderReducer: { 
          isServerSide: true, 
         }, 
        }; 

        const html = this._html 
         .slice(0) 
         .replace('{title}', state.metaReducer.title) 
         .replace('{description}', state.metaReducer.description) 
         .replace('{content}', renderedHtml) 
         .replace('{state}', JSON.stringify(initialState)); 

        if (context.url) { 
         console.info('context', context); 
        } 

        reply(html); 
       }); 

       renderToString(app); 

       store.endSaga(); 
      }, 
     }); 
    } 

    async _loadHtmlFile() { 
     const htmlPath = path.resolve(__dirname, '../../public/index.html'); 

     return fse.readFile(htmlPath, 'utf8'); 
    } 

}