What are the differences between preloadComponents and prefetchComponents
Does one only download a component, meanwhile the other downloads-and-pre-renders it?
3 Replies
Hi @Kal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The difference between preloadComponents and prefetchComponents in Nuxt is subtle, and as of the current implementation, both utilities behave the same way: they load the code for globally registered async components early, so the components are available and less likely to block rendering when needed.
- preloadComponents: Loads the specified components early in the rendering lifecycle, ensuring they are available before they are needed for rendering. This can help improve performance by reducing the chance of blocking the page's render when the component is actually used.
- prefetchComponents: Intended to download the component code in the background based on the assumption that the component will likely be used soon, enabling instant loading if the user requests it. However, the documentation states that the current implementation behaves exactly the same as preloadComponents, meaning it also preloads the components rather than just prefetching them. There is ongoing work to improve this behavior so that prefetching will be distinct from preloading in the future.
Neither utility pre-renders the component; both only download the component code so it is ready for use. Preloading/prefetching does not mean the component is rendered ahead of time—it just ensures the code is available in the client before it is needed for rendering.
On the server, both functions have no effect—they are client-side only utilities.
References:
- preloadComponents documentation
- prefetchComponents documentation
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@821437800225570892> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Can you provide example use-cases for both preloadComponents and prefetchComponents.
Why would someone use one over the other?