fix cache

server.js

@@ -89,7 +89,7 @@ app.get('*', (req, res) => {
 
   renderStream.on('end', () => {
     res.end(`<script src="/dist/client-bundle.js"></script></body></html>`)
-    console.log('whole request: ' + (Date.now() - s))
+    console.log(`whole request: ${Date.now() - s}ms`)
   })
 
   renderStream.on('error', err => {

src/server-entry.js

@@ -10,7 +10,7 @@ export default context => {
       return component.prefetch(store)
     }
   })).then(() => {
-    console.log('data fetch: ' + (Date.now() - s))
+    console.log(`data pre-fetch: ${Date.now() - s}ms`)
     context.initialState = store.state
     return app
   })

src/store/api.js

 import Firebase from 'firebase'
+import LRU from 'lru-cache'
 
-const api = new Firebase('https://hacker-news.firebaseio.com/v0')
+const inBrowser = typeof window !== 'undefined'
+
+// When using bundleRenderer, the server-side application code runs in a new
+// context for each request. To allow caching across multiple requests, we need
+// to attach the cache to the process which is shared across all requests.
+const cache = inBrowser
+  ? null
+  : (process.__API_CACHE__ || (process.__API_CACHE__ = LRU({ max: 1000 })))
+
+// create a single api instance for all server-side requests
+// and cache the latest top Ids on it.
+const api = inBrowser
+  ? new Firebase('https://hacker-news.firebaseio.com/v0')
+  : (process.__API__ || (process.__API__ = createServerSideAPI()))
+
+function createServerSideAPI () {
+  const api = new Firebase('https://hacker-news.firebaseio.com/v0')
+  api.child(`topstories`).on('value', snapshot => {
+    api.__topIds__ = snapshot.val()
+  })
+  return api
+}
 
 function fetch (child) {
   return new Promise((resolve, reject) => {
@@ -11,17 +33,28 @@ function fetch (child) {
 }
 
 export function fetchTopIds () {
-  return fetch(`topstories`)
+  return api.__topIds__
+    ? Promise.resolve(api.__topIds__)
+    : fetch(`topstories`)
 }
 
 export function watchTopIds (cb) {
   api.child(`topstories`).on('value', snapshot => {
-    cb(snapshot.val())
+    const ids = snapshot.val()
+    api.__topIds__ = ids
+    cb(ids)
   })
 }
 
-export function fetchItem (id) {
-  return fetch(`item/${id}`)
+export function fetchItem (id, forceRefresh) {
+  if (!forceRefresh && cache && cache.has(id)) {
+    return Promise.resolve(cache.get(id))
+  } else {
+    return fetch(`item/${id}`).then(item => {
+      cache && cache.set(id, item)
+      return item
+    })
+  }
 }
 
 export function fetchItems (ids) {

src/store/index.js

@@ -49,6 +49,7 @@ const store = new Vuex.Store({
   }
 })
 
+// watch for realtime top IDs updates on the client
 if (inBrowser) {
   watchTopIds(ids => {
     store.commit('RECEIVE_TOP_IDS', { ids })

src/views/News.vue

@@ -20,14 +20,16 @@ const fetchData = store => {
 
 export default {
   name: 'news',
+  prefetch: fetchData,
   data () {
     return {
       transition: 'slide-left'
     }
   },
-  prefetch: fetchData,
-  mounted () {
+  created () {
+    if (typeof window !== 'undefined') {
       fetchData(this.$store)
+    }
   },
   watch: {
     '$route' (to, from) {

webpack.client.config.js

@@ -39,19 +39,17 @@ module.exports = {
   },
   plugins: [
     new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
-      }
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
     })
   ]
 }
 
 if (process.env.NODE_ENV === 'production' && process.env.VUE_ENV !== 'server') {
-  module.exports.plugins = module.exports.plugins.concat([
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
-  ])
+  // module.exports.plugins = module.exports.plugins.concat([
+  //   new webpack.optimize.UglifyJsPlugin({
+  //     compress: {
+  //       warnings: false
+  //     }
+  //   })
+  // ])
 }

webpack.server.config.js

@@ -10,14 +10,13 @@ module.exports = merge(webpackConfig, {
     libraryTarget: 'commonjs2'
   },
   externals: {
-    firebase: true
+    firebase: true,
+    'lru-cache': true
   },
   plugins: [
     new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
-        VUE_ENV: '"server"'
-      }
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+      'process.env.VUE_ENV': '"server"'
     })
   ]
 })