hydrate

Deprecated

こ�? API は、今後�?メジャーバージョン�? React で削除される予�?�です。

React 18 では、hydrate は hydrateRoot に�?き換えられました。React 18 で hydrate を使用すると、アプリは React 17 を�?�行しているか�?ような振る舞いになると�?警告が表示されます。詳細はこちらをご覧ください。

hydrate を使用すると、React 17 以前�? react-dom/server によって事前生成した HTML コンテンツが含まれるブラウザ DOM ノード内に、React コンポーネントを表示できます。

hydrate(reactNode, domNode, callback?)

リファレンス
- hydrate(reactNode, domNode, callback?)
使用法

リファレンス

`hydrate(reactNode, domNode, callback?)`

React 17 以前�?環境で hydrate を呼び出して、サーバ環境で事前に React がレンダーした HTML に対して React を「アタッチ」します。

import { hydrate } from 'react-dom';

hydrate(reactNode, domNode);

React は、domNode 内に存在する HTML にアタッチし、そ�?内部�? DOM �?�?�理を引き継ぎます。React で�?�全に構築されたアプリには、ルートコンポーネントを引数にした hydrate 呼び出しが通常 1 つ�?み存在します。

さらに例を見る

引数

reactNode: 既存�?初期 HTML をレンダーする�?に使用された “React ノード”。これは通常、ReactDOM Server �?メソッド（例：React 17 �? renderToString(<App />)）でレンダーされた JSX、例えば <App /> になります。
domNode: サーバ上でルート要素としてレンダーされた DOM 要素。
省略可能 callback: 関数。渡された場合、React はコンポーネント�?ハイドレーション後にそれを呼び出します。

返り値

hydrate は null を返します。

注意点

hydrate は、レンダーされたコンテンツが、サーバでレンダーされたコンテンツと同一であることを期待しています。React はテキストコンテンツ�?�?異を�?正できますが、不一致はバグとして扱い�?正する必要があります。
開発モードでは、React はハイドレーション中�?不一致について警告します。不一致が発生した場合、属性�?違いが�?正される保証はありません。これはパフォーマンス上�?理由から重要です。なぜならほとんど�?アプリでは、不一致はまれであり、すべて�?マークアップを検証することは非常に高コストになるからです。
アプリには通常、hydrate 呼び出しは 1 つだけ存在します。フレームワークを使用している場合、フレームワークがこ�?呼び出しを行うかもしれません。
アプリがクライアントでレンダーする形式であり、事前レンダーされた HTML がない場合、hydrate() は使用できません。代わりに、React 17 以前では render()、React 18 以降では createRoot() を使用してください。

使用法

hydrate を呼び出して、React コンポーネントをサーバでレンダーされたブラウザ�? DOM ノードにアタッチします。

import { hydrate } from 'react-dom';

hydrate(<App />, document.getElementById('root'));

hydrate() を使用して、クライアント�?み�?アプリ（サーバでレンダーされた HTML がないアプリ）をレンダーすることはサポートされていません。代わりに、React 17 以前では render()、React 18 以降では createRoot() を使用してください。

サーバでレンダーされた HTML �?ハイドレーション

React では、“ハイドレーション (hydration)” とは、サーバ環境�? React によって事前レンダーされている HTML に React が「アタッチ」することを指します。ハイドレーション中、React は既存�?マークアップにイベントリスナをアタッチし、アプリ�?レンダー処理をクライアントに引き継ぎます。

React で�?�全に構築されたアプリでは、通常、アプリ全体�?起動時に 1 つ�?「ルート」�?ハイドレーションを一度だけ行います。

Fork

import './styles.css';
import { hydrate } from 'react-dom';
import App from './App.js';

hydrate(<App />, document.getElementById('root'));

通常、hydrate を再度呼び出したり、複数�?場所で呼び出したりする必要はありません。ここから先は、React がアプリケーション�? DOM を�?�理しています。UI を更新するには、コンポーネントは state を使うことになるでしょう。

ハイドレーションに関する詳細は、hydrateRoot �?ドキュメントを参照してください。

やむを得ないハイドレーション不一致エラー�?抑制

サーバとクライアント�?間で、単一�?要素�?属性やテキストコンテンツがやむを得ない理由で異なる場合（たとえば、タイムスタンプなど）、ハイドレーション�?不一致警告を抑制することができます。

要素�?ハイドレーション警告を抑制するには、suppressHydrationWarning={true} を追加します。

Fork

export default function App() {
  return (
    <h1 suppressHydrationWarning={true}>
      Current Date: {new Date().toLocaleDateString()}
    </h1>
  );
}

これは単一レベル�?深さまでしか機能せず、避難ハッチとして�?使用を意図しています。過度に使用しないでください。これを使用してもテキストコンテンツ以外�?場合は React は違いを�?正しようとはしないため、将来�?更新まで一貫性が保たれない可能性があります。

クライアントとサーバで異なるコンテンツ�?処理

サーバとクライアントで意図的に異なるも�?をレンダーする必要がある場合、2 回に分けたレンダーを行うことができます。クライアントで異なるも�?をレンダーするコンポーネントは、isClient �?ような state 変数を読み取るようにし、こ�?変数をエフェクト内で true に設�?�することができます。

Fork

import { useState, useEffect } from "react";

export default function App() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  return (
    <h1>
      {isClient ? 'Is Client' : 'Is Server'}
    </h1>
  );
}

こ�?方法では、初回�?レンダーはサーバと同じコンテンツをレンダーし、不一致を回避しますが、追加�?レンダーがハイドレーション�?直後に同期的に行われます。

落とし穴

こ�?アプローチではコンポーネントを 2 回レンダーする必要があるためハイドレーションが遅くなります。低速な接続におけるユーザ体験に注意してください。JavaScript コードは初期レンダーされた HTML よりもかなり遅く読み込まれる場合があるため、ハイドレーション直後に異なる UI をレンダーするとユーザに不快感を与えるかもしれません。

PreviousfindDOMNode Nextrender