問題タブ [server-side-rendering]

私はreactjsが初めてです..

renderToStaticMarkup を使用してコンポーネント (jsx) をレンダリングしようとしていますが、以下のエラーが発生しています:

エラー：

server.js (スニペット)

コンポーネント.jsx

ReactJS S̶i̶n̶g̶l̶e̶ シェルページアプリケーション

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

   Home.tsx の一部:

   結果

   • main-client.jsホームおよびカウンター コンポーネント (サブページ) のすべてのコンテンツ/レイアウト、および他のサブページのすべてのコンテンツとレイアウトが含まれます。これは、サブカテゴリを 1 つだけ要求した場合でも、アプリケーションのレイアウト全体
     をロードしていることを意味し
     ますmain-client.js。

     

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

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

   結果

   • Web サイトのレイアウト全体を 2 回読み込みます。最初は完全にレンダリングされた html で、次に内部で読み込みます。main-client.js

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

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

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

これらの問題は多くのサンプルに含まれており、チュートリアルでは言及されていないため、認識している人はあまり多くないようです。

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

私は現在、以下のサーバー側レンダリング ロジック (reactjs + nodejs +redux を使用) を使用して、最初にデータを同期的に取得し、ストアの初期状態として設定しています。

fetchInitialData.js

データを非同期にフェッチし、出力をロードして、コールバックを使用してページが最初にロードされたときに保存します。

最初のページの読み込み時に 4 ～ 5 回の API 呼び出しを行う必要があるため、ページの読み込み時に複数の呼び出しを行う簡単な方法があるかどうかを確認することを考えました。

初期状態をロードするために、API 呼び出しを連鎖させ、異なる API 呼び出しからの応答を手動でマージして送り返す必要がありますか?

更新 1: axios.all アプローチの使用を考えています。それが理想的なアプローチかどうか教えてもらえますか?

私は「aspnetcore-spa」と呼ばれる Yeoman プロジェクト テンプレートを使用しています。これは、主要な SPA フレームワーク (Angular2 および React) と連携して動作する ASP.net コア 1 テンプレートです。

Angular2 でプロジェクトを作成しました。biolerplate のコードは正常に動作し、問題はありません。Sass loader を webpack.config.js に追加し、Angular ファイルから Sass ファイルへの参照を作成します。

webpack.config.js で:

私のコンポーネントで：

sass loader に関連する npm パッケージを既にインストールしています。

webpack バンドルの結果である wwwroot/dist フォルダーの main-server.js ファイルを確認したところ、.scss ファイルが読み込まれ、スタイルが正しく処理されていることがわかりました。ただし、アプリを実行すると、サーバー側のレンダリング側からのこの例外が表示されます。

リクエストの処理中に未処理の例外が発生しました。

例外: Node モジュールの呼び出しがエラーで失敗しました: ReferenceError: window is not defined at E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:573:31 at E:\Dev \MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:568:48 at module.exports (E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main- server.js:590:69) オブジェクトで。(E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:526:38) webpack_require (E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\) dist\main-server.js:20:30) で E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:501:22 で Object.module.exports (E: \Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:506:3) でwebpack_require(E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:20:30) オブジェクトで。(E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\dist\main-server.js:129:25) webpack_require (E:\Dev\MyApp\MyAppCore\src\MyApp.Web\ClientApp\) dist\main-server.js:20:30)

Node.js 側で (ASP.net Core の Javascript サービスを介して) コードを実行しており、windowノードでは無効な DOM オブジェクトと結合されたコードがあるため、明らかに webpack のサーバー側レンダリングが原因です。

手がかりはありますか？

管理パネルを作成するための開始点としてaspnetcore-spa テンプレートを使用します。次に、PrimeNGライブラリを追加して、そのコンポーネントを使用します。

残念ながら、ButtonModule を app.module.ts にインポートして更新すると、「イベントは未定義です」というエラーが表示されます。数日間原因が分からないので、誰か助けてくれませんか?

アップデート

• まず、スタブを生成しますyo aspnetcore-spa
• 次npm install font-awesome primeng --save

• 次に、font-awesome と PrimeNG の css ファイルをwebpack.config.vendor.js

  /li>

• ベンダーの依存関係を再構築するwebpack --config webpack.config.vendor.js

• 次に、ButtonModule を app.module.ts にインポートします。

アプリを起動すると、例外が発生します

このコード断片への例外ポイント

更新 2

問題がサーバー側のレンダリングにあることがわかったので、それを削除しました。それは私にとってはうまくいきますが、サーバー側のレンダリングを有効にせずにこれを解決する方法はまだ興味深いです.