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

2024-06-13

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

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

render()

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

hydrate()

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

詳細

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

例

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を更新

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

補足

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

React 16における hydrate() と render() の違い：サンプルコード

例1：render() を使用して新しいReactアプリケーションを初期化

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);

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

App コンポーネントを定義します。このコンポーネントは、<h1> 見出しと <p> 段落を含む div 要素をレンダリングします。
container 変数に、DOM要素 #root を参照させます。
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);

html 変数に、サーバーレンダリングされたHTMLを格納します。
ReactDOM.hydrate() 関数を使用して、App コンポーネントを container 要素内に更新し、html 変数内の既存のHTMLコンテンツと整合させます。

注記

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

React 16における hydrate() と render() の違い：その他の方法

用途

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

DOM操作

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

パフォーマンス

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

SEO

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

機能	render()	hydrate()
用途	新しいReactアプリケーションの初期化	サーバーサイドレンダリングされたHTMLの管理
DOM操作	既存のDOM要素を置き換える	既存のDOM要素を維持する
パフォーマンス	比較的遅い	比較的速い
SEO	不利	有利