Merge pull request #720 from reactjs/sync-af54fc87

Sync with react.dev @ af54fc8

src/content/learn/start-a-new-react-project.md

@@ -24,7 +24,7 @@ React だけで新しいアプリやウェブサイトを作りたい場合は
 npx create-next-app@latest
 </TerminalBlock>
 
-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)もサポートしています。
 

src/content/reference/react-dom/hooks/useFormStatus.md

@@ -38,7 +38,7 @@ function Submit() {
   return <button disabled={status.pending}>Submit</button>
 }
 
-export default App() {
+export default function App() {
   return (
     <form action={action}>
       <Submit />

src/content/reference/react-dom/server/renderToNodeStream.md

@@ -43,6 +43,9 @@ stream.pipe(response);
 
 * `reactNode`: HTML にレンダーしたい React ノード。例えば、`<App />` のような 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)。

src/content/reference/react-dom/server/renderToStaticMarkup.md

@@ -35,6 +35,8 @@ const html = renderToStaticMarkup(<Page />);
 #### 引数 {/*parameters*/}
 
 * `reactNode`: HTML にレンダーしたい React ノード。例えば、`<Page />` のような JSX ノード。
+* **省略可能** `options`: サーバレンダー用のオプションが含まれたオブジェクト。
+  * **省略可能** `identifierPrefix`: React が [`useId`](/reference/react/useId) によって生成する ID に使用する文字列プレフィックス。同じページ上に複数のルートを使用する際に、競合を避けるために用います。
 
 #### 返り値 {/*returns*/}
 

src/content/reference/react-dom/server/renderToStaticNodeStream.md

@@ -37,6 +37,9 @@ stream.pipe(response);
 
 * `reactNode`: HTML にレンダーしたい React ノード。例えば、`<Page />` のような JSX 要素。
 
+* **省略可能** `options`: サーバレンダー用のオプションが含まれたオブジェクト。
+  * **省略可能** `identifierPrefix`: React が [`useId`](/reference/react/useId) によって生成する ID に使用する文字列プレフィックス。同じページ上に複数のルートを使用する際に、競合を避けるために用います。
+
 #### 返り値 {/*returns*/}
 
 HTML 文字列を出力する [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)。結果として得られる HTML はクライアント上でハイドレーションすることはできません。

src/content/reference/react-dom/server/renderToString.md

@@ -42,6 +42,9 @@ const html = renderToString(<App />);
 
 * `reactNode`: HTML にレンダーしたい React ノード。例えば、`<App />` のような JSX ノード。
 
+* **省略可能** `options`: サーバレンダー用のオプションが含まれたオブジェクト。
+  * **省略可能** `identifierPrefix`: React が [`useId`](/reference/react/useId) によって生成する ID に使用する文字列プレフィックス。同じページ上に複数のルートを使用する際に、競合を避けるために用います。[`hydrateRoot`](/reference/react-dom/client/hydrateRoot#parameters) にも同じプレフィックスを渡す必要があります。
+
 #### 返り値 {/*returns*/}
 
 HTML 文字列。

src/content/reference/react/use-server.md

@@ -115,11 +115,13 @@ async function requestUsername(formData) {
   // ...
 }
 
-export default App() {
-  <form action={requestUsername}>
-    <input type="text" name="username" />
-    <button type="submit">Request</button>
-  </form>
+export default function App() {
+  return (
+    <form action={requestUsername}>
+      <input type="text" name="username" />
+      <button type="submit">Request</button>
+    </form>
+  );
 }
 ```
 

src/content/reference/react/useId.md

@@ -302,3 +302,33 @@ input { margin: 5px; }
 ```
 
 </Sandpack>
+
+---
+
+### クライアントとサーバで同じ 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(
+  <App />,
+  { 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` を渡す必要はありません。

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)が起動してしまいます。既に画面上に表示されているコンテンツがローディングスピナで隠れてしまうため、通常は望ましくないユーザ体験につながります。