サーバー側のレンダリングで大量のコンテンツと複製を反応させる

ReactJS単一シェルでページアプリケーション

1. サーバー側のレンダリング（SSR）がない、問題を再現するための要件：SSRなし
   ReactJS + WebPack + React-Router
   でaspnetコアReactプロジェクトにYeomanジェネレーターを使用し、Startup.csでHotReloadingを無効にしました（または本番モードを実行できました）

   <Route component={ Layout }>
      <Route path='/' components={{ body: Home }} />
      <Route path='/counter' components={{ body: Counter }} />      
   </Route>;
   /* project includes Home.tsx, Counter.tsx and other components/subpages */
   

   Home.tsxの一部：

   class Home extends React.Component<any, void> {
     public render() {
       return <div>
           <h1>Hello, world!</h1>
           <p>Welcome to your new single-page application, built with:</p>
   

   結果

   • main-client.jsホームおよびカウンターコンポーネント（サブページ）のすべてのコンテンツ/レイアウト、および他のサブページのすべてのコンテンツとレイアウトが含まれます。
     これは、1つのサブカテゴリのみを要求した場合でも、アプリケーションのレイアウト全体をロードしていることを意味します。たとえば、Counter
     Webサイトを停止した後でも、webpackedを介してロードされるときにサブページを切り替えることができますmain-client.js。

     

     質問1：現在のページ（アプリケーションシェル+現在のサブカテゴリ）に要求したものだけをロードすることは可能ですか？
     （その後、別のセクションでは、キャッシュされたアプリシェルのために1つの新しいサブカテゴリのみ）
     （おそらく別のルーターと特別な（web-）pack設定を使用）

2. サーバー側レンダリング（SSR）、問題を再現するための要件：ReduxとSSR
   ReactJS + WebPack + React-Router + SSR
   を使用してaspnetコアReactプロジェクトにYeomanジェネレーターを使用し、Startup.csでHotReloadingも無効にしました（または本番モードを実行できます）

   結果

   • Webサイトのレイアウト全体を2回ロードしているため、さらに悪化しています。最初は完全にレンダリングされたhtmlで、次に内部で main-client.js

   これは、Reactの場合、デフォルトで静的コンテンツ（コントロール内の静的テキスト）と動的コンテンツ（一部の条件付きhtml出力）の間に違いがないことを示しています。したがって、すべての情報が巨大なJSファイル内に配置されます。

   質問2：静的部分についてReactにヒントを与えることは可能ですか？サーバーで一度レンダリングしてクライアントのjavaスクリプトから削除するだけで、動的な計算/コンポーネントのみが残りますか？

================================================== ======

これらの問題は多くのサンプルの中にあり、チュートリアルでは言及されていないため、それほど多くの人がそれを認識していないことは明らかです。

最近の一般的なアプローチの1つは、最初に空のアプリケーションシェルレイアウトをロードし、次にクライアントjavascriptを介してコンテンツのJSONデータをロードすることです。ただし、これらの問題は解決されません。たとえば、最初の問題では、まだ穴アプリのシェルを読み込んでいます。豊富なレイアウトの場合、空のDOM要素が多数含まれる非常に巨大なJSファイルになる可能性があります。

<h1 id="react-hint-for-element-9997">/* here will be header*/</h1>
    <h2 id="react-hint-for-element-9998">/* here will be subheader*/</h2>
        /*and so on and on */