You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
### Rendering a React tree as HTML to a string {/*rendering-a-react-tree-as-html-to-a-string*/}
59
+
### 将 React 树渲染为 HTML 字符串 {/*rendering-a-react-tree-as-html-to-a-string*/}
60
60
61
-
Call`renderToString`to render your app to an HTML string which you can send with your server response:
61
+
调用`renderToString`将你的应用渲染为 HTML 字符串，你可以将其与服务器响应一起发送：
62
62
63
63
```js {5-6}
64
64
import { renderToString } from'react-dom/server';
65
65
66
-
//The route handler syntax depends on your backend framework
66
+
//路由处理程序的语法取决于你使用的后端框架
67
67
app.use('/', (request, response) => {
68
68
consthtml=renderToString(<App />);
69
69
response.send(html);
70
70
});
71
71
```
72
72
73
-
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.
73
+
这将生成你的 React 组件的初始非交互式 HTML 输出。在客户端上，你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)来将服务器生成的 HTML 进行 hydrate 处理，使其具有交互功能。
74
74
75
75
76
76
<Pitfall>
77
77
78
-
`renderToString`does not support streaming or waiting for data. [See the alternatives.](#alternatives)
`renderToString`returns a string immediately, so it does not support streaming or waiting for data.
88
+
`renderToString`立即返回一个字符串，因此不支持流式传输或等待数据。
89
89
90
-
When possible, we recommend using these fully-featured alternatives:
90
+
如果可能的话，我们建议使用这些功能完整的替代方法：
91
91
92
-
*If you use Node.js, use [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream)
93
-
*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)
Sometimes, `renderToString`is used on the client to convert some component to HTML.
101
+
有时，`renderToString`用于在客户端将某个组件转换为 HTML。
102
102
103
103
```js {1-2}
104
-
// 🚩 Unnecessary: using renderToString on the client
104
+
// 🚩 不必要：在客户端使用 renderToString
105
105
import { renderToString } from'react-dom/server';
106
106
107
107
consthtml=renderToString(<MyIcon />);
108
-
console.log(html); //For example, "<svg>...</svg>"
108
+
console.log(html); //例如，"<svg>...</svg>"
109
109
```
110
110
111
-
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:
111
+
在客户端导入`react-dom/server`会不必要地增加 bundle 大小，所以应该避免这样做。如果你需要在浏览器中将某个组件渲染为 HTML，请使用 [`createRoot`](/reference/react-dom/client/createRoot)并从 DOM 中读取 HTML。
console.log(div.innerHTML); //For example, "<svg>...</svg>"
122
+
console.log(div.innerHTML); //例如，"<svg>...</svg>"
123
123
```
124
124
125
-
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.
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 [`<Suspense>`](/reference/react/Suspense)boundary above it and render its `fallback`prop in the HTML. The content will not appear until the client code loads.
135
+
如果某个组件 suspend（例如，因为它使用 [`lazy`](/reference/react/lazy)定义或获取数据），`renderToString`不会等待其内容解析完成。相反，`renderToString`将找到最近的 [`<Suspense>`](/reference/react/Suspense)边界，并在 HTML 中渲染其 `fallback`属性。直到客户端代码加载后，内容才会显示出来。
136
136
137
-
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.
0 commit comments