Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f546aa7

Browse files
Merge pull request #35 from rookLab/nodeStreaming
updated readme for streaming
2 parents f3dbc57 + 74d64d8 commit f546aa7

File tree

1 file changed

+25
-5
lines changed

1 file changed

+25
-5
lines changed

‎README.md‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,16 @@ export default class App extends Component {
5959
}
6060
// ...
6161
```
62+
## Streaming HTML Markup
63+
To use streaming on the server side, use either the renderToStaticNodeStream or renderToNodeStream. Both streaming option works with caching, but not yet compatible with templatization. To use the streaming functions, simply pass in these 5 arguments:
64+
(
65+
`component`: The React component being rendered
66+
`cache`: The component cache object
67+
`res`: The response object that Express provides
68+
`htmlStart`: Start of html markup in string form
69+
`htmlEnd`: End of html markup in string form
70+
).
71+
The benefit that comes with streaming is faster time to first byte, which translates to faster viewing of page content.
6272

6373
## Cache Options
6474
React Component Caching provides its own cache implementation as well as support for Redis and Memcached. Simply create your preferred cache and pass it into one of the rendering methods.
@@ -98,7 +108,7 @@ ReactCC.renderToString(<App />, cache, 1000);
98108

99109
## API
100110

101-
### ReactCC
111+
### React Component Caching
102112
React Component Caching gives you access to all four of React 16's server-side rendering methods, as well as additional functionality. Available methods are described below.
103113

104114
### ComponentCache
@@ -131,20 +141,30 @@ ReactCC.renderToStaticMarkup(<App />, cache);
131141

132142
### renderToNodeStream
133143
- `component`: The React component being rendered
134-
- `cache`: The component cache
144+
- `cache`: The component cache object
145+
- `res`: The response object that Express provides
146+
- `htmlStart`: Start of html markup in string form
147+
- `htmlEnd`: End of html markup in string form
135148
- `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
136149

137150
**Example:**
138151
```javascript
139-
ReactCC.renderToNodeStream(<App />, cache);
152+
let htmlStart = '<html><head><title>Page</title></head><body><div id="react-root">';
153+
let htmlEnd = '</div></body></html>';
154+
ReactCC.renderToNodeStream(<App />, cache, res, htmlStart, htmlEnd);
140155
```
141156

142157
### renderToStaticNodeStream
143158
- `component`: The React component being rendered
144-
- `cache`: The component cache
159+
- `cache`: The component cache object
160+
- `res`: The response object that Express provides
161+
- `htmlStart`: Start of html markup in string form
162+
- `htmlEnd`: End of html markup in string form
145163
- `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
146164

147165
**Example:**
148166
```javascript
149-
ReactCC.renderToStaticNodeStream(<App />, cache);
167+
let htmlStart = '<html><head><title>Page</title></head><body><div id="react-root">';
168+
let htmlEnd = '</div></body></html>';
169+
ReactCC.renderToStaticNodeStream(<App />, cache, res, htmlStart, htmlEnd);
150170
```

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /