From 269813df7aecf7061aa276798c05bb65094fd187 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 27 Aug 2023 16:52:29 +0900 Subject: [PATCH 1/2] Translate "hydrateRoot" --- .../reference/react-dom/client/hydrateRoot.md | 134 +++++++++--------- 1 file changed, 67 insertions(+), 67 deletions(-) diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index cf77a81ac..86f707a2c 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -4,7 +4,7 @@ title: hydrateRoot -`hydrateRoot` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`.](/reference/react-dom/server) +`hydrateRoot` を使用すると、[`react-dom/server`](/reference/react-dom/server) によって事前生成した HTML コンテンツが含まれるブラウザ DOM ノード内に、React コンポーネントを表示できます。 ```js const root = hydrateRoot(domNode, reactNode, options?) @@ -16,11 +16,11 @@ const root = hydrateRoot(domNode, reactNode, options?) --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `hydrateRoot(domNode, reactNode, options?)` {/*hydrateroot*/} -Call `hydrateRoot` to “attach” React to existing HTML that was already rendered by React in a server environment. +`hydrateRoot` を呼び出して、サーバ環境で事前に React がレンダーした HTML に対して React を「アタッチ」します。 ```js import { hydrateRoot } from 'react-dom/client'; @@ -29,99 +29,99 @@ const domNode = document.getElementById('root'); const root = hydrateRoot(domNode, reactNode); ``` -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 `hydrateRoot` call with its root component. +React は、`domNode` 内に存在する HTML にアタッチし、その内部の DOM の管理を引き継ぎます。React で完全に構築されたアプリには、ルートコンポーネントを引数にした `hydrate` 呼び出しが通常 1 つのみ存在します。 -[See more examples below.](#usage) +[さらに例を見る](#usage) -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -* `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)。 -* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `` which was rendered with a `ReactDOM Server` method such as `renderToPipeableStream()`. +* `reactNode`: 既存の初期 HTML をレンダーするために使用された "React ノード"。これは通常、`ReactDOM Server` のメソッド（例：`renderToPipeableStream()`）でレンダーされた JSX、例えば `` になります。 -* **optional** `options`: An object with options for this React root. +* **省略可能** `options`: この React ルートのオプションを含むオブジェクト。 - * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. - * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server. + * **省略可能** `onRecoverableError`: React が自動的にエラーから回復したときに呼び出されるコールバック。 + * **省略可能** `identifierPrefix`: React が [`useId`](/reference/react/useId) によって生成する ID に使用する文字列プレフィックス。同じページ上に複数のルートを使用する際に、競合を避けるために用います。サーバ上で使用されたものと同じプレフィックスでなければなりません。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -`hydrateRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount) +`hydrateRoot` は、[`render`](#root-render) と [`unmount`](#root-unmount) の 2 つのメソッドを持つオブジェクトを返します。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -* `hydrateRoot()` expects the rendered content to be identical with the server-rendered content. 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 `hydrateRoot` 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 `hydrateRoot()` is not supported. Use [`createRoot()`](/reference/react-dom/client/createRoot) instead. +* `hydrateRoot()` は、レンダーされたコンテンツがサーバでレンダーされたコンテンツと同一であることを期待しています。不一致はバグとして扱い修正する必要があります。 +* 開発モードでは、React はハイドレーション中の不一致について警告します。不一致が発生した場合、属性の違いが修正される保証はありません。これはパフォーマンス上の理由から重要です。なぜならほとんどのアプリでは、不一致はまれであり、すべてのマークアップを検証することは非常に高コストになるからです。 +* アプリには通常、`hydrateRoot` 呼び出しは 1 つだけ存在します。フレームワークを使用している場合、フレームワークがこの呼び出しを行うかもしれません。 +* アプリがクライアントでレンダーする形式であり、事前レンダーされた HTML がない場合、`hydrateRoot()` は使用できません。代わりに [`createRoot()`](/reference/react-dom/client/createRoot) を使用してください。 --- ### `root.render(reactNode)` {/*root-render*/} -Call `root.render` to update a React component inside a hydrated React root for a browser DOM element. +`root.render` を呼び出して、ブラウザ DOM 要素内にハイドレーションされた React ルート内の React コンポーネントを更新します。 ```js root.render(); ``` -React will update `` in the hydrated `root`. +React はハイドレーションされた `root` 内の `` を更新します。 -[See more examples below.](#usage) +[さらに例を見る](#usage) -#### Parameters {/*root-render-parameters*/} +#### 引数 {/*root-render-parameters*/} -* `reactNode`: A "React node" that you want to update. This will usually be a piece of JSX like ``, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`. +* `reactNode`: 更新したい "React ノード"。通常は `` のような JSX ですが、[`createElement()`](/reference/react/createElement) で構築した React 要素や、文字列、数値、`null`、または `undefined` を渡すこともできます。 -#### Returns {/*root-render-returns*/} +#### 返り値 {/*root-render-returns*/} -`root.render` returns `undefined`. +`root.render` は `undefined` を返します。 -#### Caveats {/*root-render-caveats*/} +#### 注意点 {/*root-render-caveats*/} -* If you call `root.render` before the root has finished hydrating, React will clear the existing server-rendered HTML content and switch the entire root to client rendering. +* ルートがハイドレーションを完了する前に `root.render` を呼び出すと、React は既存のサーバレンダリングされた HTML コンテンツをクリアし、ルート全体をクライアントでのレンダーに切り替えます。 --- ### `root.unmount()` {/*root-unmount*/} -Call `root.unmount` to destroy a rendered tree inside a React root. +`root.unmount` を呼び出して、React ルート内にレンダーされたツリーを破棄します。 ```js root.unmount(); ``` -An app fully built with React will usually not have any calls to `root.unmount`. +React で完全に構築されたアプリには、通常、`root.unmount` の呼び出しは一切ありません。 -This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. You need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't clean up and free up resources like subscriptions. +これは主に、React ルートの DOM ノード（またはその祖先のいずれか）が他のコードによって DOM から削除される可能性がある場合に有用です。例えば、非アクティブなタブを DOM から削除する jQuery のタブパネルがあると想像してみてください。タブが削除されると、（React ルートを含んだ）内部のすべてが DOM から削除されます。その場合、削除されたルートのコンテンツの管理を「停止」するよう React に伝えるために `root.unmount` を呼び出す必要があります。そうしないと、削除されたルート内のコンポーネントは、データ購読などのグローバルリソースをクリーンアップして解放する必要があるということが分からないままになります。 -Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. +`root.unmount` を呼び出すことで、ルート内のすべてのコンポーネントがアンマウントされ、React がルート DOM ノードから「切り離され」ます。これには、ツリー内のイベントハンドラや state の削除も含まれます。 -#### Parameters {/*root-unmount-parameters*/} +#### 引数 {/*root-unmount-parameters*/} -`root.unmount` does not accept any parameters. +`root.unmount` は引数を受け付けません。 -#### Returns {/*root-unmount-returns*/} +#### 返り値 {/*root-unmount-returns*/} -`root.unmount` returns `undefined`. +`root.unmount` は `undefined` を返します。 -#### Caveats {/*root-unmount-caveats*/} +#### 注意点 {/*root-unmount-caveats*/} -* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node. +* `root.unmount` を呼び出すと、ツリー内のすべてのコンポーネントがアンマウントされ、React がルート DOM ノードから「切り離され」ます。 -* Once you call `root.unmount` you cannot call `root.render` again on the root. Attempting to call `root.render` on an unmounted root will throw a "Cannot update an unmounted root" error. +* `root.unmount` を呼び出した後、同一ルートで再度 `root.render` を呼び出すことはできません。アンマウント済みのルートで `root.render` を呼び出そうとすると、"Cannot update an unmounted root" というエラーがスローされます。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/} +### サーバでレンダーされた HTML のハイドレーション {/*hydrating-server-rendered-html*/} -If your app's HTML was generated by [`react-dom/server`](/reference/react-dom/client/createRoot), you need to *hydrate* it on the client. +あなたのアプリの HTML が [`react-dom/server`](/reference/react-dom/client/createRoot) によって生成されている場合、クライアント上それに対する*ハイドレーション*を行う必要があります。 ```js [[1, 3, "document.getElementById('root')"], [2, 3, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -129,9 +129,9 @@ import { hydrateRoot } from 'react-dom/client'; hydrateRoot(document.getElementById('root'), ); ``` -This will hydrate the server HTML inside the browser DOM node with the React component for your app. Usually, you will do it once at startup. If you use a framework, it might do this behind the scenes for you. +これにより、ブラウザ DOM ノード内にあるサーバからの HTML がハイドレーションされ、あなたのアプリの React コンポーネントとなります。通常、これはスタートアップ時に一度のみ行います。フレームワークを使用している場合はあなたの代わりにこの呼び出しが自動で行われるかもしれません。 -To hydrate your app, React will "attach" your components' logic to the initial generated HTML from the server. Hydration turns the initial HTML snapshot from the server into a fully interactive app that runs in the browser. +アプリのハイドレーション時に React は、サーバで生成された初期 HTML に、あなたのコンポーネントのロジックを「アタッチ」します。ハイドレーションにより、サーバからの初期 HTML スナップショットが、ブラウザで動作する完全にインタラクティブなアプリに変化します。 @@ -178,30 +178,30 @@ function Counter() { -You shouldn't need to call `hydrateRoot` 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) instead. +通常、`hydrateRoot` を再度呼び出したり、複数の場所で呼び出したりする必要はありません。ここから先は、React がアプリケーションの DOM を管理しています。UI を更新するには、コンポーネントは [state を使うことになるでしょう](/reference/react/useState)。 -The React tree you pass to `hydrateRoot` needs to produce **the same output** as it did on the server. +`hydrateRoot` に渡す React ツリーは、サーバ上で行った出力と**同じ出力**を生成する必要があります。 -This is important for the user experience. The user will spend some time looking at the server-generated HTML before your JavaScript code loads. Server rendering creates an illusion that the app loads faster by showing the HTML snapshot of its output. Suddenly showing different content breaks that illusion. This is why the server render output must match the initial render output on the client. +これはユーザ体験にとって重要です。ユーザはあなたの JavaScript コードがロードされる前に、サーバが生成した HTML を一定時間見ています。サーバレンダリングによりアプリの出力の HTML スナップショットを表示することで、アプリが素早くロードされているという錯覚が作り出されます。突然異なるコンテンツを表示すると、その錯覚が壊れてしまいます。このため、サーバからのレンダーの出力はクライアント上での初期レンダーの出力と一致する必要があるのです。 -The most common causes leading to hydration errors include: +ハイドレーションエラーを引き起こす最も一般的な原因としては以下のようなものがあります。 -* Extra whitespace (like newlines) around the React-generated HTML inside the root node. -* Using checks like `typeof window !== 'undefined'` in your rendering logic. -* Using browser-only APIs like [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in your rendering logic. -* Rendering different data on the server and the client. +* ルートノード内の React が生成した HTML の周囲に余分な空白（改行など）がある。 +* レンダーのロジックで `typeof window !== 'undefined'` のようなチェックを使用している。 +* レンダーのロジックで [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) のようなブラウザ専用の API を使用している。 +* サーバとクライアントで異なるデータをレンダーしている。 -React recovers from some hydration errors, but **you must fix them like other bugs.** In the best case, they'll lead to a slowdown; in the worst case, event handlers can get attached to the wrong elements. +React は一部のハイドレーションエラーから回復できますが、**他のバグと同様にそれらを修正する必要があります**。運がよければアプリが遅くなるだけですが、最悪の場合、イベントハンドラが誤った要素にアタッチされる可能性があります。 --- -### Hydrating an entire document {/*hydrating-an-entire-document*/} +### ドキュメント全体のハイドレーション {/*hydrating-an-entire-document*/} -Apps fully built with React can render the entire document as JSX, including the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) tag: +React で完全に構築されたアプリケーションは、[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) タグを含むドキュメント全体を JSX としてレンダーすることができます。 ```js {3,13} function App() { @@ -221,7 +221,7 @@ function App() { } ``` -To hydrate the entire document, pass the [`document`](https://developer.mozilla.org/en-US/docs/Web/API/Window/document) global as the first argument to `hydrateRoot`: +ドキュメント全体をハイドレートするには、`hydrateRoot` の最初の引数として [`document`](https://developer.mozilla.org/en-US/docs/Web/API/Window/document) グローバル変数を渡します。 ```js {4} import { hydrateRoot } from 'react-dom/client'; @@ -232,11 +232,11 @@ hydrateRoot(document, ); --- -### 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}` を追加します。 @@ -268,13 +268,13 @@ export default function App() { -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` に設定することができます。 @@ -314,21 +314,21 @@ export default function App() { -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. +この方法では、初回のレンダーはサーバと同じコンテンツをレンダーし、不一致を回避しますが、追加のレンダーがハイドレーションの直後に同期的に行われます。 -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 also feel jarring to the user. +このアプローチではコンポーネントを 2 回レンダーする必要があるためハイドレーションが遅くなります。低速な接続におけるユーザ体験に注意してください。JavaScript コードは初期レンダーされた HTML よりもかなり遅く読み込まれる場合があるため、ハイドレーション直後に異なる UI をレンダーするとユーザに不快感を与えるかもしれません。 --- -### Updating a hydrated root component {/*updating-a-hydrated-root-component*/} +### ハイドレーションされたルートコンポーネントの更新 {/*updating-a-hydrated-root-component*/} -After the root has finished hydrating, you can call [`root.render`](#root-render) to update the root React component. **Unlike with [`createRoot`](/reference/react-dom/client/createRoot), you don't usually need to do this because the initial content was already rendered as HTML.** +ルートのハイドレーションが完了した後、[`root.render`](#root-render) を呼び出してルートの React コンポーネントを更新することができます。**[`createRoot`](/reference/react-dom/client/createRoot) の場合とは異なり、初期コンテンツはすでに HTML としてレンダーされているため、通常はこれを行う必要はありません**。 -If you call `root.render` at some point after hydration, and the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second in this example are not destructive: +ハイドレーションの後のどこかのタイミングで `root.render` を呼び出し、コンポーネントツリーの構造が以前にレンダーされたものと一致していれば、React は [state を保持します](/learn/preserving-and-resetting-state)。以下の例で入力フィールドにタイプできることに着目してください。つまり毎秒 `render` が繰り返し呼び出されていますが、更新により DOM が破壊されていないということです。 @@ -370,4 +370,4 @@ export default function App({counter}) { -It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually, you'll [update state](/reference/react/useState) inside one of the components instead. +ハイドレーションされたルートで [`root.render`](#root-render) を呼び出すことは滅多にありません。通常、代わりにコンポーネントの中で [state を更新](/reference/react/useState) します。 From 4318ec28d6b17413a8e85af15a385972256eeedb Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Wed, 13 Sep 2023 12:44:37 +0900 Subject: [PATCH 2/2] Update src/content/reference/react-dom/client/hydrateRoot.md Co-authored-by: Toru Kobayashi --- src/content/reference/react-dom/client/hydrateRoot.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 86f707a2c..8194d60dd 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -29,7 +29,7 @@ const domNode = document.getElementById('root'); const root = hydrateRoot(domNode, reactNode); ``` -React は、`domNode` 内に存在する HTML にアタッチし、その内部の DOM の管理を引き継ぎます。React で完全に構築されたアプリには、ルートコンポーネントを引数にした `hydrate` 呼び出しが通常 1 つのみ存在します。 +React は、`domNode` 内に存在する HTML にアタッチし、その内部の DOM の管理を引き継ぎます。React で完全に構築されたアプリには、ルートコンポーネントを引数にした `hydrateRoot` 呼び出しが通常 1 つのみ存在します。 [さらに例を見る](#usage)