reformat cache with own get and set methods

Author: adifiore

SSRtest/ModifiedReact.js

@@ -2234,14 +2234,15 @@ var ReactDOMServerRenderer = function () {
         setCurrentDebugStack(this.stack);
       }
 
-      // IF THE CHILD HAS A CACHEKEY PROPERTY ON IT
+      // CACHING LOGIC: EXECUTES IF THE CHILD HAS A 'CACHE' PROP ON IT
       if(child.props.cache){
         const cacheKey = child.type.name + JSON.stringify(child.props);
-        if (!cache.storage.get(cacheKey)){
+        // console.log(cache.get(cacheKey));
+        if (!cache.get(cacheKey)){
           start[cacheKey] = out.length;
           out += this.render(child, frame.context, frame.domNamespace);
         } else {
-          out += cache.storage.get(cacheKey);
+          out += cache.get(cacheKey);
         }
       } else {
         out += this.render(child, frame.context, frame.domNamespace);
@@ -2270,7 +2271,7 @@ var ReactDOMServerRenderer = function () {
       } while (tagStack.length !== 0);
 
       // cache component by slicing 'out'
-      cache.storage.set(component, out.slice(start[component], tagEnd));
+      cache.set(component, out.slice(start[component], tagEnd));
     }
     return out;
   };
@@ -2613,8 +2614,15 @@ class ComponentCache {
 			length: (n, key) => {
 				return n.length + key.length;
 			}
-		});
+    });
+  }
+
+  get(cacheKey) {
+    return this.storage.get(cacheKey)
+  }
 
+  set(cacheKey, html) {
+    this.storage.set(cacheKey, html);
   }
 }  
 

SSRtest/package-lock.json

@@ -34,6 +34,7 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-universal-component": "^2.5.5",
+    "redis": "^2.8.0",
     "webpack-flush-chunks": "^1.1.23",
     "winston": "^2.3.1"
   },

SSRtest/package.json

@@ -9,6 +9,8 @@ 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();
 
 /**
  * @param clientStats Parameter passed by hot server middleware
@@ -18,6 +20,7 @@ export default ({ clientStats }) => async (req, res) => {
     const start_cached = process.hrtime();
     // const appString = ReactCC.renderToStaticMarkup(app, 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/server/index.js

@@ -1,8 +1,7 @@
 'use strict';
 
 if (process.env.NODE_ENV === 'production') {
-  // NOTE: CHANGE TO PRODUCTION WHEN WE HAVE THAT FINAL FILE
-  module.exports = require('./development.js');
+  module.exports = require('./production.js');
 } else {
   module.exports = require('./development.js');
 }