Skip to content

Commit 433ed82

Browse files
adifioreadifiore
committed
merge
2 parents 202c41a + 5eadc2b commit 433ed82

File tree

3 files changed

+3702
-38
lines changed

3 files changed

+3702
-38
lines changed

‎README.md

+85-38
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
1-
# ReactCC
1+
# React Component Caching
22

33
## Overview
4-
ReactCC is a component-level caching library for rendering React components on the server.
5-
- Use any of React's four server-side rendering methods
6-
- Cache simple components or templates
7-
- Choose from three cache implementations (LRU, Redis, or Memcached)
4+
React Component Caching is a component-level caching library for faster server-side rendering with React 16.
5+
- Use any of React's four server-side rendering methods. Rendering is **asynchronous**.
6+
- Cache components using a simple or template strategy.
7+
- Choose from three cache implementations (LRU, Redis, or Memcached).
88

99
## Installation
1010
Using npm:
1111
```shell
12-
$ npm install reactcc
12+
$ npm install react-component-caching
1313
```
1414

1515
## Usage
1616
### In Node rendering server:
17-
Instantiate a cache and pass it into any rendering method as a second argument. Wherever you would use ReactDOM.renderToString, use ReactCC.renderToString.
17+
Instantiate a cache and pass it to any rendering method (`renderToString`, `renderToStaticMarkup`, `renderToNodeStream`, or `renderToStaticNodeStream`) as a second argument. Wherever you would use `ReactDOM.renderToString`, use `ReactCC.renderToString`.
18+
19+
**Note: All of these methods are asynchronous, and return a promise. To use them, `await` the response before rendering**
1820
```javascript
19-
const ReactCC = require("reactcc");
20-
const cache = ReactCC.ComponentCache();
21-
ReactCC.renderToString(<App />, cache>)
21+
const ReactCC = require("react-component-caching");
22+
const cache = new ReactCC.ComponentCache();
23+
24+
app.get('/example', async (req,res) => {
25+
const renderString = await ReactCC.renderToString(<App />, cache);
26+
res.send(renderString);
27+
});
2228

2329
// ...
2430
```
2531

2632
### In React app:
27-
To flag a component for caching, simply add a 'cache' property to it. To create a cache template, add both 'cache' and 'templatized', along with an array of props to templatize.
33+
To flag a component for caching, simply add a `cache` property to it.
2834

2935
```javascript
3036
export default class App extends Component {
@@ -33,57 +39,81 @@ export default class App extends Component {
3339
<div>
3440
<ComponentNotToBeCached />
3541
<ComponentToCache cache />
36-
<ComponentToTemplatize cache templatized='props to templatize' />
3742
</div>
3843
);
3944
}
4045
}
4146
// ...
4247
```
4348

44-
## Cache Options
45-
ReactCC 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.
49+
## Templatizing Cached Components
50+
The example above employs a simple caching strategy: a rendered component is saved with its prop values. Each time the component is rendered with different prop values, a separate copy is saved to the cache. If a component is frequently rendered with different prop values, you may prefer to cache a template of the component to save space in the cache. The template strategy stores a version of the component with placeholders (e.g. `{{0}}`, `{{1}}`) in place of actual prop values.
4651

47-
**ReactCC LRU Cache Example:**
52+
To create a cache template, add both `cache` and `templatized` to the component along with an array of props to templatize. Templatized props should have **string** or **number** values. **Be aware that templates are not currently supported with the `renderToNodeStream` or `renderToStaticNodeStream` methods.**
4853

4954
```javascript
50-
const ReactCC = require("reactcc");
55+
export default class App extends Component {
56+
render() {
57+
return (
58+
<div>
59+
<ComponentNotToBeCached />
60+
<ComponentToCache cache />
61+
<ComponentToTemplatize
62+
templatizedProp1="value1"
63+
templatizedProp2="value2"
64+
nonTemplatizedProp="anotherValue"
65+
cache
66+
templatized={["templatizedProp1", "templatizedProp2"]} />
67+
</div>
68+
);
69+
}
70+
}
71+
// ...
72+
```
73+
## Streaming HTML Markup
74+
To use streaming on the server side, use either the renderToStaticNodeStream or renderToNodeStream function. Both streaming option works with caching, but not yet compatible with templatization. To use the streaming functions, simply pass in these 5 arguments:
75+
(
76+
`component`: The React component being rendered
77+
`cache`: The component cache object
78+
`res`: The response object that Express provides
79+
`htmlStart`: Start of html markup in string form
80+
`htmlEnd`: End of html markup in string form
81+
).
82+
The benefit that comes with streaming is faster time to first byte, which translates to faster viewing of page content.
83+
84+
## Cache Options
85+
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.
5186

