React Server Components (RSC) と Server Side Rendering (SSR) の違いは何ですか?

Question

React 18 の登場により、RSC が誕生しました。 NextJSのSSRとどう違うのか気になります。

Answer 1

どちらの場合も、React JavaScript コードは Node.js (または Deno、または使用しているもの) によって実行されます。しかし、彼らは異なるものを生み出します。

サーバーサイドレンダリング

サーバーサイドレンダリングとは、ReactDom の ReactDom の renderToString() メソッドを使用して HTML 文字列をクライアントに送信する React を指します。これは静的 HTML の送信とは異なります。任意のサーバー。

次に、通常は SSR セットアップを介して、React がクライアント側で再実行され、同じレンダリングされた HTML 上で実行され、クリック ハンドラーの接続や対話機能の追加などの処理が行われます。これには、サーバーとクライアントがレンダリングする同じデータを持っている必要があります。これは、サーバー上のデータをクライアント上の タグと React の状態を表すオブジェクトにシリアル化することで行われ、React はクライアント上で同じ状態で「ハイドレート」されます。クライアントに異なるデータがある場合、異なる DOM ツリーが生成され、サーバーが作成したものが上書きされ、SSR の目的が無効になります。

サーバーとクライアントの両方で React を使用すると、最初のページの読み込みを SSR で行い、その後のページの読み込みをクライアント側で行うことができます。最初のページの読み込みでは、SSR はクライアント側のレンダリングよりもはるかに高速であり、すべての Javascript リソースがダウンロードされるとさらに高速になります。 SSR を使用する場合、Next.js はデフォルトでこの戦略を適用します。

サーバーコンポーネント

サーバー コンポーネントは HTML 文字列としてレンダリングされません。

React「コンポーネント」は、React「要素」を返す関数またはクラスです。 React の「要素」は、レンダリングされるツリーのオブジェクト表現です。通常の動作モードでは、ReactDOM はこれらの要素オブジェクトを取得し、DOM にレンダリングします。

サーバー コンポーネントは 要素 をクライアントに返します。サーバー上でコンポーネントが実行され、要素が生成され、要素が (基本的には JSON として) クライアントに渡されます。これらの 要素 はクライアント上で レンダリングされ、DOM に配置されます。