perf: add swr plugin for improved performance (#50)

layouts/default.vue

@@ -21,6 +21,9 @@
 import { feeds } from '~/common/api'
 
 export default {
+  computed: {
+    feeds: () => feeds
+  },
   head () {
     const host = process.server
       ? this.$ssrContext.req.headers.host
@@ -32,9 +35,6 @@ export default {
         { rel: 'canonical', href: `https://${host}${this.$route.path}` }
       ]
     }
-  },
-  computed: {
-    feeds: () => feeds
   }
 }
 </script>

now.json

 {
-  "version": 2,
-  "alias": "hn.nuxtjs.org",
   "builds": [
     {
       "src": "nuxt.config.js",
       "use": "@nuxtjs/now-builder"
     }
-  ],
-  "routes": [
-    {
-      "src": "/_nuxt/.+",
-      "headers": { "Cache-Control": "max-age=31557600" }
-    },
-    { "src": "/(.*)", "dest": "/" }
   ]
 }

nuxt.config.js

@@ -35,12 +35,13 @@ export default {
   },
 
   plugins: [
+    '~/plugins/swr',
     '~/plugins/filters'
   ],
 
   serverMiddleware: [
     (req, res, next) => {
-      res.setHeader('Cache-Control', 's-maxage=30, stale-while-revalidate')
+      res.setHeader('Cache-Control', 's-maxage=10, stale-while-revalidate')
       next()
     }
   ],

package.json

@@ -30,20 +30,20 @@
   },
   "dependencies": {
     "@nuxtjs/axios": "^5.8.0",
-    "nuxt": "^2.10.2"
+    "nuxt": "^2.13.3"
   },
   "devDependencies": {
-    "@nuxtjs/pwa": "3.0.0-beta.8",
-    "@nuxtjs/eslint-config": "^1.1.2",
+    "@nuxtjs/eslint-config": "^3.0.0",
+    "@nuxtjs/pwa": "3.0.0-beta.20",
     "babel-eslint": "^10.0.3",
-    "eslint": "^6.6.0",
+    "eslint": "^7.4.0",
     "eslint-config-standard": "^14.1.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^23.0.2",
-    "eslint-plugin-node": "^10.0.0",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^5.2.3",
+    "eslint-plugin-vue": "^6.2.2",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2"
   }

pages/_feed/_page.vue

@@ -32,6 +32,12 @@ export default {
     return validFeeds.includes(feed)
   },
 
+  fetch () {
+    const { feed, page = 1 } = this.$route.params
+
+    return this.$store.dispatch('FETCH_FEED', { page: Number(page) || 1, feed })
+  },
+
   data () {
     return {
       transition: 'slide-right',
@@ -64,17 +70,6 @@ export default {
     page: 'pageChanged'
   },
 
-  fetch ({ store, params: { feed, page = 1 } }) {
-    page = Number(page) || 1
-    return store.dispatch('FETCH_FEED', { feed, page })
-  },
-
-  head () {
-    return {
-      title: feeds[this.$route.params.feed].title
-    }
-  },
-
   mounted () {
     this.pageChanged(this.page)
   },
@@ -100,6 +95,12 @@ export default {
 
       this.displayedPage = to
     }
+  },
+
+  head () {
+    return {
+      title: feeds[this.$route.params.feed].title
+    }
   }
 }
 </script>

pages/item/_id.vue

@@ -37,10 +37,9 @@ export default {
   name: 'ItemView',
   components: { Comment, LazyWrapper },
 
-  head () {
-    return {
-      title: this.item.title
-    }
+  fetch () {
+    const { id } = this.$route.params
+    return this.$store.dispatch('FETCH_ITEM', { id })
   },
 
   computed: {
@@ -52,14 +51,16 @@ export default {
     }
   },
 
-  fetch ({ store, params: { id } }) {
-    return store.dispatch('FETCH_ITEM', { id })
-  },
-
   methods: {
     isAbsolute (url) {
       return /^https?:\/\//.test(url)
     }
+  },
+
+  head () {
+    return {
+      title: this.item.title
+    }
   }
 }
 </script>

pages/user/_id.vue

@@ -32,6 +32,11 @@ export default {
 
   components: { LazyWrapper },
 
+  fetch () {
+    const { id } = this.$route.params
+    return this.$store.dispatch('FETCH_USER', { id })
+  },
+
   computed: {
     user () {
       return this.$store.state.users[this.$route.params.id]
@@ -42,10 +47,6 @@ export default {
     return {
       title: this.user ? this.user.id : 'User not found'
     }
-  },
-
-  fetch ({ store, route: { params: { id } } }) {
-    return store.dispatch('FETCH_USER', { id })
   }
 }
 </script>

plugins/swr.js

+import Vue from 'vue'
+
+const currentTime = new Date().getTime()
+
+Vue.mixin({
+  mounted () {
+    if (
+      '$fetch' in this &&
+      (currentTime - this.$store.state.swr.time > 30000 ||
+        Object.keys(this.$route.query).includes('refresh'))
+    ) {
+      this.$fetch()
+    }
+  }
+})
+
+export default function ({ store }) {
+  store.registerModule('swr', {
+    state: () => ({
+      time: new Date().getTime()
+    })
+  })
+}