Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consolidate SSR doc #10436

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions docs/_data/nav_docs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,6 @@
title: ReactDOM
- id: react-dom-server
title: ReactDOMServer
- id: react-dom-node-stream
title: ReactDOMNodeStream
- id: dom-elements
title: DOM Elements
- id: events
Expand Down
46 changes: 0 additions & 46 deletions docs/docs/reference-react-dom-node-stream.md

This file was deleted.

34 changes: 33 additions & 1 deletion docs/docs/reference-react-dom-server.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ The `ReactDOMServer` object allows you to render your components on the server.

- [`renderToString()`](#rendertostring)
- [`renderToStaticMarkup()`](#rendertostaticmarkup)
- [`renderToNodeStream()`](#rendertonodestream)
- [`renderToStaticNodeStream()`](#rendertostaticnodestream)

* * *

Expand All @@ -37,4 +39,34 @@ If you call [`ReactDOM.render()`](/react/docs/react-dom.html#render) on a node t
ReactDOMServer.renderToStaticMarkup(element)
```

Similar to [`renderToString`](#rendertostring), except this doesn't create extra DOM attributes such as `data-reactid`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.
Similar to [`renderToString`](#rendertostring), except this doesn't create extra DOM attributes such as `data-reactroot`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

* * *

### `renderToNodeStream()`

```javascript
ReactDOMServer.renderToNodeStream(element)
```

Render a React element to its initial HTML. `renderToNodeStream` will return a [Readable stream](https://nodejs.org/api/stream.html#stream_readable_streams), and the HTML output by this stream will be exactly equal to what [`renderToString`](#rendertostring) would return with the same arguments. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.

This method should only be used in Node.js. It will throw an exception in the browser, since the browser does not support Node.js streams.

If you call [`ReactDOM.render()`](/react/docs/react-dom.html#render) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

Note that the stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text.

* * *

### `renderToStaticNodeStream()`

```javascript
ReactDOMServer.renderToStaticNodeStream(element)
```

Similar to [`renderToNodeStream`](#rendertonodestream), except this doesn't create extra DOM attributes such as `data-reactroot`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

This method should only be used in Node.js. It will throw an exception in the browser, since the browser does not support Node.js streams.

Note that the stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text.