問題タブ [server-side-rendering]
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.
node.js - renderToStaticMarkup のエラー「無効なタグ」
私はreactjsが初めてです..
renderToStaticMarkup を使用してコンポーネント (jsx) をレンダリングしようとしていますが、以下のエラーが発生しています:
エラー:
server.js (スニペット)
コンポーネント.jsx
reactjs - サーバー側のレンダリングで大量のコンテンツと複製に対応
ReactJS S̶i̶n̶g̶l̶e̶ シェルページアプリケーション
サーバー側レンダリング (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 設定を使用)
サーバー側レンダリング (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 スクリプトから削除するだけで済みますか?
- Web サイトのレイアウト全体を 2 回読み込みます。最初は完全にレンダリングされた html で、次に内部で読み込みます。
================================================== ======
これらの問題は多くのサンプルに含まれており、チュートリアルでは言及されていないため、認識している人はあまり多くないようです。
最近の一般的なアプローチの 1 つは、最初に空のアプリケーション シェル レイアウトをロードし、次にクライアント JavaScript を介してコンテンツの JSON データをロードすることです。ただし、これらの問題は解決されません。たとえば、最初の問題については、ホール アプリのシェルをまだロードしています。リッチ レイアウトの場合、多くの空の DOM 要素を含む非常に巨大な JS ファイルになる可能性があります。
node.js - サーバー側でレンダリングされた React アプリで複数の HTTP リクエストを構造化する方法は?
私は現在、以下のサーバー側レンダリング ロジック (reactjs + nodejs +redux を使用) を使用して、最初にデータを同期的に取得し、ストアの初期状態として設定しています。
fetchInitialData.js
データを非同期にフェッチし、出力をロードして、コールバックを使用してページが最初にロードされたときに保存します。
最初のページの読み込み時に 4 ~ 5 回の API 呼び出しを行う必要があるため、ページの読み込み時に複数の呼び出しを行う簡単な方法があるかどうかを確認することを考えました。
初期状態をロードするために、API 呼び出しを連鎖させ、異なる API 呼び出しからの応答を手動でマージして送り返す必要がありますか?
更新 1: axios.all アプローチの使用を考えています。それが理想的なアプローチかどうか教えてもらえますか?
javascript - asp.net コア プロジェクトに Sass ファイルをロードするために、サーバー側レンダリングを使用して webpack をセットアップします。
私は「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 のサーバー側レンダリングが原因です。
手がかりはありますか?
angular - asp.net コア、Angular 2、PrimeNG
管理パネルを作成するための開始点としてaspnetcore-spa テンプレートを使用します。次に、PrimeNGライブラリを追加して、そのコンポーネントを使用します。
残念ながら、ButtonModule を app.module.ts にインポートして更新すると、「イベントは未定義です」というエラーが表示されます。数日間原因が分からないので、誰か助けてくれませんか?
アップデート
- まず、スタブを生成します
yo aspnetcore-spa
- 次
npm install font-awesome primeng --save
次に、font-awesome と PrimeNG の css ファイルを
/li>webpack.config.vendor.js
ベンダーの依存関係を再構築する
webpack --config webpack.config.vendor.js
- 次に、ButtonModule を app.module.ts にインポートします。
このコード断片への例外ポイント
更新 2
問題がサーバー側のレンダリングにあることがわかったので、それを削除しました。それは私にとってはうまくいきますが、サーバー側のレンダリングを有効にせずにこれを解決する方法はまだ興味深いです.