update template to avoid repeated cache calls

Author: adifiore

README.md

@@ -86,7 +86,7 @@ Insert description and implementation here
 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.
 
 ### ComponentCache
-- `size`: (Optional) An integer representing the maximum size (in characters) of the cache. Defaults to 1 million.
+- `size`: (*Optional*) An integer representing the maximum size (in characters) of the cache. Defaults to 1 million.
 
 **Example:**
 ```javascript
@@ -96,7 +96,7 @@ const cache = new ReactCC.ComponentCache();
 ### renderToString
 - `component`: The React component being rendered.
 - `cache`: The component cache
-- `memLife`: (Only if using Memcached) A number representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
+- `memLife`: (*Only if using Memcached*) A number representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
 
 **Example:**
 ```javascript
@@ -106,7 +106,7 @@ ReactCC.renderToString(<App />, cache);
 ### renderToStaticMarkup
 - `component`: The React component being rendered.
 - `cache`: The component cache
-- `memLife`: (Only if using Memcached) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
+- `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
 
 **Example:**
 ```javascript
@@ -116,7 +116,7 @@ ReactCC.renderToStaticMarkup(<App />, cache);
 ### renderToNodeStream
 - `component`: The React component being rendered.
 - `cache`: The component cache
-- `memLife`: (Only if using Memcached) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
+- `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
 
 **Example:**
 ```javascript
@@ -126,7 +126,7 @@ ReactCC.renderToNodeStream(<App />, cache);
 ### renderToStaticNodeStream
 - `component`: The React component being rendered.
 - `cache`: The component cache
-- `memLife`: (Only if using Memcached) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
+- `memLife`: (*Only if using Memcached*) An integer representing the lifetime (in seconds) of each Memcached entry. Defaults to 0.
 
 **Example:**
 ```javascript

SSRtest/ModifiedReact.js

@@ -2216,7 +2216,8 @@ var ReactDOMServerRenderer = function () {
  getAsync: Convert asynchronous get method into a promise
  */
  const start = {}; 
- let saveTemplates;
+ let saveTemplates = [];
+ let loadedTemplates = {}; 
  const restoreProps = (template, props, lookup) => {
  return template.replace(/\{\{[0-9]+\}\}/g, match => props[lookup[match]]);
  };
@@ -2292,28 +2293,32 @@ var ReactDOMServerRenderer = function () {
  if(memLife){
  cacheKey = cacheKey.replace(/\s+/g, '|')
  }
+ let r;
+ let restoredTemplate;
 
- const reply = await getAsync(cacheKey);
- if (!reply) { // Component not found in cache
- let r;
-
- // If templatized component and template hasn't been generated, render a template
- if (!start[cacheKey] && isTemplate) {
- r = this.render(modifiedChild, frame.context, frame.domNamespace);
- start[cacheKey] = { startIndex: out.length, realProps, lookup };
- }
- // Otherwise, render with actual props
- else r = this.render(child, frame.context, frame.domNamespace);
-
- // For simple (non-template) caching, save start index of component in output string
- if (!isTemplate) start[cacheKey] = out.length;
-
- out += r;
- } else { // Component found in cache
- let restoredTemplate;
- if (isTemplate) restoredTemplate = restoreProps(reply, realProps, lookup);
- out += restoredTemplate ? restoredTemplate : reply;
+ if (loadedTemplates[cacheKey]) { // Component found in loaded templates
+ restoredTemplate = restoreProps(loadedTemplates[cacheKey], realProps, lookup);
+ } else {
+ const reply = await getAsync(cacheKey);
+ if (!reply) { // Component not found in cache
+ // If templatized component and template hasn't been generated, render a template
+ if (!start[cacheKey] && isTemplate) {
+ r = this.render(modifiedChild, frame.context, frame.domNamespace);
+ start[cacheKey] = { startIndex: out.length, realProps, lookup };
+ }
+ // Otherwise, render with actual props
+ else r = this.render(child, frame.context, frame.domNamespace);
+ 
+ // For simple (non-template) caching, save start index of component in output string
+ if (!isTemplate) start[cacheKey] = out.length;
+ } else { // Component found in cache
+ if (isTemplate) {
+ restoredTemplate = restoreProps(reply, realProps, lookup);
+ loadedTemplates[cacheKey] = reply;
+ } 
+ } 
  }
+ out += restoredTemplate ? restoredTemplate : r;
  } else { 
  // Normal rendering for non-cached components
  out += this.render(child, frame.context, frame.domNamespace);
@@ -2348,7 +2353,6 @@ var ReactDOMServerRenderer = function () {
  // Cache component by slicing 'out'
  const cachedComponent = out.slice(componentStart, tagEnd);
  if (typeof start[component] === 'object') {
- if (!saveTemplates) saveTemplates = [];
  saveTemplates.push(start[component]);
  start[component].endIndex = tagEnd;
  }
@@ -2369,7 +2373,7 @@ var ReactDOMServerRenderer = function () {
  saveTemplates.sort((a, b) => a.startIndex - b.startIndex);
  // Rebuild output string with actual props
  saveTemplates.forEach(savedTemplate => {
- out += outCopy.substring(bookmark, savedTemplate.startIndex)
+ out += outCopy.substring(bookmark, savedTemplate.startIndex);
  bookmark = savedTemplate.endIndex;
  out += restoreProps(outCopy.slice(savedTemplate.startIndex, savedTemplate.endIndex), 
  savedTemplate.realProps, savedTemplate.lookup);

SSRtest/src/server/index.js

@@ -8,11 +8,11 @@ import flushChunks from 'webpack-flush-chunks';
 import App from '../shared/App';
 
 // can pass in max-size, otherwise defaults to 1 million
-// const cache = new ReactCC.ComponentCache();
+const cache = new ReactCC.ComponentCache();
 // import redis from 'redis';
 // const cache = redis.createClient();
-import memcached from 'memcached';
-const cache = new memcached('localhost:11211');
+// import memcached from 'memcached';
+// const cache = new memcached('localhost:11211');
 
 /**
  * @param clientStats Parameter passed by hot server middleware
@@ -21,7 +21,7 @@ export default ({ clientStats }) => async (req, res) => {
  const app = <App />;
  const start_cached = process.hrtime();
 
- const appString = await ReactCC.renderToString(app, cache, 20);
+ const appString = await ReactCC.renderToString(app, cache);
  const end_cached = process.hrtime(start_cached);
  console.info(
  "Cached render time: %ds %dms",