N
Nuxt•3d ago
envizar

prerender only after data loads

I load data on server side of my nuxt app. But on nuxt generate data just don't load before route rendering. How to wait for data to load and prerender routes only after this?
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @envizar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your question about prerendering routes only after data loads in Nuxt, there are a few approaches you can consider: 1. Use useFetch or useAsyncData: When using these composables, Nuxt will automatically wait for the data to be resolved before rendering the page during the generate process. This is the recommended approach for most cases. 
   <script setup>
   const { data } = await useFetch('/api/data')
   </script>
   
   <script setup>
   const { data } = await useFetch('/api/data')
   </script>
2. Utilize the routeRules configuration: You can use the routeRules in your nuxt.config.ts to specify which routes should be prerendered. This gives you more control over the prerendering process. 
   export default defineNuxtConfig({
     routeRules: {
       '/': { prerender: true },
       '/dynamic/**': { isr: true }
     }
   })
   
   export default defineNuxtConfig({
     routeRules: {
       '/': { prerender: true },
       '/dynamic/**': { isr: true }
     }
   })
Hybrid Rendering provides more details on using routeRules. 3. Use the prerenderRoutes function: If you need more dynamic control, you can use the prerenderRoutes function within your pages to add routes for prerendering at runtime. 
   <script setup>
   prerenderRoutes(["/some/other/url"]);
   </script>
   
   <script setup>
   prerenderRoutes(["/some/other/url"]);
   </script>
Runtime prerender configuration explains this approach in more detail. 4. Implement the prerender:routes Nuxt hook: For even more control, you can use the prerender:routes Nuxt hook in your nuxt.config.ts to dynamically add routes for prerendering based on your data. 
   export default defineNuxtConfig({
     hooks: {
       async 'prerender:routes'(ctx) {
         const { pages } = await fetch('<https://api.some-cms.com/pages'>).then(res => res.json())
         for (const page of pages) {
           ctx.routes.add(`/${page.name}`)
         }
       }
     }
   })
   
   export default defineNuxtConfig({
     hooks: {
       async 'prerender:routes'(ctx) {
         const { pages } = await fetch('<https://api.some-cms.com/pages'>).then(res => res.json())
         for (const page of pages) {
           ctx.routes.add(`/${page.name}`)
         }
       }
     }
   })
This approach is also detailed in the Runtime prerender configuration documentation. These methods should help ensure that your routes are prerendered only after the necessary data has been loaded. Choose the approach that best fits your specific use case and application structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@515829500945367078> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?