52-
const cache = ReactCC.ComponentCache();
87+
**Standard (LRU) Cache Example:**
5388

54-
ReactCC.renderToString(<App />, cache);
89+
```javascript
90+
const ReactCC = require("react-component-caching");
91+
const cache = new ReactCC.ComponentCache();
5592
```
5693

5794
**Redis Example:**
5895

5996
```javascript
60-
const ReactCC = require("reactcc");
97+
const ReactCC = require("react-component-caching");
6198
const redis = require("redis");
62-
6399
const cache = redis.createClient();
64-
65-
ReactCC.renderToString(<App />, cache);
66100
```
67101

68102
**Memcached Example:**
69103

70104
```javascript
71-
const ReactCC = require("reactcc");
105+
const ReactCC = require("react-component-caching");
72106
const Memcached = require("memcached");
73-
74107
const cache = new Memcached(server location, options);
75108

76-
// Make sure to pass in the lifetime of the data (in seconds) as a number.
109+
// If using Memcached, make sure to pass in the lifetime of the data (in seconds) as a number.
77110
ReactCC.renderToString(<App />, cache, 1000);
78111
```
79112

80-
## Templatizing Cached Components
81-
Insert description and implementation here
82-
83113
## API
84114

85-
### ReactCC
86-
ReactCC gives you access to all four of React 16's server-side rendering methods, as well as additional functionality. ReactCC methods are described below.
115+
### React Component Caching
116+
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.
87117

88118
### ComponentCache
89119
- `size`: (*Optional*) An integer representing the maximum size (in characters) of the cache. Defaults to 1 million.
@@ -94,7 +124,7 @@ const cache = new ReactCC.ComponentCache();
94124
```
95125

96126
### renderToString
97-
- `component`: The React component being rendered.
127+
- `component`: The React component being rendered
98128
- `cache`: The component cache
99129
- `memLife`: (*Only if using Memcached*) A number representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
100130

@@ -104,7 +134,7 @@ ReactCC.renderToString(<App />, cache);
104134
```
105135

106136
### renderToStaticMarkup
107-
- `component`: The React component being rendered.
137+
- `component`: The React component being rendered
108138
- `cache`: The component cache
109139
- `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
110140

@@ -114,21 +144,38 @@ ReactCC.renderToStaticMarkup(<App />, cache);
114144
```
115145

116146
### renderToNodeStream
117-
- `component`: The React component being rendered.
118-
- `cache`: The component cache
147+
- `component`: The React component being rendered
148+
- `cache`: The component cache object
149+
- `res`: The response object that Express provides
150+
- `htmlStart`: Start of html markup in string form
151+
- `htmlEnd`: End of html markup in string form
119152
- `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
120153

121154
**Example:**
122155
```javascript
123-
ReactCC.renderToNodeStream(<App />, cache);
156+
let htmlStart = '<html><head><title>Page</title></head><body><div id="react-root">';
157+
let htmlEnd = '</div></body></html>';
158+
ReactCC.renderToNodeStream(<App />, cache, res, htmlStart, htmlEnd);
124159
```
125160

126161
### renderToStaticNodeStream
127-
- `component`: The React component being rendered.
128-
- `cache`: The component cache
162+
- `component`: The React component being rendered
163+
- `cache`: The component cache object
164+
- `res`: The response object that Express provides
165+
- `htmlStart`: Start of html markup in string form
166+
- `htmlEnd`: End of html markup in string form
129167
- `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
130168

131169
**Example:**
132170
```javascript
133-
ReactCC.renderToStaticNodeStream(<App />, cache);
171+
let htmlStart = '<html><head><title>Page</title></head><body><div id="react-root">';
172+
let htmlEnd = '</div></body></html>';
173+
ReactCC.renderToStaticNodeStream(<App />, cache, res, htmlStart, htmlEnd);
134174
```
175+
176+
## Authors
177+
- [Mejin Leechor](https://github.com/mejincodes)
178+
- [Annie DiFiore](https://github.com/adifiore)
179+
- [Steven Lee](https://github.com/stevedorke)
180+
- [Tim Hong](https://github.com/tjhong30)
181+
- [Zihao Li](https://github.com/kodakyellow)

0 commit comments

Comments
 (0)