From d048c49a7defb0e2f3ae11e180933b3c85ea34ee Mon Sep 17 00:00:00 2001 From: GarlicGo <582149912@qq.com> Date: Sat, 27 May 2023 11:20:52 +0800 Subject: [PATCH 01/11] docs(cn): translate reference/react-dom/server/renderToString into Chinese --- .../react-dom/server/renderToString.md | 72 +++++++++---------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 41bc6a9828..799c3f30c7 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -4,13 +4,13 @@ title: renderToString -`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives) +`renderToString` 不支持流式传输或等待数据。[请参考替代方案](#alternatives)。 -`renderToString` renders a React tree to an HTML string. +`renderToString` 将 React 树渲染为一个 HTML 字符串。 ```js const html = renderToString(reactNode) @@ -26,7 +26,7 @@ const html = renderToString(reactNode) ### `renderToString(reactNode)` {/*rendertostring*/} -On the server, call `renderToString` to render your app to HTML. +在服务器端，调用 `renderToString` 将你的应用渲染为 HTML。 ```js import { renderToString } from 'react-dom/server'; @@ -34,81 +34,81 @@ import { renderToString } from 'react-dom/server'; const html = renderToString(); ``` -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. +在客户端，调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 来使服务器生成的 HTML 具有交互性。 -[See more examples below.](#usage) +[请参考下面的更多示例](#usage)。 #### Parameters {/*parameters*/} -* `reactNode`: A React node you want to render to HTML. For example, a JSX node like ``. +* `reactNode`: 你要渲染为 HTML 的 React 节点。例如，一个 JSX 节点，就像 ``。 -#### Returns {/*returns*/} +#### 返回值 {/*returns*/} -An HTML string. +一个 HTML 字符串。 -#### Caveats {/*caveats*/} +#### 注意事项 {/*caveats*/} -* `renderToString` has limited Suspense support. If a component suspends, `renderToString` immediately sends its fallback as HTML. +* `renderToString` 对 Suspense 的支持有限。如果一个组件挂起，`renderToString` 会立即将其回退为 HTML 发送。 -* `renderToString` works in the browser, but using it in the client code is [not recommended.](#removing-rendertostring-from-the-client-code) +* `renderToString` 可以在浏览器中工作，但 [不推荐的](#removing-rendertostring-from-the-client-code) 在客户端代码中使用它。 --- -## Usage {/*usage*/} +## 用法 {/*usage*/} -### Rendering a React tree as HTML to a string {/*rendering-a-react-tree-as-html-to-a-string*/} +### 将 React 树渲染为 HTML 字符串 {/*rendering-a-react-tree-as-html-to-a-string*/} -Call `renderToString` to render your app to an HTML string which you can send with your server response: +调用 `renderToString` 将你的应用渲染为 HTML 字符串，你可以将其与服务器响应一起发送： ```js {5-6} import { renderToString } from 'react-dom/server'; -// The route handler syntax depends on your backend framework +// 路由处理程序的语法取决于你使用的后端框架 app.use('/', (request, response) => { const html = renderToString(); response.send(html); }); ``` -This will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive. +这将生成你的 React 组件的初始非交互式 HTML 输出。在客户端上，你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 来将服务器生成的 HTML 进行 **调和** 处理，使其具有交互功能。 -`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives) +`renderToString` 不支持流式传输或等待数据。[请参考替代方案](#alternatives)。 --- -## Alternatives {/*alternatives*/} +## 替代方案 {/*alternatives*/} -### Migrating from `renderToString` to a streaming method on the server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/} +### 从 `renderToString` 迁移到服务器上的流式传输方法 {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/} -`renderToString` returns a string immediately, so it does not support streaming or waiting for data. +`renderToString` 立即返回一个字符串，因此不支持流式传输或等待数据。 -When possible, we recommend using these fully-featured alternatives: +如果可能的话，我们建议使用这些功能完整的替代方法： -* If you use Node.js, use [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) -* If you use Deno or a modern edge runtime with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), use [`renderToReadableStream`.](/reference/react-dom/server/renderToReadableStream) +* 如果你使用 Node.js，请使用 [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream)。 +* 如果你使用 Deno 或支持 [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) 的现代运行时，请使用 [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream)。 -You can continue using `renderToString` if your server environment does not support streams. +如果你的服务器环境不支持流式传输，你仍然可以继续使用 `renderToString`。 --- -### Removing `renderToString` from the client code {/*removing-rendertostring-from-the-client-code*/} +### 从客户端代码中移除 `renderToString` {/*removing-rendertostring-from-the-client-code*/} -Sometimes, `renderToString` is used on the client to convert some component to HTML. +有时，`renderToString` 用于在客户端将某个组件转换为 HTML。 ```js {1-2} -// 🚩 Unnecessary: using renderToString on the client +// 🚩 不必要：在客户端使用 renderToString import { renderToString } from 'react-dom/server'; const html = renderToString(); -console.log(html); // For example, "..." +console.log(html); // 例如，"..." ``` -Importing `react-dom/server` **on the client** unnecessarily increases your bundle size and should be avoided. If you need to render some component to HTML in the browser, use [`createRoot`](/reference/react-dom/client/createRoot) and read HTML from the DOM: +在客户端导入 `react-dom/server` 会不必要地增加你的捆绑文件大小，应避免这样做。如果你需要在浏览器中将某个组件渲染为 HTML，请使用 [`createRoot`](/reference/react-dom/client/createRoot) 并从 DOM 中读取 HTML。 ```js import { createRoot } from 'react-dom/client'; @@ -119,20 +119,20 @@ const root = createRoot(div); flushSync(() => { root.render(); }); -console.log(div.innerHTML); // For example, "..." +console.log(div.innerHTML); // 例如，"..." ``` -The [`flushSync`](/reference/react-dom/flushSync) call is necessary so that the DOM is updated before reading its [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property. +[`flushSync`](/reference/react-dom/flushSync) 调用是必要的，以便在读取 [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) 属性之前更新 DOM。 --- -## Troubleshooting {/*troubleshooting*/} +## 故障排除 {/*troubleshooting*/} -### When a component suspends, the HTML always contains a fallback {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} +### 当组件暂停时，HTML 中始终包含一个回退内容 {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} -`renderToString` does not fully support Suspense. +`renderToString` 不完全支持 Suspense。 -If some component suspends (for example, because it's defined with [`lazy`](/reference/react/lazy) or fetches data), `renderToString` will not wait for its content to resolve. Instead, `renderToString` will find the closest [``](/reference/react/Suspense) boundary above it and render its `fallback` prop in the HTML. The content will not appear until the client code loads. +如果某个组件暂停（例如，因为它使用 [`lazy`](/reference/react/lazy) 定义或获取数据），`renderToString` 不会等待其内容解析完成。相反，`renderToString` 将找到最近的 [``](/reference/react/Suspense) 边界，并在 HTML 中渲染其 `fallback` 属性。直到客户端代码加载后，内容才会显示出来。 -To solve this, use one of the [recommended streaming solutions.](#migrating-from-rendertostring-to-a-streaming-method-on-the-server) They can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads. +要解决这个问题，请使用其中一个 [推荐的流式解决方案](#migrating-from-rendertostring-to-a-streaming-method-on-the-server)。它们可以在服务器上逐步以块的形式流式传输内容，使用户在客户端代码加载之前逐步看到页面填充。 From 67ad732bb7104db7705bc5a7a46669075d2b7518 Mon Sep 17 00:00:00 2001 From: GarlicGo <50868054+GarlicGo@users.noreply.github.com> Date: Mon, 19 Jun 2023 14:50:52 +0800 Subject: [PATCH 02/11] Apply suggestions from code review Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com> --- src/content/reference/react-dom/server/renderToString.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 799c3f30c7..8b62d4db67 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -50,7 +50,7 @@ const html = renderToString(); * `renderToString` 对 Suspense 的支持有限。如果一个组件挂起，`renderToString` 会立即将其回退为 HTML 发送。 -* `renderToString` 可以在浏览器中工作，但 [不推荐的](#removing-rendertostring-from-the-client-code) 在客户端代码中使用它。 +* `renderToString` 可以在浏览器中工作，但 [不推荐](#removing-rendertostring-from-the-client-code) 在客户端代码中使用它。 --- From 64e31ff10ca548c5c6292731c5384dbf7c086f1e Mon Sep 17 00:00:00 2001 From: GarlicGo <50868054+GarlicGo@users.noreply.github.com> Date: Mon, 19 Jun 2023 14:51:06 +0800 Subject: [PATCH 03/11] Apply suggestions from code review Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com> --- src/content/reference/react-dom/server/renderToString.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 8b62d4db67..bee7b6143f 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -70,7 +70,7 @@ app.use('/', (request, response) => { }); ``` -这将生成你的 React 组件的初始非交互式 HTML 输出。在客户端上，你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 来将服务器生成的 HTML 进行 **调和** 处理，使其具有交互功能。 +这将生成你的 React 组件的初始非交互式 HTML 输出。在客户端上，你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 来将服务器生成的 HTML 进行 **调和（hydrate）** 处理，使其具有交互功能。 From dc08af49eaa4e96857703d84dd81fc8b094de1c5 Mon Sep 17 00:00:00 2001 From: GarlicGo <582149912@qq.com> Date: Mon, 19 Jun 2023 15:01:31 +0800 Subject: [PATCH 04/11] docs: update --- src/content/reference/react-dom/server/renderToString.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index bee7b6143f..e63ec60453 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -40,7 +40,7 @@ const html = renderToString(); #### Parameters {/*parameters*/} -* `reactNode`: 你要渲染为 HTML 的 React 节点。例如，一个 JSX 节点，就像 ``。 +* `reactNode`：你要渲染为 HTML 的 React 节点。例如，一个 JSX 节点，就像 ``。 #### 返回值 {/*returns*/} From 5caddd89030e63b669d780e8945589bdf6f183fd Mon Sep 17 00:00:00 2001 From: GarlicGo <582149912@qq.com> Date: Mon, 26 Jun 2023 13:06:37 +0800 Subject: [PATCH 05/11] docs: update --- src/content/reference/react-dom/server/renderToString.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index e63ec60453..fdbbb8a597 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -48,7 +48,7 @@ const html = renderToString(); #### 注意事项 {/*caveats*/} -* `renderToString` 对 Suspense 的支持有限。如果一个组件挂起，`renderToString` 会立即将其回退为 HTML 发送。 +* `renderToString` 对 Suspense 的支持有限。如果一个组件挂起（suspend），`renderToString` 会立即将其回退为 HTML 发送。 * `renderToString` 可以在浏览器中工作，但 [不推荐](#removing-rendertostring-from-the-client-code) 在客户端代码中使用它。 From a7400061bd74d1b2b8f7f22e08b73463fd47de46 Mon Sep 17 00:00:00 2001 From: GarlicGo <50868054+GarlicGo@users.noreply.github.com> Date: Mon, 26 Jun 2023 13:07:21 +0800 Subject: [PATCH 06/11] Apply suggestions from code review Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com> --- src/content/reference/react-dom/server/renderToString.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index fdbbb8a597..08b700f08d 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -70,7 +70,7 @@ app.use('/', (request, response) => { }); ``` -这将生成你的 React 组件的初始非交互式 HTML 输出。在客户端上，你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 来将服务器生成的 HTML 进行 **调和（hydrate）** 处理，使其具有交互功能。 +这将生成你的 React 组件的初始非交互式 HTML 输出。在客户端上，你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 来将服务器生成的 HTML 进行 hydrate 处理，使其具有交互功能。 From da2c6a42095c0487eab17e6f7d50d9e18fd6a875 Mon Sep 17 00:00:00 2001 From: GarlicGo <50868054+GarlicGo@users.noreply.github.com> Date: Tue, 27 Jun 2023 18:07:31 +0800 Subject: [PATCH 07/11] Apply suggestions from code review Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com> --- src/content/reference/react-dom/server/renderToString.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 08b700f08d..51901a5889 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -26,7 +26,7 @@ const html = renderToString(reactNode) ### `renderToString(reactNode)` {/*rendertostring*/} -在服务器端，调用 `renderToString` 将你的应用渲染为 HTML。 +在服务器，调用 `renderToString` 将你的应用渲染为 HTML。 ```js import { renderToString } from 'react-dom/server'; From f446ac5b4be00684af508a221d8a869182fd6c9d Mon Sep 17 00:00:00 2001 From: GarlicGo <50868054+GarlicGo@users.noreply.github.com> Date: Tue, 27 Jun 2023 18:07:45 +0800 Subject: [PATCH 08/11] Apply suggestions from code review Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com> --- src/content/reference/react-dom/server/renderToString.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 51901a5889..8735bbb13a 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -108,7 +108,7 @@ const html = renderToString(); console.log(html); // 例如，"..." ``` -在客户端导入 `react-dom/server` 会不必要地增加你的捆绑文件大小，应避免这样做。如果你需要在浏览器中将某个组件渲染为 HTML，请使用 [`createRoot`](/reference/react-dom/client/createRoot) 并从 DOM 中读取 HTML。 +在客户端导入 `react-dom/server` 会不必要地增加 bundle 大小，所以应该避免这样做。如果你需要在浏览器中将某个组件渲染为 HTML，请使用 [`createRoot`](/reference/react-dom/client/createRoot) 并从 DOM 中读取 HTML。 ```js import { createRoot } from 'react-dom/client'; From 8c3f2b3b34476cc2830c2281b9276244a2c250a6 Mon Sep 17 00:00:00 2001 From: GarlicGo <582149912@qq.com> Date: Tue, 27 Jun 2023 18:16:24 +0800 Subject: [PATCH 09/11] docs: update --- src/content/reference/react-dom/server/renderToString.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 8735bbb13a..542d265c9b 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -48,7 +48,7 @@ const html = renderToString(); #### 注意事项 {/*caveats*/} -* `renderToString` 对 Suspense 的支持有限。如果一个组件挂起（suspend），`renderToString` 会立即将其回退为 HTML 发送。 +* `renderToString` 对 Suspense 的支持有限。如果一个组件挂起（suspend），`renderToString` 会立即将其 fallback 作为 HTML 发送。 * `renderToString` 可以在浏览器中工作，但 [不推荐](#removing-rendertostring-from-the-client-code) 在客户端代码中使用它。 @@ -128,7 +128,7 @@ console.log(div.innerHTML); // 例如，"..." ## 故障排除 {/*troubleshooting*/} -### 当组件暂停时，HTML 中始终包含一个回退内容 {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} +### 当组件暂停时，HTML 中始终包含一个 fallback {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} `renderToString` 不完全支持 Suspense。 From 59760a701ea9bd770de509f8287853cff43ab20f Mon Sep 17 00:00:00 2001 From: GarlicGo <582149912@qq.com> Date: Tue, 27 Jun 2023 18:17:43 +0800 Subject: [PATCH 10/11] docs: update --- src/content/reference/react-dom/server/renderToString.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 542d265c9b..e521eb254f 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -132,7 +132,7 @@ console.log(div.innerHTML); // 例如，"..." `renderToString` 不完全支持 Suspense。 -如果某个组件暂停（例如，因为它使用 [`lazy`](/reference/react/lazy) 定义或获取数据），`renderToString` 不会等待其内容解析完成。相反，`renderToString` 将找到最近的 [``](/reference/react/Suspense) 边界，并在 HTML 中渲染其 `fallback` 属性。直到客户端代码加载后，内容才会显示出来。 +如果某个组件 suspend （例如，因为它使用 [`lazy`](/reference/react/lazy) 定义或获取数据），`renderToString` 不会等待其内容解析完成。相反，`renderToString` 将找到最近的 [``](/reference/react/Suspense) 边界，并在 HTML 中渲染其 `fallback` 属性。直到客户端代码加载后，内容才会显示出来。 要解决这个问题，请使用其中一个 [推荐的流式解决方案](#migrating-from-rendertostring-to-a-streaming-method-on-the-server)。它们可以在服务器上逐步以块的形式流式传输内容，使用户在客户端代码加载之前逐步看到页面填充。 From 90c0e580b0fb61d3249ab84260e0a3aec31105ad Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:01:46 +0800 Subject: [PATCH 11/11] Update src/content/reference/react-dom/server/renderToString.md --- src/content/reference/react-dom/server/renderToString.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index e521eb254f..f98d6f5325 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -132,7 +132,7 @@ console.log(div.innerHTML); // 例如，"..." `renderToString` 不完全支持 Suspense。 -如果某个组件 suspend （例如，因为它使用 [`lazy`](/reference/react/lazy) 定义或获取数据），`renderToString` 不会等待其内容解析完成。相反，`renderToString` 将找到最近的 [``](/reference/react/Suspense) 边界，并在 HTML 中渲染其 `fallback` 属性。直到客户端代码加载后，内容才会显示出来。 +如果某个组件 suspend（例如，因为它使用 [`lazy`](/reference/react/lazy) 定义或获取数据），`renderToString` 不会等待其内容解析完成。相反，`renderToString` 将找到最近的 [``](/reference/react/Suspense) 边界，并在 HTML 中渲染其 `fallback` 属性。直到客户端代码加载后，内容才会显示出来。 要解决这个问题，请使用其中一个 [推荐的流式解决方案](#migrating-from-rendertostring-to-a-streaming-method-on-the-server)。它们可以在服务器上逐步以块的形式流式传输内容，使用户在客户端代码加载之前逐步看到页面填充。