N
Nuxt•5d ago
Kealtie

Nuxt 3.16 SSG - prerendering route

In my Nuxt 3.16 SSG application I am prerendering routes, in useAsyncData we're doing graphQL routes and the useAsyncData is keyed as such useAsyncData( dynamic-page-${pageIdentifier.value}-${locale.value}. But when running nuxt start I notice that some pages have not prerendered statically and requests to GraphQL are still being done. other pages of the same type do seem to be fully generated. What do I have to do to make sure all pages are fully statically generated?
4 Replies
kapa.ai
kapa.ai•5d ago
Hi @Kealtie. 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 in the knowledge sources, there are several potential reasons why some of your pages aren't being properly prerendered in your Nuxt 3.16 SSG application. Ensure Proper Key Usage for Shared Prerender Data In Nuxt 3.16, the sharedPrerenderData feature is enabled by default. This feature shares payload data between prerendered pages, which can significantly improve performance. However, it requires proper key usage in useAsyncData calls. Your current key format looks good: 
useAsyncData(`dynamic-page-${pageIdentifier.value}-${locale.value}`, ...)
useAsyncData(`dynamic-page-${pageIdentifier.value}-${locale.value}`, ...)
This follows the recommended pattern of ensuring that the key uniquely identifies the data being fetched. However, make sure that the values of pageIdentifier and locale are available at build time for all routes you want to prerender. Check Your Prerendering Configuration There are several ways to configure which routes get prerendered: 1. Using routeRules: 
   export default defineNuxtConfig({
     routeRules: {
       "/": { prerender: true },
       "/blog/**": { prerender: true },
     },
   });
   
   export default defineNuxtConfig({
     routeRules: {
       "/": { prerender: true },
       "/blog/**": { prerender: true },
     },
   });
This is particularly useful for wildcard routes Link to GitHub PR. 2. Using Nitro configuration: 
   export default defineNuxtConfig({
     nitro: {
       prerender: {
         crawlLinks: true,
         routes: ['/'],
         ignore: ["/api"]
       },
     },
   });
   
   export default defineNuxtConfig({
     nitro: {
       prerender: {
         crawlLinks: true,
         routes: ['/'],
         ignore: ["/api"]
       },
     },
   });
This ensures that Nuxt crawls all links from the specified routes and prerenders them Link to Stack Overflow. Ensure Routes Are Discoverable The Nitro crawler works by: 1. Loading the HTML of your root route and any non-dynamic pages 2. Saving the HTML and payload 3. Finding all anchor tags to navigate to other routes 4. Repeating the process for each discovered route If your dynamic pages aren't linked from any discoverable page, they won't be automatically prerendered Link to Nuxt Docs. Manually Specify Routes to Prerender For dynamic routes that might not be discoverable through crawling, you can manually specify them: 
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/your-dynamic-route/1', '/your-dynamic-route/2'],
    },
  },
});
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/your-dynamic-route/1', '/your-dynamic-route/2'],
    },
  },
});
Use prerenderRoutes Helper You can also use the prerenderRoutes helper in your components to hint additional routes for prerendering: 
<script setup>
prerenderRoutes(['/your-dynamic-route/1', '/your-dynamic-route/2']);
</script>
<script setup>
prerenderRoutes(['/your-dynamic-route/1', '/your-dynamic-route/2']);
</script>
Note that this only works if the component containing this code is itself prerendered Link to Nuxt Docs. Check for Prerendering Issues Make sure that your GraphQL queries are being properly executed during the build process. If there are any errors or timeouts during the build, some routes might not be properly prerendered. Also, ensure that your dynamic routes are properly configured and that the data needed for prerendering is available at build time. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•5d ago
<@235370777837436929> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
kapa.ai
kapa.ai•5d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I'd need to see the actual code of your [...id].vue file to provide specific recommendations for your prerendering issue. The knowledge sources don't contain information about your specific implementation. However, based on our previous conversation about prerendering issues in Nuxt 3.16 SSG, I can offer some general tips for dynamic catch-all routes like [...id].vue: 1. Ensure proper prerendering configuration: Make sure your catch-all route is either linked from other pages that are being crawled or explicitly added to your prerender routes: 
   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: ['/your-specific-catch-all-paths/path1', '/your-specific-catch-all-paths/path2'],
       },
     },
   });
   
   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: ['/your-specific-catch-all-paths/path1', '/your-specific-catch-all-paths/path2'],
       },
     },
   });
2. Use prerenderRoutes helper: If you know all the possible paths for your catch-all route, you can use the prerenderRoutes helper in a component that's guaranteed to be prerendered: 
   <script setup>
   prerenderRoutes(['/your-catch-all-route/path1', '/your-catch-all-route/path2']);
   </script>
   
   <script setup>
   prerenderRoutes(['/your-catch-all-route/path1', '/your-catch-all-route/path2']);
   </script>
This is particularly useful for prerendering API routes as well Link to Nuxt Docs. 3. Check your useAsyncData implementation: Ensure your GraphQL queries are properly keyed and can be resolved at build time. 4. Consider using route rules: You can use route rules to specify prerendering for specific patterns: 
   export default defineNuxtConfig({
     routeRules: {
       "/your-catch-all-prefix/**": { prerender: true },
     },
   });
   
   export default defineNuxtConfig({
     routeRules: {
       "/your-catch-all-prefix/**": { prerender: true },
     },
   });
If you could share the actual code of your [...id].vue file, I could provide more specific recommendations tailored to your implementation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•5d ago
<@235370777837436929> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?