From 84722d7ccf2e363d690be271912ac5e3a4653778 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 11 Oct 2026 03:07:29 +0900 Subject: [PATCH] Translate "browser" --- src/content/reference/react-dom/browser.md | 72 +++++++++++----------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/src/content/reference/react-dom/browser.md b/src/content/reference/react-dom/browser.md index 8b0090575..f6db99ac0 100644 --- a/src/content/reference/react-dom/browser.md +++ b/src/content/reference/react-dom/browser.md @@ -4,7 +4,7 @@ title: browser -`browser` lets you mark a component as browser-only during server rendering. +`browser` を使うことで、サーバレンダリング中にコンポーネントをブラウザ専用としてマークできます。 ```js use(browser(reason?)) @@ -16,11 +16,11 @@ use(browser(reason?)) --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `browser(reason?)` {/*browser*/} -Call `browser` inside [`use`](/reference/react/use) to mark a component as browser-only during server rendering: +[`use`](/reference/react/use) の中で `browser` を呼び出して、サーバレンダリング中にコンポーネントをブラウザ専用としてマークします。 ```js import { use } from 'react'; @@ -32,35 +32,35 @@ function BrowserOnly() { } ``` -During server rendering, `use(browser())` stops rendering the component and leaves the closest [``](/reference/react/Suspense) boundary's fallback in its place. In the browser, `use(browser())` returns `undefined`, so the component renders normally. +サーバレンダリング中の場合、`use(browser())` はコンポーネントのレンダーを中断し、代わりに最も近い [``](/reference/react/Suspense) バウンダリによるフォールバックが表示されるようにします。ブラウザでは、`use(browser())` は `undefined` を返し、コンポーネントは通常通りレンダーされます。 -[See more examples below.](#usage) +[さらに例を見る](#usage) -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -* **optional** `reason`: A string or function that explains why the content needs to render in the browser. The string or the function's return value becomes the `cause` of the `Error` passed to [`onBrowserBailout`](#reporting-browser-only-rendering-on-the-server). React calls a reason function each time a server renderer encounters the value returned by `browser`, but does not call it in the browser. If creating the reason is expensive, pass a function such as `() => new Error(...)`. +* **省略可能** `reason`: コンテンツをブラウザでレンダーする必要がある理由を説明する文字列または関数。この文字列、または関数の返り値が、[`onBrowserBailout`](#reporting-browser-only-rendering-on-the-server) に渡される `Error` の `cause` になります。サーバレンダラが `browser` の返り値を処理するたびに、React は理由を生成する関数を呼び出します。ブラウザでは呼び出されません。理由の生成にコストがかかる場合に `() => new Error(...)` のような関数を渡すようにしてください。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -`browser` returns an opaque value that you can pass to `use` in a component or use as the reason when [aborting a server render](#aborting-pending-server-rendering-for-the-browser). In the browser, passing this value to `use` returns `undefined`. +`browser` は、内部構造が非公開の値を返します。この値は、コンポーネント内で `use` に渡すことや、[サーバでのレンダーを中止する](#aborting-pending-server-rendering-for-the-browser)際の理由として使うことが可能です。ブラウザでは、この値を `use` に渡すと `undefined` が返されます。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -* `use(browser())` must be inside a `` boundary during server rendering. Without one, the server render fails. -* `use(browser())` must be called from a [Client Component](/reference/rsc/use-client), not a [Server Component](/reference/rsc/server-components). -* Calling `browser()` by itself has no effect. To mark a component as browser-only, pass the value returned by `browser` to `use`. Do not throw it. +* サーバレンダリング中は、`use(browser())` が `` バウンダリ内にある必要があります。バウンダリがない場合、サーバでのレンダーは失敗します。 +* `use(browser())` は、[クライアントコンポーネント](/reference/rsc/use-client)から呼び出す必要があります。[サーバコンポーネント](/reference/rsc/server-components)からは呼び出せません。 +* `browser()` を単独で呼び出しても何も起きません。コンポーネントをブラウザ専用としてマークするには、`browser` の返した値を `use` に渡してください。この値をスローしないでください。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Rendering content only in the browser {/*rendering-content-only-in-the-browser*/} +### ブラウザでのみコンテンツをレンダーする {/*rendering-content-only-in-the-browser*/} -Call `browser` inside `use` in a component that should only render in the browser: +ブラウザでのみレンダーされるべきコンポーネント内で、`use` の中で `browser` を呼び出します。 -You can use this instead of checking `typeof window`, waiting for an [`Effect`](/reference/react/useEffect) to set mounted state, or using a framework option to disable server rendering. +これは、`typeof window` を確認する、マウント済み state が[エフェクト](/reference/react/useEffect)で設定されるまで待機する、フレームワークのオプションでサーバレンダリングを無効にする、といったテクニックの代わりに使用できるものです。 -Click **Reload** to see the loading fallback in the initial HTML. After hydration, React displays the draft loaded from `localStorage`. +以下の例で **Reload** をクリックすると、初期 HTML 内のローディングフォールバックを確認できます。ハイドレーション後、React は `localStorage` から読み込んだ下書きを表示します。 @@ -206,7 +206,7 @@ iframe { -`use(browser())` must be called from a Client Component. If your framework uses Server Components by default, add the [`'use client'`](/reference/rsc/use-client) directive to that file or move the call to a child Client Component: +`use(browser())` は、クライアントコンポーネントから呼び出す必要があります。フレームワークがデフォルトでサーバコンポーネントを使う場合は、そのファイルに [`'use client'`](/reference/rsc/use-client) ディレクティブを追加するか、呼び出しを子のクライアントコンポーネントに移してください。 ```js {1} 'use client'; @@ -225,13 +225,13 @@ export default function SavedDraft() { --- -### Conditionally rendering on the server {/*conditionally-rendering-on-the-server*/} +### サーバでのレンダーを条件付きで行う {/*conditionally-rendering-on-the-server*/} -Like other calls to [`use`](/reference/react/use), `use(browser())` can be called inside a conditional statement or after an early return. This lets a Component or custom Hook opt out of server rendering based on a condition, such as the value of a prop. +他の [`use`](/reference/react/use) の呼び出しと同様に、`use(browser())` は条件文の中や早期リターンの後でも呼び出せます。これにより、props の値などの条件に基づいて、コンポーネントやカスタムフックをサーバレンダリングの対象から除外できます。 -For example, this `useTimeZone` Hook accepts an optional default value. When provided, React renders the default value in the initial HTML and in the browser. Without a default value, the Component suspends during server rendering and shows the device's local time zone in the browser. +例えば、以下の `useTimeZone` フックは、省略可能なデフォルト値を受け取ります。React はデフォルト値が渡されるとその値を初期 HTML とブラウザで表示します。デフォルト値がない場合、コンポーネントはサーバレンダリング中にサスペンドし、ブラウザではデバイスのローカルタイムゾーンを表示します。 -Click **Reload** to see the loading fallback before the user's time zone appears. +**Reload** をクリックすると、ユーザのタイムゾーンが表示される前のローディングフォールバックを確認できます。 @@ -371,7 +371,7 @@ iframe { -You can apply a similar pattern to conditionally avoid server rendering when using a Suspense-enabled data-fetching library: +サスペンス対応のデータ取得ライブラリを使う場合も、同様のパターンで条件に応じてサーバレンダリングを回避できます。 ```js {3} function useBrowserQuery(query, options) { @@ -391,13 +391,13 @@ function ProductDetails({ productId, initialData }) { } ``` -With `initialData`, React renders the Component to HTML on the server. Without it, React leaves the closest [``](/reference/react/Suspense) boundary's fallback in the HTML. In the browser, `useQuery` can fetch the data or read it from its client cache as usual. +`initialData` がある場合、React はサーバでコンポーネントを HTML にレンダーします。ない場合は、最も近い [``](/reference/react/Suspense) バウンダリのフォールバックを HTML に残します。ブラウザでは、`useQuery` が通常通りデータを取得したり、クライアント側のキャッシュから読み取ったりできます。 --- -### Reporting browser-only rendering on the server {/*reporting-browser-only-rendering-on-the-server*/} +### サーバでブラウザ専用レンダーの発生を通知させる {/*reporting-browser-only-rendering-on-the-server*/} -Pass an `onBrowserBailout` callback to the server renderer to report browser-only rendering. When React leaves a Suspense fallback for the browser, it does not call the server renderer's `onError` callback or [`hydrateRoot`'s `onRecoverableError`](/reference/react-dom/client/hydrateRoot#error-logging-in-production) callback. This example also passes a reason, which is available as the reported error's `cause`: +サーバレンダラに `onBrowserBailout` コールバックを渡すことで、ブラウザ専用レンダーが発生したことを通知させられます。React がサスペンスフォールバックを残してブラウザに引き継ぐ場合、サーバレンダラの `onError` コールバックや、[`hydrateRoot` の `onRecoverableError`](/reference/react-dom/client/hydrateRoot#error-logging-in-production) コールバックは呼び出されません。以下の例では理由も渡しており、報告されるエラーの `cause` として取得できます。 ```js import { Suspense, use, useState } from 'react'; @@ -428,20 +428,20 @@ const { pipe } = renderToPipeableStream(, { }); ``` -`onBrowserBailout` receives two arguments: +`onBrowserBailout` は 2 つの引数を受け取ります。 -1. An `Error` describing the browser-only render. If you passed a reason to `browser`, it is available as the error's `cause`. -2. An `errorInfo` object with a `componentStack` showing where browser-only rendering occurred. +1. ブラウザ専用レンダーが発生したことを説明する `Error`。`browser` に理由を渡してあった場合、このエラーの `cause` として取得できます。 +2. ブラウザ専用レンダーがどこで発生したかを示す `componentStack` を持つ `errorInfo` オブジェクト。 -The reason function can return any value. Return a new `Error` to give the cause its own stack without creating the `Error` in the browser. React does not serialize the reason into the HTML. +理由を生成する関数は、どのような値でも返せます。新しい `Error` を返す関数を使えば、原因を表すエラーに独自スタックを持たせつつ、ブラウザでは `Error` を作成しないようにできます。React は理由を HTML にシリアライズしません。 -If there is no Suspense boundary to provide a fallback, the server render fails. React reports the failure through the renderer's usual error callbacks instead of `onBrowserBailout`. +フォールバックを表示するサスペンスバウンダリがない場合、サーバでのレンダーは失敗します。React は `onBrowserBailout` ではなく、レンダラの通常のエラーコールバックを通じて失敗を報告します。 --- -### Aborting pending server rendering for the browser {/*aborting-pending-server-rendering-for-the-browser*/} +### 未完了のサーバレンダリングを中止してブラウザに引き継ぐ {/*aborting-pending-server-rendering-for-the-browser*/} -If you call a server rendering API directly, you can stop waiting for pending content and let the browser finish rendering it. Pass the value returned by `browser` as the reason when aborting the server render. React then leaves pending Suspense boundaries in their fallback state and renders their content in the browser: +サーバレンダリング API を直接呼び出している場合、まだ完了していないコンテンツの待機をやめて、ブラウザにレンダー完了を引き継がせることが可能です。サーバでのレンダーを中止する際に、`browser` の返した値を理由として渡してください。すると React は、まだ完了していないサスペンスバウンダリをフォールバックの状態のまま残し、そのコンテンツをブラウザでレンダーします。 ```js {1,8} import { browser } from 'react-dom'; @@ -457,6 +457,6 @@ const { pipe, abort } = renderToPipeableStream(, { }); ``` -A `browser` abort reason does not trigger the server renderer's `onError` callback or `hydrateRoot`'s `onRecoverableError` callback. Instead, the server renderer reports each recovered Suspense boundary to `onBrowserBailout`. +中止の理由として `browser` の返した値を使っても、サーバレンダラの `onError` コールバックや、`hydrateRoot` の `onRecoverableError` コールバックは呼び出されません。代わりに、サーバレンダラは復帰した各サスペンスバウンダリを `onBrowserBailout` に報告します。 -For server rendering APIs that accept an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal), pass `browser()` as the reason to [`AbortController.abort`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort). +[`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) を受け取るサーバレンダリング API では、[`AbortController.abort`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort) に中止の理由として `browser()` を渡してください。