2 Replies
Hi @hz2222. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To preload multiple banners in Nuxt SSR, you have a couple of options depending on what you mean by "banners":
1. Preloading Banner Images
If your banners are images, you can use the Nuxt Image module's
Nuxt Image preload usage 2. Preloading Banner Components If your banners are Vue components, you can use Nuxt's
preloadComponents documentation Summary - For images: Use
Nuxt Image static images. If you meant something different by "banners," please clarify for a more specific answer. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<NuxtImg> component with the preload prop. This will add a <link rel="preload"> tag for each image in the page's <head>, ensuring they are loaded early:
This approach works in SSR and will ensure the images are preloaded when the page is rendered on the server and sent to the client. Each image you want to preload should have the preload prop set.Nuxt Image preload usage 2. Preloading Banner Components If your banners are Vue components, you can use Nuxt's
preloadComponents utility to preload them. This is useful if the banners are registered as global async components:
However, note that preloadComponents has no effect on the server side; it only works on the client. In SSR, components needed for the initial render are already loaded as part of the server-rendered HTML, so explicit preloading is generally unnecessary for SSR.preloadComponents documentation Summary - For images: Use
<NuxtImg preload /> for each banner image.
- For components: preloadComponents is client-only and not needed for SSR.
If you need to ensure images are optimized and available in static builds, see the Nuxt Image static images guide for additional configuration options when using nuxt generate or static hosting scenariosNuxt Image static images. If you meant something different by "banners," please clarify for a more specific answer. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@993174034940444752> Kapa.ai is still learning and improving, please let me know how I did by reacting below.