Translate "hydrate"

src/content/reference/react-dom/hydrate.md

@@ -4,15 +4,15 @@ title: hydrate
 
 <Deprecated>
 
-This API will be removed in a future major version of React.
+この API は、今後のメジャーバージョンの React で削除される予定です。
 
-In React 18, `hydrate` was replaced by [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Using `hydrate` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
+React 18 では、`hydrate` は [`hydrateRoot` に置き換えられました。](/reference/react-dom/client/hydrateRoot)React 18 で `hydrate` を使用すると、アプリは React 17 を実行しているかのような振る舞いになるとの警告が表示されます。詳細は[こちらをご覧ください。](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
 
 </Deprecated>
 
 <Intro>
 
-`hydrate` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`](/reference/react-dom/server) in React 17 and below.
+`hydrate` を使用すると、React 17 以前で [`react-dom/server`](/reference/react-dom/server) によって以前に生成されたブラウザの DOM ノードの HTML コンテンツ内に React コンポーネントを表示できます。
 
 ```js
 hydrate(reactNode, domNode, callback?)
@@ -24,59 +24,59 @@ hydrate(reactNode, domNode, callback?)
 
 ---
 
-## Reference {/*reference*/}
+## リファレンス {/*reference*/}
 
 ### `hydrate(reactNode, domNode, callback?)` {/*hydrate*/}
 
-Call `hydrate` in React 17 and below to “attach” React to existing HTML that was already rendered by React in a server environment.
+React 17 以前では、`hydrate` を呼び出して、サーバー環境で既に React がレンダーした既存の HTML に React を「アタッチ」します。
 
 ```js
 import { hydrate } from 'react-dom';
 
 hydrate(reactNode, domNode);
 ```
 
-React will attach to the HTML that exists inside the `domNode`, and take over managing the DOM inside it. An app fully built with React will usually only have one `hydrate` call with its root component.
+React は、`domNode` 内に存在する HTML にアタッチし、その内部の DOM を管理します。React で完全に構築されたアプリは通常、ルートコンポーネントを持つ 1 つの `hydrate` 呼び出しのみを持ちます。
 
-[See more examples below.](#usage)
+[さらに例を読む](#usage)
 
-#### Parameters {/*parameters*/}
+#### 引数 {/*parameters*/}
 
-* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `<App />` which was rendered with a `ReactDOM Server` method such as `renderToString(<App />)` in React 17.
+* `reactNode`: 既存の HTML をレンダーするのに使用される「React ノード」。これは通常、React 17 における `ReactDOM Server` のメソッド（例：`renderToString(<App />)`）でレンダーされた JSX の一部である`<App />`のようなものです。
 
-* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server.
+* `domNode`: サーバー上でルート要素としてレンダーされた [DOM 要素](https://developer.mozilla.org/en-US/docs/Web/API/Element)。
 
-* **optional**: `callback`: A function. If passed, React will call it after your component is hydrated.
+* **省略可能**: `callback`: 関数。渡された場合、React はコンポーネントのハイドレーション後にそれを呼び出します。
 
-#### Returns {/*returns*/}
+#### 返り値 {/*returns*/}
 
-`hydrate` returns null.
+`hydrate` は null を返します。
 
-#### Caveats {/*caveats*/}
-* `hydrate` expects the rendered content to be identical with the server-rendered content. React can patch up differences in text content, but you should treat mismatches as bugs and fix them.
-* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
-* You'll likely have only one `hydrate` call in your app. If you use a framework, it might do this call for you.
-* If your app is client-rendered with no HTML rendered already, using `hydrate()` is not supported. Use [render()](/reference/react-dom/render) (for React 17 and below) or [createRoot()](/reference/react-dom/client/createRoot) (for React 18+) instead.
+#### 注意点 {/*caveats*/}
+* `hydrate` は、レンダーされたコンテンツが、サーバーでレンダーされたコンテンツと同一であることを期待しています。React はテキストコンテンツの差異を修正できますが、不一致はバグとして扱い修正する必要があります。
+* 開発モードでは、React はハイドレーション中の不一致について警告します。不一致が発生した場合、属性の違いが修正される保証はありません。これはパフォーマンス上の理由から重要です。なぜならほとんどのアプリでは、不一致はまれであり、すべてのマークアップを検証することは非常に高コストになるからです。
+* アプリには通常、1 つだけ `hydrate` 呼び出しが存在するでしょう。フレームワークを使用している場合、フレームワークがこの呼び出しを行うかもしれません。
+* HTML が既にレンダーされていないクライアントレンダリングの場合、`hydrate()` はサポートされていません。代わりに、React 17 以前では [render()](/reference/react-dom/render)、React 18 以降では [createRoot()](/reference/react-dom/client/createRoot) を使用してください。
 
 ---
 
-## Usage {/*usage*/}
+## 使用法 {/*usage*/}
 
-Call `hydrate` to attach a <CodeStep step={1}>React component</CodeStep> into a server-rendered <CodeStep step={2}>browser DOM node</CodeStep>.
+`hydrate` を呼び出して、<CodeStep step={1}>React コンポーネント</CodeStep>をサーバーレンダリングされた <CodeStep step={2}>ブラウザの DOM ノード</CodeStep>にアタッチします。
 
 ```js [[1, 3, "<App />"], [2, 3, "document.getElementById('root')"]]
 import { hydrate } from 'react-dom';
 
 hydrate(<App />, document.getElementById('root'));
 ```
 
-Using `hydrate()` to render a client-only app (an app without server-rendered HTML) is not supported. Use [`render()`](/reference/react-dom/render) (in React 17 and below) or [`createRoot()`](/reference/react-dom/client/createRoot) (in React 18+) instead.
+`hydrate()` を使用して、クライアントのみのアプリ（サーバーレンダリングされた HTML がないアプリ）をレンダーすることはサポートされていません。代わりに、React 17 以前では [`render()`](/reference/react-dom/render)、React 18 以降では [`createRoot()`](/reference/react-dom/client/createRoot) を使用してください。
 
-### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/}
+### サーバーレンダリングされた HTML のハイドレーション {/*hydrating-server-rendered-html*/}
 
-In React, "hydration" is how React "attaches" to existing HTML that was already rendered by React in a server environment. During hydration, React will attempt to attach event listeners to the existing markup and take over rendering the app on the client.
+React では、「ハイドレーション」とは、サーバー環境の React によって既にレンダリングされた既存の HTML に React が「アタッチ」する方法を指します。ハイドレーション中、React は既存のマークアップにイベントリスナをアタッチし、クライアントでアプリをレンダーします。
 
-In apps fully built with React, **you will usually only hydrate one "root", once at startup for your entire app**.
+React で完全に構築されたアプリでは、**通常、アプリ全体の起動時に 1 つの「ルート」を一度だけハイドレートします**。
 
 <Sandpack>
 
@@ -104,17 +104,17 @@ export default function App() {
 
 </Sandpack>
 
-Usually you shouldn't need to call `hydrate` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState)
+通常、`hydrate` を再度呼び出したり、複数の場所で呼び出したりする必要はありません。ここから先は、React がアプリケーションの DOM を管理しています。UI を更新するには、コンポーネントは [state を使うことになるでしょう。](/reference/react/useState)
 
-For more information on hydration, see the docs for [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot)
+ハイドレーションに関する詳細は、[`hydrateRoot` のドキュメント](/reference/react-dom/client/hydrateRoot)を参照してください。
 
 ---
 
-### Suppressing unavoidable hydration mismatch errors {/*suppressing-unavoidable-hydration-mismatch-errors*/}
+### やむを得ないハイドレーションの不一致エラーの抑制 {/*suppressing-unavoidable-hydration-mismatch-errors*/}
 
-If a single element’s attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the hydration mismatch warning.
+サーバーとクライアントの間で、単一の要素の属性やテキストコンテンツがやむを得ない理由で異なる場合（たとえば、タイムスタンプなど）、ハイドレーションの不一致警告を抑制することができます。
 
-To silence hydration warnings on an element, add `suppressHydrationWarning={true}`:
+要素のハイドレーション警告を抑制するには、`suppressHydrationWarning={true}` を追加します。
 
 <Sandpack>
 
@@ -146,13 +146,13 @@ export default function App() {
 
 </Sandpack>
 
-This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates.
+これはレベル 1 の深さまでしか機能せず、避難ハッチとしての使用を意図しています。過度に使用しないでください。テキストコンテンツ以外の場合、React はそれを修正しようとはせず、将来の更新まで一貫性が保たれない可能性があります。
 
 ---
 
-### Handling different client and server content {/*handling-different-client-and-server-content*/}
+### クライアントとサーバで異なるコンテンツの処理 {/*handling-different-client-and-server-content*/}
 
-If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [effect](/reference/react/useEffect):
+サーバとクライアントで意図的に異なるものをレンダーする必要がある場合、2 回のレンダーを行うことができます。クライアントで異なるものをレンダーするコンポーネントは、以下の `isClient` のような [state 変数](/reference/react/useState)を読み取ることができます。この変数は、[effect](/reference/react/useEffect) 内で `true` に設定することができます。
 
 <Sandpack>
 
@@ -192,10 +192,10 @@ export default function App() {
 
 </Sandpack>
 
-This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration.
+この方法では、初回のレンダーはサーバと同じコンテンツをレンダーし、不一致を回避しますが、追加のパスがハイドレーションの直後に同期的に行われます。
 
 <Pitfall>
 
-This approach makes hydration slower because your components have to render twice. Be mindful of the user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so rendering a different UI immediately after hydration may feel jarring to the user.
+このアプローチはハイドレーションを遅くするため、コンポーネントは 2 回レンダーする必要があります。低速な接続の場合、ユーザ体験に注意してください。JavaScript コードは初回の HTML レンダーよりもかなり遅く読み込まれる場合があるため、ユーザにとってハイドレーション直後に異なる UI をレンダーすることは違和感を感じるかもしれません。
 
 </Pitfall>