Browse Source

Add ReactDOMNodeStream, adding streaming rendering. (#10024)

* Add ReactDOMNodeStream, adding ability to stream generated HTML.

* Forgot to rename a documentation page.

* Tests are passing locally but failing on CI; attempt to fix that with this tweak.

* Adding some debugging info to try to track down CI problem.

* More debugging of CI. Yay for printf debugging.

* More printf debugging of CI to figure out what is going on with includes during tests.

* I made a truly stupid error with my printf debugging statements for CI. Fixing that.

* And another dumb copy and paste typo.

* The node-stream.js stub for tests wasn't being added because of .gitignore.

* Fix for code review coment https://github.com/facebook/react/pull/10024#discussion_r123606138 . Thanks to @razh for helping me out.

* Removing all the console.logs I put in to debug the build problems on the CI server.

* Fix for code review coment https://github.com/facebook/react/pull/10024#discussion_r123628227 . Thanks to @aweary for the suggestion.

* Response to code review comment https://github.com/facebook/react/pull/10024#discussion_r123649131 . Thanks, @gaearon.

* Responding to code comments https://github.com/facebook/react/pull/10024#pullrequestreview-46104491 , https://github.com/facebook/react/pull/10024#pullrequestreview-46104616 , and https://github.com/facebook/react/pull/10024#pullrequestreview-46104822 . Thanks to @sebmarkbage for the help.

* Attempt to tweak spacing to see if it makes the prettier build step happy.

* Found a prettier bug that wasn't being reported by npm run prettier for some reason.

* Fixed a small prettier issue
main
Sasha Aickin 7 years ago
committed by GitHub
parent
commit
7b5832a3bc
  1. 2
      _data/nav_docs.yml
  2. 42
      docs/reference-react-dom-node-stream.md

2
_data/nav_docs.yml

@ -63,6 +63,8 @@
title: ReactDOM
- id: react-dom-server
title: ReactDOMServer
- id: react-dom-node-stream
title: ReactDOMNodeStream
- id: dom-elements
title: DOM Elements
- id: events

42
docs/reference-react-dom-node-stream.md

@ -0,0 +1,42 @@
---
id: react-dom-node-stream
title: ReactDOMNodeStream
layout: docs
category: Reference
permalink: docs/react-dom-node-stream.html
---
If you use ES6 with npm, you can write `import ReactDOMNodeStream from 'react-dom/node-stream'`. If you use ES5 with npm, you can write `var ReactDOMNodeStream = require('react-dom/node-stream')`.
Unlike other packages in React, `ReactDOMNodeStream` depends on a package (`stream`) that is available in Node.js but not in the browser. For this reason, there is no `<script>` tag version of `ReactDOMNodeStream`; it is only provided as a Node.js module.
## Overview
The `ReactDOMNodeStream` object allows you to render your components in Node.js and stream the resulting markup.
- [`renderToStream()`](#rendertostream)
- [`renderToStaticStream()`](#rendertostaticstream)
* * *
## Reference
### `renderToStream()`
```javascript
ReactDOMNodeStream.renderToStream(element)
```
Render a React element to its initial HTML. This should only be used in Node.js; it will not work in the browser, since the browser does not support Node.js streams. React will return a [Readable stream](https://nodejs.org/api/stream.html#stream_readable_streams) that outputs an HTML string. The HTML output by this stream will be exactly equal to what [`ReactDOMServer.renderToString`](https://facebook.github.io/react/docs/react-dom-server.html#rendertostring) would return. 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.
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.
* * *
### `renderToStaticStream()`
```javascript
ReactDOMNodeStream.renderToStaticStream(element)
```
Similar to [`renderToStream`](#rendertostream), 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.
Loading…
Cancel
Save