feat: enable prefetchPayloads

Author: Justineo

components/Hit.js

@@ -57,12 +57,17 @@ const observer =
       })
     : null
 
-export function createComponent ({ isOffline, router, route }) {
+export function createComponent ({ isOffline, router, route, fetchPayload }) {
   return class Hit extends Component {
     handleId = null;
     observed = false;
     link = createRef();
 
+    constructor ({ hit }) {
+      super()
+      this.url = normalizeURL(hit.url)
+    }
+
     canPrefetch () {
       const conn = navigator.connection
       const hasBadConnection =
@@ -73,8 +78,7 @@ export function createComponent ({ isOffline, router, route }) {
     }
 
     getPrefetchComponents () {
-      const { hit } = this.props
-      const ref = router.resolve(normalizeURL(hit.url), route)
+      const ref = router.resolve(this.url, route)
       const Components = ref.resolved.matched.map(r => r.components.default)
 
       return Components.filter(
@@ -100,6 +104,11 @@ export function createComponent ({ isOffline, router, route }) {
         }
         Component.__prefetched = true
       }
+
+      if (fetchPayload) {
+        const { href } = router.resolve(this.url, route)
+        fetchPayload(href, true).catch(() => {})
+      }
     }
 
     observe (el) {
@@ -134,9 +143,9 @@ export function createComponent ({ isOffline, router, route }) {
     }
 
     render ({ hit, children }) {
-      const url = normalizeURL(hit.url)
+      console.log(this.url)
       return createElement('a', {
-        href: url,
+        href: this.url,
         ref: this.link,
         onClick: event => {
           if (isSpecialClick(event)) {
@@ -156,7 +165,7 @@ export function createComponent ({ isOffline, router, route }) {
           if (router.history.current.path !== hitPathname) {
             event.preventDefault()
           }
-          router.push(url)
+          router.push(this.url)
         },
         children
       })

components/OneSearch.vue

@@ -95,7 +95,8 @@ export default {
           hitComponent: createComponent({
             router: this.$router,
             route: this.$route,
-            isOffline: this.$nuxt.isOffline
+            isOffline: this.$nuxt.isOffline,
+            fetchPayload: this.$nuxt.fetchPayload
           })
         })
 

nuxt.config.js

@@ -13,6 +13,10 @@ module.exports = {
   target: 'static',
   telemetry: false,
 
+  router: {
+    prefetchPayloads: true
+  },
+
   /**
    * Headers of the page
    */