altered lru cache method to work interchangeably with redis async method

Author: adifiore

SSRtest/ModifiedReact.js

@@ -27,6 +27,7 @@ var checkPropTypes = require('prop-types/checkPropTypes');
 var camelizeStyleName = require('fbjs/lib/camelizeStyleName');
 var stream = require('stream');
 var lru = require('lru-cache');
+var redis = require('redis');
 
 /**
  * WARNING: DO NOT manually require this module.
@@ -2235,15 +2236,19 @@ var ReactDOMServerRenderer = function () {
  }
 
  // CACHING LOGIC: EXECUTES IF THE CHILD HAS A 'CACHE' PROP ON IT
- if(child.props.cache){
+ if(child.props && child.props.cache){
  const cacheKey = child.type.name + JSON.stringify(child.props);
- // console.log(cache.get(cacheKey));
- if (!cache.get(cacheKey)){
- start[cacheKey] = out.length;
- out += this.render(child, frame.context, frame.domNamespace);
- } else {
- out += cache.get(cacheKey);
- }
+
+ // get method will run callback
+ cache.get(cacheKey, (err, reply) => {
+ if(reply){
+ out += reply;
+ } else {
+ start[cacheKey] = out.length;
+ out += this.render(child, frame.context, frame.domNamespace);
+ }
+ });
+
  } else {
  out += this.render(child, frame.context, frame.domNamespace);
  }
@@ -2253,13 +2258,13 @@ var ReactDOMServerRenderer = function () {
  }
  }
 
- for (let component in start) {
+ for (let cacheKey in start) {
  let tagStack = [];
  let tagStart;
  let tagEnd;
 
  do {
- if (!tagStart) tagStart = start[component];
+ if (!tagStart) tagStart = start[cacheKey];
  else tagStart = (out[tagEnd] === '<') ? tagEnd : out.indexOf('<', tagEnd)
  tagEnd = out.indexOf('>', tagStart) + 1;
  // Skip stack logic for void/self-closing elements
@@ -2271,7 +2276,9 @@ var ReactDOMServerRenderer = function () {
  } while (tagStack.length !== 0);
 
  // cache component by slicing 'out'
- cache.set(component, out.slice(start[component], tagEnd));
+ cache.set(cacheKey, out.slice(start[cacheKey], tagEnd), (err, reply) => {
+ console.log(reply);
+ });
  }
  return out;
  };
@@ -2617,8 +2624,10 @@ class ComponentCache {
  });
  }
 
- get(cacheKey) {
- return this.storage.get(cacheKey)
+ get(cacheKey, cb) {
+ let reply = this.storage.get(cacheKey);
+ // return reply;
+ cb(null,reply);
  }
 
  set(cacheKey, html) {

SSRtest/src/server/index.js

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

SSRtest/src/shared/App.js

@@ -17,9 +17,9 @@ export default class App extends Component {
  return (
  <div>
  <h1>THIS IS AN APP</h1>
- <Button />
+ <Button cache/>
  <List cache/>
- <BlogPost />
+ <BlogPost thing='haha'/>
  </div>
  );
  }

SSRtest/src/shared/BlogPost.js

@@ -13,6 +13,7 @@ export default class BlogPost extends Component {
  <div>
  <h1>This is a great blog post!</h1>
  <BlogContent />
+ <p>{this.props.thing}</p>
  </div>
  );
  }