Skip to content

Translate "browser" #1008

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
smikitky wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Translate "browser" #1008

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 36 additions & 36 deletions src/content/reference/react-dom/browser.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: browser

<Intro>

`browser` lets you mark a component as browser-only during server rendering.
`browser` を使うことで、サーバレンダリング中にコンポーネントをブラウザ専用としてマークできます。

```js
use(browser(reason?))
Expand All @@ -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';
Expand All @@ -32,35 +32,35 @@ function BrowserOnly() {
}
```

During server rendering, `use(browser())` stops rendering the component and leaves the closest [`<Suspense>`](/reference/react/Suspense) boundary's fallback in its place. In the browser, `use(browser())` returns `undefined`, so the component renders normally.
サーバレンダリング中の場合、`use(browser())` はコンポーネントのレンダーを中断し、代わりに最も近い [`<Suspense>`](/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 `<Suspense>` 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())` が `<Suspense>` バウンダリ内にある必要があります。バウンダリがない場合、サーバでのレンダーは失敗します。
* `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` から読み込んだ下書きを表示します。

<Sandpack>

Expand Down Expand Up @@ -206,7 +206,7 @@ iframe {

<Note>

`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';
Expand All @@ -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** をクリックすると、ユーザのタイムゾーンが表示される前のローディングフォールバックを確認できます。

<Sandpack>

Expand Down Expand Up @@ -371,7 +371,7 @@ iframe {

</Sandpack>

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) {
Expand All @@ -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 [`<Suspense>`](/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 にレンダーします。ない場合は、最も近い [`<Suspense>`](/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';
Expand Down Expand Up @@ -428,20 +428,20 @@ const { pipe } = renderToPipeableStream(<App />, {
});
```

`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';
Expand All @@ -457,6 +457,6 @@ const { pipe, abort } = renderToPipeableStream(<App />, {
});
```

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()` を渡してください。
Loading