Skip to content

Commit

Permalink
Translate "hydrate" (#653)
Browse files Browse the repository at this point in the history 
* chatgpt translation and textlint

* fix translation

* fix after review

* fix

* Apply suggestions from code review

* Small tweak for consistency

---------

Co-authored-by: Soichiro Miki <[email protected]>
  • Loading branch information
@riku929hr @smikitky
riku929hr and smikitky authored Sep 4, 2023
1 parent 3d6d37b commit 5b8750e
Showing 1 changed file with 34 additions and 34 deletions.
68 changes: 34 additions & 34 deletions src/content/reference/react-dom/hydrate.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) によって事前生成した HTML コンテンツが含まれるブラウザ DOM ノード内に、React コンポーネントを表示できます。

```js
hydrate(reactNode, domNode, callback?)
Expand All @@ -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 で完全に構築されたアプリには、ルートコンポーネントを引数にした `hydrate` 呼び出しが通常 1 つのみ存在します。
[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 ノード"。これは通常、`ReactDOM Server` のメソッド（例：React 17 の `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 はハイドレーション中の不一致について警告します。不一致が発生した場合、属性の違いが修正される保証はありません。これはパフォーマンス上の理由から重要です。なぜならほとんどのアプリでは、不一致はまれであり、すべてのマークアップを検証することは非常に高コストになるからです。
* アプリには通常、`hydrate` 呼び出しは 1 つだけ存在します。フレームワークを使用している場合、フレームワークがこの呼び出しを行うかもしれません。
* アプリがクライアントでレンダーする形式であり、事前レンダーされた 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 では、"ハイドレーション (hydration)" とは、サーバ環境の 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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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.
これは単一レベルの深さまでしか機能せず、避難ハッチとしての使用を意図しています。過度に使用しないでください。これを使用してもテキストコンテンツ以外の場合は 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)を読み取るようにし、この変数を[エフェクト](/reference/react/useEffect)内で `true` に設定することができます。
<Sandpack>
Expand Down Expand Up @@ -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>

0 comments on commit 5b8750e

Please sign in to comment.