問題タブ [react-static]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 重要なルート (静的レンダリング) の「スナップショット」を使用して、大きな React プロジェクトを高速化する最良の方法
過去数年間構築してきた大規模で複雑な従来の React アプリがあります。index.html を読み込み、javascript を挿入し、通常どおり API からデータを取得します。残念ながら、コールド ロード時間はかなり長くなります (平均 5 ～ 7 秒)。すべてが読み込まれると、いつものようにきびきびと動きますが、特定の「重要な」ページではコールド ロード時間がかかります。これらは、https://mywebsite/userId の形式の公開ユーザー ページです。
コード分割やリソースの最適化を超える方法で、これらのルートの読み込み時間を劇的に短縮する方法を探しています。私たちはすでにそれらを行っており、CDN からアプリを提供しています。
これらのユーザーページの静的な「スナップショット」を作成することを検討しました。これは、react-static などを使用して非常に高速にロードする必要があり、それらを静的バージョンとして提供し、後でそれらをハイドレートします。next.js や gatsby などを使用してプロジェクトを書き直すことは、あまりにも多くの作業を必要とするため、オプションではありません。バックエンド全体が Node.js ではなく Django でコーディングされているため、SSR もオプションではありません。
私たちは正しい道を進んでいますか？これを行うためにreact-static（または同様のツール）を使用することは可能ですか/価値がありますか? 反応静的プロジェクトをゼロから作成する方法に関するドキュメントはたくさんありますが、必要なルートの小さなサブセットであっても、既存のプロジェクトを変換する方法については何もありません。
また、ユーザー ページのデータが変更された場合、適切なスナップショットの「再構築」をトリガーするにはどうすればよいでしょうか。ユーザーは月に 4 回中 3 回ほど頻繁にデータを更新しませんが、3,000 人のユーザーがいるため、1 時間あたり 15 回の更新が平均になるでしょう。実際に変更されたルートの再構築のみをトリガーできますか?