Skip to content

Commit 0dca54c

Browse files
authored
docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ 2571aee (#1719)
2 parents 278f926 + 12ecf5e commit 0dca54c

File tree

3 files changed

+90
-2
lines changed

3 files changed

+90
-2
lines changed

src/content/learn/separating-events-from-effects.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -973,6 +973,23 @@ Effect Event 是 Effect 代码的非响应式“片段”。他们应该在使
973973
974974
<Sandpack>
975975
976+
```json package.json hidden
977+
{
978+
"dependencies": {
979+
"react": "experimental",
980+
"react-dom": "experimental",
981+
"react-scripts": "latest"
982+
},
983+
"scripts": {
984+
"start": "react-scripts start",
985+
"build": "react-scripts build",
986+
"test": "react-scripts test --env=jsdom",
987+
"eject": "react-scripts eject"
988+
}
989+
}
990+
```
991+
992+
976993
```js
977994
import { useState, useEffect } from 'react';
978995

@@ -1026,6 +1043,22 @@ button { margin: 10px; }
10261043
10271044
<Sandpack>
10281045
1046+
```json package.json hidden
1047+
{
1048+
"dependencies": {
1049+
"react": "experimental",
1050+
"react-dom": "experimental",
1051+
"react-scripts": "latest"
1052+
},
1053+
"scripts": {
1054+
"start": "react-scripts start",
1055+
"build": "react-scripts build",
1056+
"test": "react-scripts test --env=jsdom",
1057+
"eject": "react-scripts eject"
1058+
}
1059+
}
1060+
```
1061+
10291062
```js
10301063
import { useState, useEffect } from 'react';
10311064

src/content/reference/react-dom/static/prerender.md

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ async function handler(request) {
5757
* **可选** `namespaceURI`:流的根 [命名空间 URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) 的字符串。默认为常规 HTML。对于 SVG,请传递 `'http://www.w3.org/2000/svg'`;对于 MathML,请传递 `'http://www.w3.org/1998/Math/MathML'`
5858
* **可选** `onError`:每当发生服务器错误时触发的回调,无论是 [可恢复的](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) 还是 [不可恢复的](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)。默认情况下,它只调用 `console.error`。如果你重写它用来 [记录崩溃报告](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) ,请确保仍然调用 `console.error`。你还可以使用它在 shell 被生成之前 [调整状态码](/reference/react-dom/server/renderToReadableStream#setting-the-status-code)。
5959
* **可选** `progressiveChunkSize`:每个块的字节数。[阅读更多关于默认启发式的信息。](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
60-
* **可选** `signal`:一个 [中止信号](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal),允许你 [中止服务器渲染](/reference/react-dom/server/renderToReadableStream#aborting-server-rendering) 并在客户端渲染剩余内容。
60+
* **可选** `signal`:一个 [中止信号](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal),允许你 [中止预渲染](#aborting-prerendering) 并在客户端渲染剩余内容。
6161
6262
#### 返回值 {/*returns*/}
6363
@@ -66,7 +66,9 @@ async function handler(request) {
6666
- `prelude`:一个 [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) 的 HTML。你可以使用此流以块的形式发送响应,或者将整个流读取为字符串。
6767
- 如果渲染失败,Promise 将被拒绝。[使用此方法输出一个回退 shell。](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)
6868
69+
#### Caveats {/*caveats*/}
6970
71+
`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself.
7072
7173
7274
<Note>
@@ -287,6 +289,31 @@ Suspense **无法** 检测在 Effect 或事件处理程序中获取的数据。
287289
288290
---
289291
292+
### 中止预渲染 {/*aborting-prerendering*/}
293+
294+
可以通过设置超时,来强制“终止”预渲染进程:
295+
296+
297+
```js {2-5,11}
298+
async function renderToString() {
299+
const controller = new AbortController();
300+
setTimeout(() => {
301+
controller.abort()
302+
}, 10000);
303+
304+
try {
305+
// the prelude will contain all the HTML that was prerendered
306+
// before the controller aborted.
307+
const {prelude} = await prerender(<App />, {
308+
signal: controller.signal,
309+
});
310+
//...
311+
```
312+
313+
所有包含未完成子组件的 Suspense 边界都将以 fallback 状态包含在 prelude 中。
314+
315+
---
316+
290317
## 疑难解答 {/*troubleshooting*/}
291318
292319
### 我的流要等到整个应用渲染完成后才会启动。 {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/}

src/content/reference/react-dom/static/prerenderToNodeStream.md

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
5858
* **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
5959
* **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToPipeableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToPipeableStream#setting-the-status-code) before the shell is emitted.
6060
* **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
61-
* **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](/reference/react-dom/server/renderToPipeableStream#aborting-server-rendering) and render the rest on the client.
61+
* **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client.
6262
6363
#### Returns {/*returns*/}
6464
@@ -67,6 +67,10 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
6767
- `prelude`: a [Node.js Stream.](https://nodejs.org/api/stream.html) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
6868
- If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell)
6969
70+
#### Caveats {/*caveats*/}
71+
72+
`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself.
73+
7074
<Note>
7175
7276
### When should I use `prerenderToNodeStream`? {/*when-to-use-prerender*/}
@@ -285,6 +289,30 @@ Suspense-enabled data fetching without the use of an opinionated framework is no
285289
286290
---
287291
292+
### Aborting prerendering {/*aborting-prerendering*/}
293+
294+
You can force the prerender to "give up" after a timeout:
295+
296+
```js {2-5,11}
297+
async function renderToString() {
298+
const controller = new AbortController();
299+
setTimeout(() => {
300+
controller.abort()
301+
}, 10000);
302+
303+
try {
304+
// the prelude will contain all the HTML that was prerendered
305+
// before the controller aborted.
306+
const {prelude} = await prerenderToNodeStream(<App />, {
307+
signal: controller.signal,
308+
});
309+
//...
310+
```
311+
312+
Any Suspense boundaries with incomplete children will be included in the prelude in the fallback state.
313+
314+
---
315+
288316
## Troubleshooting {/*troubleshooting*/}
289317
290318
### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/}

0 commit comments

Comments
 (0)