[解決済み] ReactJSのサーバーサイドレンダリングとクライアントサイドレンダリングの比較

質問

ReactJSを勉強し始めたところ、サーバーサイドとクライアントサイドの2つの方法でページをレンダリングできることがわかりました。しかし、それをどのように併用するのかがわかりません。アプリケーションを構築するために2つの別々の方法なのか、それとも一緒に使うことができるのでしょうか？

もし併用できるとしたら、どのようにすればよいのでしょうか。サーバー側とクライアント側で同じ要素を重複して使用する必要があるのでしょうか。あるいは、アプリケーションの静的な部分をサーバー側で、動的な部分をクライアント側で構築するだけで、すでにプリレンダリングされているサーバー側との接続は必要ないのでしょうか？

解決方法は？

あるWebサイト/Webアプリケーションに対して、reactを使用することができます。 クライアント側 , サーバーサイド または 両方 .

クライアントサイド

こちらは、完全にブラウザ上でReactJSを動かしている状態です。これは最もシンプルな設定であり、ほとんどの例（例えば http://reactjs.org ). サーバーによってレンダリングされる最初の HTML はプレースホルダーであり、すべてのスクリプトが読み込まれると、ブラウザに UI 全体がレンダリングされます。

サーバーサイド

ここでは、ReactJSをサーバーサイドのテンプレートエンジンと考えてください（jadeやhandlebarsなど...のように）。サーバーによってレンダリングされたHTMLには、あるべきUIが含まれており、スクリプトのロードを待つ必要はありません。あなたのページは、検索エンジンによってインデックスされることができます（javascriptを実行しない場合）。

UIはサーバー上でレンダリングされるため、イベントハンドラは一切動作せず、インタラクティブ性もありません（静的なページとなります）。

両方

ここでは、最初のレンダリングはサーバーで行われます。そのため、ブラウザが受け取るHTMLには、あるべきUIがそのまま反映されています。スクリプトが読み込まれると、仮想 DOM がもう一度レンダリングされ、コンポーネントのイベント ハンドラが設定されます。

こちらでは、全く同じ仮想DOM（ルートReactJSコンポーネント）を、同じ props サーバでレンダリングに使用したものと同じです。さもなければ、ReactJS はサーバー側とクライアント側の仮想 DOM が一致しないと文句を言うでしょう。

ReactJSは再レンダリング時に仮想DOMを差分化するため、実DOMは変異しない。イベントハンドラのみが実際の DOM 要素にバインドされます。