-
-
Notifications
You must be signed in to change notification settings - Fork 1k
feat(nuxt): support prefetching <nuxt-link>
#4329
Conversation
β Deploy Preview for nuxt3-docs canceled.
|
Thank you for the PR @Mini-ghost π From what I see, So I guess we need a polyfill for it, what would be the preferred approach to do so @pi0 ? |
@pi0 @atinux I will add polyfill for
const requestIdleCallback = process.client
? window.requestIdleCallback || function (cb) {
const start = Date.now()
const idleDeadline = {
didTimeout: false,
timeRemaining () {
return Math.max(0, 50 - (Date.now() - start))
}
}
return window.setTimeout(function () {
cb(idleDeadline)
}, 1)
}
: (() => {}) as any as Window['requestIdleCallback']
let requestIdleCallback: Window['requestIdleCallback'] | null = null onMounted(() => {
if (!shouldPrefetch.value) { return }
// add `requestIdleCallback` polyfill if not supported and need prefetch
if (!requestIdleCallback) {
requestIdleCallback = window.requestIdleCallback || function (cb) {
const start = Date.now()
const idleDeadline = {
didTimeout: false,
timeRemaining () {
return Math.max(0, 50 - (Date.now() - start))
}
}
return window.setTimeout(function () {
cb(idleDeadline)
}, 1)
}
}
}) Which is the preferred approach? |
feat(nuxt3): support `prefetchedClass` prop for `<nuxt-link>`
@Mini-ghost The first approach seems better to me π |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you! Looks good to me but @pi0 may have some more ideas for improvement.
we are preloading all 3 links in initial request.
Thank you so much for helping on this feature @Mini-ghost <3 I've made few more reactors to the PR to simplify do small fixes and also integrated with new payload prerendering using |
prefetch
prop for <nuxt-link>
<nuxt-link>
Co-authored-by: Pooya Parsa <[email protected]>
π Linked issue
nuxt/nuxt#13482 #2086
β Type of change
π Description
Support
prefetch
prop for<nuxt-link>
. This implementation is refer to https://github.com/nuxt/framework/discussions/2086#discussioncomment-1683819. Need a polyfill forrequestIdleCallback
?Also, I'm not sure how to use Link Prefetching like below, because
path
are unpredictable.The implementation of this PR refers to nuxt2, maybe we can generate a router manifest. and mapping file path when triggering prefetch ?
π Checklist