問題タブ [server-rendering]

使用するモジュールの一部にwindow依存関係があるため、サーバー上でアプリの一部をレンダリングできません。ただし、サーバーから送信されるコンテンツは、最初にクライアントでレンダリングされるコンテンツと同じである必要があります。そうでない場合、「React はコンテナーで再利用マークアップを使用しようとしましたが、チェックサムが無効でした」という警告が表示されます。

いくつかの回避策を実行し、サーバーからコンテンツをレンダリングしてから、コンポーネントがマウントされた後、クライアントのみの部分をレンダリングする必要があるようです。here で説明されている同様の問題。

これが最善の解決策だと思いますが、AirBnB の eslint は、状態の変更componentDiMountが良くないというエラーをスローします。

もっと良いアイデアはありますか？

aspnet prerendering を使用してサーバー側のレンダリングを使用して、aspnet コアで実行されている react-redux アプリがあります。

愚かなタイプミスのために、子コンポーネントで未定義の小道具にアクセスしようとするプログラミングエラーを犯したとしましょう。

サーバー レンダリングがなければ、次のようなエラーが発生します: cannot access something of undefined at line x:yy しかし、サーバー レンダリングを使用すると、次のようになります。

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

例外: ノード モジュールの呼び出しが次のエラーで失敗しました: 'ClientApp/src/boot-server' のブート関数が解決または拒否しない promise を返したため、30000 ミリ秒後に事前レンダリングがタイムアウトしました。ブート関数が常にその promise を解決または拒否することを確認してください。「asp-prerender-timeout」タグ ヘルパーを使用して、タイムアウト値を変更できます。

これにより、何がうまくいかなかったのかについてフィードバックが得られない場合、デバッグが非常に難しくなります。何かが失敗した場合に拒否を設定する方法を知っている人はいますか? または、サーバー側でレンダリングされたコードをデバッグすることさえ可能ですか?

これが私のブートサーバーファイルです。さらにファイルが必要な場合は教えてください。

クライアント側のレンダリングと比較して、ユーザーの操作がほとんどないアプリケーションにはサーバー側のレンダリングを使用することを好みます。また、サーバー側のコードをコンパイルするには webpack を選択します。

コンポーネントがレンダリングされたら、テーブルのmarginTopを更新したいシナリオがあります。クライアント側のレンダリングの場合、実装は次のようにリストされます

ただし、ssr では、コンポーネントのレンダリング時に componentDidMount が呼び出されることはありません。したがって、これらのコードをcomponentWillMountに配置し、ソース コードを次のように更新します。

その後、他の問題があります。

理由はわかっています。コードがノード環境で実行されているためです。ブラウザ環境のようなドキュメントの多様性はありません。私が考えることができる方法は、React コンポーネントをサーバー側Server Renderingの html 文字列にレンダリングするために使用されるrenderPage 関数にコードを入れることです。しかし、イベント ハンドラーを最上位のコンテキストに配置すると、他のレンダリングされたページが汚染されます。

私は他の解決策も見つけました。グローバル スコープでイベントをバインドするための React コンポーネント。. 私はそれが最善の解決策だとは思わない。

したがって、クライアント側のレンダリングのように、通常componentDidMountまたはcomponentDidUpdateに配置される DOM ノードを操作するより良い方法があるかどうかを尋ねたいと思います。

私は react-router バージョン 4 を使用しており、サーバーでルートを処理しようとしています。

ReactTraining レポの公式サーバー レンダリング ガイドとReact Router チュートリアルを含むすべてのチュートリアル- サーバー側レンダリングは React Router v3 を使用しています。

そこにある唯一の利用可能なガイドは、React Router バージョン 4 を使用したサーバー側レンダリングです。

同じ手順を実行しましたが、次のエラーが発生しました。

ここに私のウェブがあります

そして私のserver.js：

を使用してデータを永続化しようとしていredux-persistます。これが私のコードです：

1 つのフローで正常に動作します。しかし、homePage 以外のページでページを更新すると、ページ上のすべてが乱れます。次の警告も表示されました。

Ps私はreact-redux-universal-hot-exampleボイラープレートを使用しています

非同期にフェッチされたデータに基づいて、反応コンポーネントに初期状態を持たせる方法を理解するのに問題があります。MyComponent は API からデータを取得dataし、 Mobx を介して内部プロパティを設定しますaction。

クライアント側componentDidMountが呼び出され、データがフェッチされてから設定され、適切にレンダリングされます。

componentDidMountサーバー上でが呼び出されていないことを理解しています。

サーバーには次のようなものがあります。

Provider初期ストアが計算され、コンポーネントを通過する多くの投稿を見てきました。コンポーネントがレンダリングされますが、その状態が初期化されていません。このデータをストアに保存したくはなく、コンポーネントに対してローカル スコープにしたいと考えています。どうすればできますか？

私は RR 3 でサーバー サイド レンダリングをよく使用していたので、v4 のコンテキストでどのように機能するかを確認したかったのです。ウェブサイトのチュートリアルに従ってみましたが、現在はルート マッチと一緒にレンダリングが行われているため、以前のようにプリフェッチ データを実装する方法はありません。

v3 でサーバー レンダリングを行う方法は次のとおりです: https://github.com/alexnm/react-seed/blob/master/server/index.js

match 関数に基づいて、すべてのコンポーネント ツリーからすべてのプリフェッチ関数を呼び出してから、Promise.allそれらが終了するまで待機し、関数をトリガーしrenderToStringて html を返します。

RR4 にはコンポーネントしかない<ServerRouter>ので、現在の解決策はレンダリング コードを複製することです: https://github.com/FortechRomania/react-redux-complete-example/blob/master/src/server/index. js

また、タグのrender関数を使用して、プリフェッチ アクションをトリガーしています。<Match>それは醜く、プリフェッチされたデータでレンダリングしたいページの親コンポーネントにあらゆる種類の依存関係を導入します。

ここで何が欠けていますか？このシナリオのより良い解決策を見つけた人はいますか? 私はまだ有用なものを見つけていません。