diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 4dded629a..767ca2759 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -24,7 +24,7 @@ React だけで新しいアプリやウェブサイトを作りたい場合は npx create-next-app@latest -Next.js を初めて使う場合は、[Next.js チュートリアル](https://nextjs.org/learn/foundations/about-nextjs)を参照してください。 +Next.js を初めて使う場合は、[Next.js の学習コース](https://nextjs.org/learn)を参照してください。 Next.js は [Vercel](https://vercel.com/) によってメンテナンスされています。Next.js アプリは Node.js やサーバレスホスティングサービス、または自分自身のサーバーに[デプロイする](https://nextjs.org/docs/app/building-your-application/deploying)ことができます。Next.js はサーバを必要としない[静的なエクスポート](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports)もサポートしています。 diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 88fabf5a2..e8fc207ff 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -38,7 +38,7 @@ function Submit() { return } -export default App() { +export default function App() { return (
diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index 56cdd42f6..bfa668cbf 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -43,6 +43,9 @@ stream.pipe(response); * `reactNode`: HTML にレンダーしたい React ノード。例えば、`` のような JSX 要素。 +* **省略可能** `options`: サーバレンダー用のオプションが含まれたオブジェクト。 + * **省略可能** `identifierPrefix`: React が [`useId`](/reference/react/useId) によって生成する ID に使用する文字列プレフィックス。同じページ上に複数のルートを使用する際に、競合を避けるために用います。[`hydrateRoot`](/reference/react-dom/client/hydrateRoot#parameters) にも同じプレフィックスを渡す必要があります。 + #### 返り値 {/*returns*/} HTML 文字列を出力する [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)。 diff --git a/src/content/reference/react-dom/server/renderToStaticMarkup.md b/src/content/reference/react-dom/server/renderToStaticMarkup.md index efb831b15..46b1464c0 100644 --- a/src/content/reference/react-dom/server/renderToStaticMarkup.md +++ b/src/content/reference/react-dom/server/renderToStaticMarkup.md @@ -35,6 +35,8 @@ const html = renderToStaticMarkup(); #### 引数 {/*parameters*/} * `reactNode`: HTML にレンダーしたい React ノード。例えば、`` のような JSX ノード。 +* **省略可能** `options`: サーバレンダー用のオプションが含まれたオブジェクト。 + * **省略可能** `identifierPrefix`: React が [`useId`](/reference/react/useId) によって生成する ID に使用する文字列プレフィックス。同じページ上に複数のルートを使用する際に、競合を避けるために用います。 #### 返り値 {/*returns*/} diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md index 73924eb1d..e60f73a3f 100644 --- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md +++ b/src/content/reference/react-dom/server/renderToStaticNodeStream.md @@ -37,6 +37,9 @@ stream.pipe(response); * `reactNode`: HTML にレンダーしたい React ノード。例えば、`` のような JSX 要素。 +* **省略可能** `options`: サーバレンダー用のオプションが含まれたオブジェクト。 + * **省略可能** `identifierPrefix`: React が [`useId`](/reference/react/useId) によって生成する ID に使用する文字列プレフィックス。同じページ上に複数のルートを使用する際に、競合を避けるために用います。 + #### 返り値 {/*returns*/} HTML 文字列を出力する [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)。結果として得られる HTML はクライアント上でハイドレーションすることはできません。 diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 4694f304e..7288b46c9 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -42,6 +42,9 @@ const html = renderToString(); * `reactNode`: HTML にレンダーしたい React ノード。例えば、`` のような JSX ノード。 +* **省略可能** `options`: サーバレンダー用のオプションが含まれたオブジェクト。 + * **省略可能** `identifierPrefix`: React が [`useId`](/reference/react/useId) によって生成する ID に使用する文字列プレフィックス。同じページ上に複数のルートを使用する際に、競合を避けるために用います。[`hydrateRoot`](/reference/react-dom/client/hydrateRoot#parameters) にも同じプレフィックスを渡す必要があります。 + #### 返り値 {/*returns*/} HTML 文字列。 diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md index 22f890334..005f77f1d 100644 --- a/src/content/reference/react/use-server.md +++ b/src/content/reference/react/use-server.md @@ -115,11 +115,13 @@ async function requestUsername(formData) { // ... } -export default App() { - - - - +export default function App() { + return ( +
+ + +
+ ); } ``` diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index b04f99dda..a3df37cb5 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -302,3 +302,33 @@ input { margin: 5px; } ``` + +--- + +### クライアントとサーバで同じ ID プレフィックスを使う {/*using-the-same-id-prefix-on-the-client-and-the-server*/} + +もし[同じページ上で複数の独立した React アプリをレンダー](#specifying-a-shared-prefix-for-all-generated-ids)しており、そのうちいくつかがサーバでレンダーされる場合は、クライアント側の [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 呼び出しに渡す `identifierPrefix` が、[`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) などの[サーバ API](/reference/react-dom/server) に渡す `identifierPrefix` と同じになるようにしてください。 + +```js +// Server +import { renderToPipeableStream } from 'react-dom/server'; + +const { pipe } = renderToPipeableStream( + , + { identifierPrefix: 'react-app1' } +); +``` + +```js +// Client +import { hydrateRoot } from 'react-dom/client'; + +const domNode = document.getElementById('root'); +const root = hydrateRoot( + domNode, + reactNode, + { identifierPrefix: 'react-app1' } +); +``` + +ページ内に React アプリが 1 つしかない場合は `identifierPrefix` を渡す必要はありません。 diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index d4edcc081..9fde3549c 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -57,7 +57,7 @@ function TodosApp() { * 再レンダー中に異なる `subscribe` 関数が渡された場合、React は新しく渡された `subscribe` 関数を使ってストアに再サブスクライブします。これを防ぐには、`subscribe` をコンポーネントの外で宣言します。 -* [ノンブロッキング型のトランジション更新](/reference/react/useTransition)の最中にストアの書き換えが発生した場合、React はその更新をブロッキング型で行うようにフォールバックします。具体的には、React は DOM に更新を適用する前に `getSnapshot` を再度呼び出します。そこで最初の値とは異なる値が返された場合、React はトランジションの更新を最初からやり直しますが、再試行時にはブロッキング型の更新を行うことで、画面上の全コンポーネントがストアからの同一バージョンの値を反映していることを保証します。 +* [ノンブロッキング型のトランジション更新](/reference/react/useTransition)の最中にストアの書き換えが発生した場合、React はその更新をブロッキング型で行うようにフォールバックします。具体的には、トランザクションによる更新のたびに、React は DOM に更新を適用する前に `getSnapshot` を再度呼び出します。そこで最初の値とは異なる値が返された場合、React は更新を最初からやり直しますが、再試行時にはブロッキング型の更新を行うことで、画面上の全コンポーネントがストアからの同一バージョンの値を反映していることを保証します。 * `useSyncExternalStore` から返される値に基づいてレンダーを*サスペンド*させることは推奨されていません。外部ストアで起きた変更は[ノンブロッキング型のトランジション更新](/reference/react/useTransition)としてマークすることができないため、直近の [`Suspense` フォールバック](/reference/react/Suspense)が起動してしまいます。既に画面上に表示されているコンテンツがローディングスピナで隠れてしまうため、通常は望ましくないユーザ体験につながります。