【React 16】hydrateとrenderの違いを徹底解説！用途、DOM操作、パフォーマンスまで比較

React 16における hydrate() と render() の違い

React 16において、render() と hydrate() はどちらもDOM要素を生成してReactコンポーネントをレンダリングする関数ですが、それぞれ異なる役割とユースケースを持っています。

render()

• 以下のような場合に使用されます。
  • 新しいReactアプリケーションを初期化する場合
  • DOM要素が動的に生成される場合
• サーバーサイドレンダリング (SSR) には推奨されていません。
• 空のDOM要素に対してReactコンポーネントをレンダリングします。

hydrate()

• 以下のような場合に使用されます。
  • SSRで生成されたHTMLをReactコンポーネントで操作したい場合
  • SEO対策を施したい場合
• サーバーでレンダリングされた既存のHTMLコンテンツをReactコンポーネントで管理します。

詳細

• hydrate()は、渡されたコンポーネントを基にDOM要素を更新し、指定されたコンテナ要素内の既存のHTMLコンテンツと整合させます。コンテナ要素内に矛盾するDOM要素が存在する場合、hydrate()は警告を発し、最悪の場合は予期しない動作を引き起こす可能性があります。
• render()は、渡されたコンポーネントを基にDOM要素を生成し、指定されたコンテナ要素内に挿入します。コンテナ要素内に既存のDOM要素が存在する場合、それらは置き換えられます。

例

import ReactDOM from 'react-dom';

const App = () => (
  <div>Hello, React!</div>
);

const container = document.getElementById('root');

// ReactDOM.render(<App />, container); // 空のコンテナにレンダリング
ReactDOM.hydrate(<App />, container); // サーバーレンダリングされたHTMLを更新

• サーバーサイドレンダリング (SSR) を行う場合は、hydrate()を使用します。
• Reactアプリケーションを新規に作成する場合は、render()を使用します。

• React 17では、ReactDOM.render() 関数は非推奨となり、createRoot() 関数と hydrate() 関数に置き換えられました。

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => (
  <div>
    <h1>Hello, React!</h1>
    <p>This is a React application.</p>
  </div>
);

const container = document.getElementById('root');

ReactDOM.render(<App />, container);

このコードは、以下の操作を実行します。

1. App コンポーネントを定義します。このコンポーネントは、<h1> 見出しと <p> 段落を含む div 要素をレンダリングします。
2. container 変数に、DOM要素 #root を参照させます。
3. ReactDOM.render() 関数を使用して、App コンポーネントを container 要素内にレンダリングします。

例2：hydrate() を使用してサーバーレンダリングされたHTMLを更新

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => (
  <div>
    <h1>Hello, React!</h1>
    <p>This is a React application.</p>
    <button onClick={() => alert('ボタンがクリックされました！')}>クリック</button>
  </div>
);

const container = document.getElementById('root');

const html = `
  <div id="root">
    <h1>Hello, React!</h1>
    <p>This is a React application.</p>
    <button>クリック</button>
  </div>
`;

ReactDOM.hydrate(<App />, container, html);

1. App コンポーネントを定義します。このコンポーネントは、<h1> 見出し、<p> 段落、および onClick イベントハンドラを備えた <button> ボタンを含む div 要素をレンダリングします。
2. html 変数に、サーバーレンダリングされたHTMLを格納します。
3. ReactDOM.hydrate() 関数を使用して、App コンポーネントを container 要素内に更新し、html 変数内の既存のHTMLコンテンツと整合させます。

注記

• ReactDOM.hydrate() 関数は、サーバーレンダリングされたHTMLとReactコンポーネントの整合性を検証します。不一致が見つかった場合は、警告を発します。
• 上記の例では、サーバーレンダリングされたHTMLをシミュレートするために html 変数に直接文字列を格納していますが、実際にはサーバーから取得したHTML文字列を使用する必要があります。

• hydrate() は、サーバーサイドレンダリング (SSR) で生成されたHTMLをReactコンポーネントで管理する際に使用されます。
• render() は、新しいReactアプリケーションを初期化する際に使用されます。

DOM操作

• hydrate() は、コンテナ要素内の既存のDOM要素を維持し、Reactコンポーネントで生成されたDOM要素と整合するように更新します。
• render() は、コンテナ要素内のすべての既存のDOM要素を置き換え、新しいReactコンポーネントで生成されたDOM要素に置き換えます。

パフォーマンス

• hydrate() は、render() よりも高速である可能性があります。これは、hydrate() が既存のDOM要素を再利用するため、DOM操作の回数が少なくなるためです。

SEO

• hydrate() は、SEO に有利です。これは、hydrate() がサーバーレンダリングされたHTMLを維持するため、検索エンジンがアプリケーションの内容をより簡単に理解できるようになるためです。

上記の表は、render() と hydrate() の違いを要約したものです。具体的な状況に応じて、どちらの方法を使用するかを判断する必要があります。

• SEO要件
• 使用するライブラリやフレームワーク
• アプリケーションの複雑性