高価な初期API呼び出しを伴うリアクションサーバー側レンダリング

Question

私は現在、反応しているSSRに問題があります。 基本的には、ブラウザから最初のリクエストを送信すると、サーバーは必要なすべてのデータを準備し、レンダリングされたHTMLをユーザーに渡すためにrenderToString（）を呼び出す必要があります。

fetchInitialData（）、その後（（レスポンス）=> renderToString（...））

あなたがそれを見ることができるように、サーバは以下となります。

私のサーバー側のコードで

、私のようなものを持っていますfetchInitialDataが終了するのを待ってから、レンダリングされたHTMLを送信できます。しかし、ここでの問題は、fetchInitialDataが完了するまでに時間がかかることです。つまり、クライアント側のユーザーは、サーバーが最初のAPI呼び出しを終了するまで空白の画面が表示されます。

私の質問は、API呼び出しを完了したときにサーバーがユーザーに読み込みページを送信する方法はありますか？実際のデータで読み込み画面を更新しますか？私は考えることができる 一つの解決策は、サーバーがまっすぐユーザーにロードページを送信できるようにすることです

======は、ユーザは（componentDidMountにそのAPIを呼び出す） あなたは

Answer 1

良い方を持っている場合はご連絡ください

私はこの質問に自分自身で答えています。

誰でもこの問題が発生している場合は、facebookで開発されたbigpipeテクノロジの使用を検討することができます。

考えてみると、サーバーはまだhtmlを送信しますが、</body>と</html>を除いたものがすべてです。だから、実際には閉じられていないhtmlです。 < script>を受け取ると、クライアントはすぐにそれを実行します。つまり、クライアントとサーバーの両方がそのジョブを実行しているため、誰も時間を無駄にしません。実装の観点から

、あなたはNodeJSを使用していると仮定すると：

app.use('/', (req, res) => { 
    res.write(templateHTML); // this has unclosed HTML and all scripts 

    // doing expensive API call here 
    result = API.call() 
    // if code runs here, we get response from API call 
    res.write(result + '</body></html>'); 
    res.end(); 
});