implement component caching

build/webpack.server.config.js

@@ -9,7 +9,7 @@ module.exports = Object.assign({}, base, {
     filename: 'server-bundle.js',
     libraryTarget: 'commonjs2'
   }),
-  externals: ['firebase', 'lru-cache', 'es6-promise'],
+  externals: Object.keys(require('../package.json').dependencies),//['firebase', 'lru-cache', 'es6-promise'],
   plugins: [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),

server.js

@@ -28,10 +28,19 @@ let renderer
 if (isProd) {
   // create server renderer from real fs
   const bundlePath = resolve('./dist/server-bundle.js')
-  renderer = createBundleRenderer(fs.readFileSync(bundlePath, 'utf-8'))
+  renderer = createRenderer(fs.readFileSync(bundlePath, 'utf-8'))
 } else {
   require('./build/setup-dev-server')(app, bundle => {
-    renderer = createBundleRenderer(bundle)
+    renderer = createRenderer(bundle)
+  })
+}
+
+function createRenderer (bundle) {
+  return createBundleRenderer(bundle, {
+    cache: require('lru-cache')({
+      max: 1000,
+      maxAge: 1000 * 60 * 15
+    })
   })
 }
 

src/components/Item.vue

@@ -28,8 +28,12 @@
 
 <script>
 export default {
-  name: 'NewsItem',
-  props: ['item']
+  name: 'news-item',
+  props: ['item'],
+  serverCacheKey: ({ item: { id, __lastUpdated } }) => {
+    console.log(__lastUpdated)
+    return `${id}::${__lastUpdated}`
+  }
 }
 </script>
 

src/store/api.js

@@ -50,6 +50,7 @@ function fetch (child) {
     return new Promise((resolve, reject) => {
       api.child(child).once('value', snapshot => {
         const val = snapshot.val()
+        val.__lastUpdated = Date.now()
         cache && cache.set(child, val)
         resolve(val)
       }, reject)