Add ReactDOMNodeStream, adding streaming rendering. #10024
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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` class 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 [https://nodejs.org/api/stream.html#stream_readable_streams](Readable stream) that outputs an HTML string. The HTML output by this stream should be character-for-character equivalent to the output of [https://facebook.github.io/react/docs/react-dom-server.html#rendertostring](ReactDOMServer.renderToString). 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. | ||
|
There was a problem hiding this comment. Yep, you're right! Thanks! There was a problem hiding this comment. Should be fixed in 132567d. Thanks! There was a problem hiding this comment.
Phrasing is a little awkward, could we convey the same idea without "character-for-character" and "should"?
There was a problem hiding this comment.
There was a problem hiding this comment. Thanks for the suggestions! Should be fixed in b8f2529. |
||
|
|
||
| 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. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| 'use strict'; | ||
|
|
||
| if (process.env.NODE_ENV === 'production') { | ||
| module.exports = require('./cjs/react-dom-node-stream.production.min.js'); | ||
| } else { | ||
| module.exports = require('./cjs/react-dom-node-stream.development.js'); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I suppose it's not a class?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Right you are!
Should be fixed in b6f9e06, and I opened PR #10027 to fix it in the doc for
ReactDOMServer, too.Thanks for the help!