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
These new APIs improve on `renderToString` by waiting for data to load for static HTML generation. They are designed to work with streaming environments like Node.js Streams and Web Streams. For example, in a Web Stream environment, you can prerender a React tree to static HTML with `prerender`:
334
+
335
+
```js
336
+
import { prerender } from'react-dom/static';
337
+
338
+
asyncfunctionhandler(request) {
339
+
const {prelude} =awaitprerender(<App />, {
340
+
bootstrapScripts: ['/main.js']
341
+
});
342
+
returnnewResponse(prelude, {
343
+
headers: { 'content-type':'text/html' },
344
+
});
345
+
}
346
+
```
347
+
348
+
Prerender APIs will wait for all data to load before returning the static HTML stream. Streams can be converted to strings, or sent with a streaming response. They do not support streaming content as it loads, which is supported by the existing [React DOM server rendering APIs](/reference/react-dom/server).
349
+
350
+
For more information, see [React DOM Static APIs](/reference/react-dom/static).
327
351
328
352
## React Server Components {/*react-server-components*/}
Copy file name to clipboardexpand all lines: src/content/learn/manipulating-the-dom-with-refs.md
+13-37
Original file line number
Diff line number
Diff line change
@@ -256,11 +256,11 @@ export default function CatFriends() {
256
256
key={cat}
257
257
ref={(node) => {
258
258
constmap=getMap();
259
-
if (node) {
260
-
map.set(cat, node);
261
-
} else {
259
+
map.set(cat, node);
260
+
261
+
return () => {
262
262
map.delete(cat);
263
-
}
263
+
};
264
264
}}
265
265
>
266
266
<img src={cat} />
@@ -309,42 +309,10 @@ li {
309
309
}
310
310
```
311
311
312
-
```json package.json hidden
313
-
{
314
-
"dependencies": {
315
-
"react": "canary",
316
-
"react-dom": "canary",
317
-
"react-scripts": "^5.0.0"
318
-
}
319
-
}
320
-
```
321
-
322
312
</Sandpack>
323
313
324
314
In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) from item ID to a DOM node. ([Refs can hold any values!](/learn/referencing-values-with-refs)) The [`ref` callback](/reference/react-dom/components/common#ref-callback) on every list item takes care to update the Map:
325
315
326
-
```js
327
-
<li
328
-
key={cat.id}
329
-
ref={node=> {
330
-
constmap=getMap();
331
-
if (node) {
332
-
// Add to the Map
333
-
map.set(cat, node);
334
-
} else {
335
-
// Remove from the Map
336
-
map.delete(cat);
337
-
}
338
-
}}
339
-
>
340
-
```
341
-
342
-
This lets you read individual DOM nodes from the Map later.
343
-
344
-
<Canary>
345
-
346
-
This example shows another approach for managing the Map with a `ref` callback cleanup function.
347
-
348
316
```js
349
317
<li
350
318
key={cat.id}
@@ -361,7 +329,15 @@ This example shows another approach for managing the Map with a `ref` callback c
361
329
>
362
330
```
363
331
364
-
</Canary>
332
+
This lets you read individual DOM nodes from the Map later.
333
+
334
+
<Note>
335
+
336
+
When Strict Mode is enabled, ref callbacks will run twice in development.
337
+
338
+
Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) in callback refs.
0 commit comments