問題タブ [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.

0 投票する
1 に答える
1324 参照

node.js - renderToStaticMarkup のエラー「無効なタグ」

私はreactjsが初めてです..

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

エラー:

server.js (スニペット)

コンポーネント.jsx

0 投票する
1 に答える
561 参照

reactjs - サーバー側のレンダリングで大量のコンテンツと複製に対応

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 ファイルになる可能性があります。

0 投票する
3 に答える
1876 参照

node.js - サーバー側でレンダリングされた React アプリで複数の HTTP リクエストを構造化する方法は?

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

fetchInitialData.js

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

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

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

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

0 投票する
1 に答える
1435 参照

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 のサーバー側レンダリングが原因です。

手がかりはありますか?

0 投票する
3 に答える
3153 参照

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 ファイルをwebpack.config.vendor.js

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

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

アプリを起動すると、例外が発生します エラー ページ: ReferenceError: イベントが定義されていません

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

更新 2

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