問題タブ [server-rendering]

Microsoft の aspnetcore-spa ジェネレーターを使用して React+Redux で新しい ASP.NET Core SPA を生成し、ant-design とbabel-plugin-importで使用しようとしましたが、初回はページが正常にレンダリングされますが、更新すると、dotnet アプリケーションを再起動した後でも、毎回次のエラーがスローされます。

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

例外: Node モジュールの呼び出しが次のエラーで失敗しました: エラーが原因で事前レンダリングに失敗しました: エラー: モジュール "../../style/index.css" が webpackMissingModule (C:\Users\viccrubs\Documents\Projects\QuestionSample1\) で見つかりませんClientApp\dist\main-server.js:595:66) オブジェクトで。(C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:595:164) webpack_require (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main- server.js:20:30) オブジェクトで。(C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:387:13) webpack_requireで (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:20:30) Object.defineProperty.value (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\) dist\main-server.js:168:14) のwebpack_require (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:20:30) オブジェクト。(C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:65:16) webpack_requireで (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:20:30) Object.defineProperty.value (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\) dist\main-server.js:40:18) 現在のディレクトリ: C:\Users\viccrubs\Documents\Projects\QuestionSample1 Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+d__7.MoveNext()

このバベル プラグインは、純粋な react+webpack+typescript プロジェクトでうまく機能します。babel-plugin-import を使用せずに antd からコンポーネントを手動でインポートすると、同じエラーが発生します。間違った作業ディレクトリの問題のようで、../../style/index.cssantd コンポーネントを含むディレクトリの下に存在しますが、webpack によって処理されているはずです。また、最初のレンダリングがうまく機能するのも奇妙です。

サンプル: https://github.com/viccrubs/QuestionSample1

または、次のようにして再現します。

1. その yeoman ジェネレーターを使用して、React+Redux プロジェクトで ASP.NET Core を生成します。
2. npm install --save antd babel-plugin-import
3. ThunkAction/ClientApp/store の下のファイルからすべてのインポートを削除します
4. "plugins":[["import", { "libraryName": "antd", "style": "css" }]].babelrcに追加
5. Home.tsx に任意の antd コンポーネントを追加します。
6. "allowSyntheticDefaultImports": true,tsconfig.jsonに追加します
7. dotnet を実行して localhost:5000 を開きます
8. 最初のレンダリングではエラーが発生しないはずですが、更新すると上記のエラーが表示されます。

サーバーレンダリングを使用して MERN プロジェクトを構築しています。誰かがプロジェクトをプルすると (サーバーまたはローカルのいずれか)、次のエラーが発生します。

TypeError: (0 , _reactRouter.createServerRenderContext) is not a function

しかし、私のマシンでは、エラーなしで正常に動作します。

また、私は react-router バージョン 4.0.0- alpha .5 を使用しています - おそらくアルファ版が問題ですか?

ここに私の問題があります、

1. フロント サーバー (apache または nginx) があり、proxy_pass "iamurl/server_render/" から "backend.iamurl.com:3000/" のような構成がいくつかありました。
2. 「backend.iamurl.com:3000」サーバーで実行されているサーバーレンダリングreact-routerプログラムがあります。(react、react-router、koa2、redux)。
3. クライアント側で実行すると、すべてが正しくなります。
4. サーバー側で実行すると、初回はサーバー(koa2)でのリクエストで、ctx.url=/を取得するのでルーターが一致しました。しかし、renderToString() が終了し、クライアントが応答を受信したとき、location.path は「/server_render」であるため、react-router は必要なものをレンダリングしません。

問題はクライアント側とサーバー側で異なるパスであることは知っていますが、この状況（プロキシを使用）は大企業では非常に一般的だと思います。ブラウザがサーバーのレンダリング応答を受信したときに正しく実行するにはどうすればよいですか?

みんなのアイデア募集中です。

my routes コード (クライアント側とサーバー側で共有)

これが私のサーバーレンダリングコードです

angularユニバーサルアプリでのクライアントのデータのキャッシュに関する記事をたくさん見たので、サーバーで既に解決されているクライアントのリクエストを複製しません。

サーバーからクライアントにデータが転送される方法がわかりません。JSON を事前にレンダリングされた HTML に挿入するか、それとも他に何か不足していますか?

私はAngular4プロジェクトに取り組んでいます。このチュートリアルに従って、サーバー側のレンダリングを統合しました。1つのことを除いて、すべてが機能します。

データが API サーバーから解決された後で、ページのメタ タグを変更する必要があります。つまり、次のように解決します。

現在の実装では、サーバーはデータを解決せずにレンダリングされたページを送信し、クライアントで解決要求が発生します。

結果がクライアントに送信される前に、サーバーレンダリングでデータのフェッチが発生したときに、動作を実装する方法を教えてもらえますか?