Skip to content

Commit 0e0b483

Browse files
authored
Merge pull request #30 from mejincodes/readmeUpdate
README update
2 parents 67a216c + d0d5734 commit 0e0b483

File tree

1 file changed

+37
-21
lines changed

1 file changed

+37
-21
lines changed

README.md

Lines changed: 37 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
1-
# ReactCC
1+
# React Component Caching
22

33
## Overview
4-
ReactCC is a component-level caching library for rendering React components on the server.
4+
React Component Caching is a component-level caching library for faster server-side rendering with React 16.
55
- Use any of React's four server-side rendering methods
6-
- Cache simple components or templates
6+
- Cache components using a simple or template strategy
77
- 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`.
1818
```javascript
19-
const ReactCC = require("reactcc");
19+
const ReactCC = require("react-component-caching");
2020
const cache = ReactCC.ComponentCache();
2121
ReactCC.renderToString(<App />, cache>)
2222

2323
// ...
2424
```
2525

2626
### 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.
27+
To flag a component for caching, simply add a `cache` property to it.
2828

2929
```javascript
3030
export default class App extends Component {
@@ -33,7 +33,26 @@ export default class App extends Component {
3333
<div>
3434
<ComponentNotToBeCached />
3535
<ComponentToCache cache />
36-
<ComponentToTemplatize cache templatized='props to templatize' />
36+
</div>
37+
);
38+
}
39+
}
40+
// ...
41+
```
42+
43+
## Templatizing Cached Components
44+
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.
45+
46+
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.**
47+
48+
```javascript
49+
export default class App extends Component {
50+
render() {
51+
return (
52+
<div>
53+
<ComponentNotToBeCached />
54+
<ComponentToCache cache />
55+
<ComponentToTemplatize templatizedProp1="value" templatizedProp2="value2" nonTemplatizedProp="anotherValue" cache templatized={["templatizedProp1", "templatizedProp2"]} />
3756
</div>
3857
);
3958
}
@@ -42,12 +61,12 @@ export default class App extends Component {
4261
```
4362

4463
## 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.
64+
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.
4665

47-
**ReactCC LRU Cache Example:**
66+
**Standard (LRU) Cache Example:**
4867

4968
```javascript
50-
const ReactCC = require("reactcc");
69+
const ReactCC = require("react-component-caching");
5170

5271
const cache = ReactCC.ComponentCache();
5372

@@ -57,7 +76,7 @@ ReactCC.renderToString(<App />, cache);
5776
**Redis Example:**
5877

5978
```javascript
60-
const ReactCC = require("reactcc");
79+
const ReactCC = require("react-component-caching");
6180
const redis = require("redis");
6281

6382
const cache = redis.createClient();
@@ -68,7 +87,7 @@ ReactCC.renderToString(<App />, cache);
6887
**Memcached Example:**
6988

7089
```javascript
71-
const ReactCC = require("reactcc");
90+
const ReactCC = require("react-component-caching");
7291
const Memcached = require("memcached");
7392

7493
const cache = new Memcached(server location, options);
@@ -77,13 +96,10 @@ const cache = new Memcached(server location, options);
7796
ReactCC.renderToString(<App />, cache, 1000);
7897
```
7998

80-
## Templatizing Cached Components
81-
Insert description and implementation here
82-
8399
## API
84100

85101
### 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.
102+
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.
87103

88104
### ComponentCache
89105
- `size`: (*Optional*) An integer representing the maximum size (in characters) of the cache. Defaults to 1 million.
@@ -94,7 +110,7 @@ const cache = new ReactCC.ComponentCache();
94110
```
95111

96112
### renderToString
97-
- `component`: The React component being rendered.
113+
- `component`: The React component being rendered
98114
- `cache`: The component cache
99115
- `memLife`: (*Only if using Memcached*) A number representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
100116

@@ -104,7 +120,7 @@ ReactCC.renderToString(<App />, cache);
104120
```
105121

106122
### renderToStaticMarkup
107-
- `component`: The React component being rendered.
123+
- `component`: The React component being rendered
108124
- `cache`: The component cache
109125
- `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
110126

@@ -114,7 +130,7 @@ ReactCC.renderToStaticMarkup(<App />, cache);
114130
```
115131

116132
### renderToNodeStream
117-
- `component`: The React component being rendered.
133+
- `component`: The React component being rendered
118134
- `cache`: The component cache
119135
- `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
120136

@@ -124,7 +140,7 @@ ReactCC.renderToNodeStream(<App />, cache);
124140
```
125141

126142
### renderToStaticNodeStream
127-
- `component`: The React component being rendered.
143+
- `component`: The React component being rendered
128144
- `cache`: The component cache
129145
- `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
130146

0 commit comments

Comments
 (0)