N
Nuxt•3w ago
jonspe

nuxi generate only finds 10 from 100 slug routes when paginated to show only 10

Is my approach bad, paginating links? Should I show all links and use CSS to hide the others instead? Anyways, nuxt can't find the other 90 routes. I've tried stuff like this: 
async function getBlogRoutes() {
  const data = await fetch("https://jsonplaceholder.typicode.com/posts")
  const posts = await data.json()
  return posts.map((post) => `/blog/${post.id}`)
}
...
  generate: {
    "nitro.prerender.routes": getBlogRoutes(),
  },
async function getBlogRoutes() {
  const data = await fetch("https://jsonplaceholder.typicode.com/posts")
  const posts = await data.json()
  return posts.map((post) => `/blog/${post.id}`)
}
...
  generate: {
    "nitro.prerender.routes": getBlogRoutes(),
  },
but it only still generates the first 10 routes.
3 Replies
kapa.ai
kapa.ai•3w ago
Hi @jonspe. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights and suggestions regarding your issue with nuxi generate only finding 10 out of 100 slug routes when paginated. The problem you're experiencing is likely related to how Nuxt's crawler works during the prerendering process. By default, Nuxt will crawl links on your pages to discover routes for prerendering. If you're only showing 10 links per page due to pagination, the crawler may not be able to discover the other 90 routes. Here are some approaches you can consider: 1. Use nitro.prerender.routes: Instead of using the generate property, you should use nitro.prerender.routes in your nuxt.config.ts file. This is the recommended way to specify additional routes for prerendering in Nuxt 3. Here's how you can modify your configuration: 
   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: getBlogRoutes
       }
     }
   })
   
   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: getBlogRoutes
       }
     }
   })
Make sure getBlogRoutes is an async function that returns an array of routes. 2. Use prerenderRoutes: You can also use the prerenderRoutes function within your pages to hint additional routes for prerendering. This is especially useful for dynamic routes. Here's an example: 
   <script setup>
   prerenderRoutes(["/blog/1", "/blog/2", /* ... other routes ... */]);
   </script>
   
   <script setup>
   prerenderRoutes(["/blog/1", "/blog/2", /* ... other routes ... */]);
   </script>
Source: Docs > Getting-started > Prerendering 3. Use the prerender:routes Nuxt hook: You can use this hook to add more routes for prerendering before the process starts: 
   export default defineNuxtConfig({
     hooks: {
       async 'prerender:routes'(ctx) {
         const posts = await fetch("<https://jsonplaceholder.typicode.com/posts">).then(res => res.json())
         for (const post of posts) {
           ctx.routes.add(`/blog/${post.id}`)
         }
       }
     }
   })
   
   export default defineNuxtConfig({
     hooks: {
       async 'prerender:routes'(ctx) {
         const posts = await fetch("<https://jsonplaceholder.typicode.com/posts">).then(res => res.json())
         for (const post of posts) {
           ctx.routes.add(`/blog/${post.id}`)
         }
       }
     }
   })
Source: Docs > Getting-started > Prerendering Regarding your question about showing all links and using CSS to hide others: While this approach might help the crawler discover all routes, it's generally not recommended for performance reasons, especially if you have a large number of posts. It's better to use one of the methods described above to explicitly tell Nuxt about all the routes that need to be prerendered. Remember, the goal is to inform Nuxt about all the routes that need to be generated, rather than relying solely on the crawler to discover them through links on your pages. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@165887165736157185> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
jonspe
jonspeOP•3w ago
the third option worked for me, thanks kapa

Did you find this page helpful?