N
Nuxt•3mo ago
Thomas

Nuxt Sanity module, unable to connect when some routes are pre-rendered.

Hey everyone, I'm currently working on a project using Nuxt Sanity module. It works great when deployed to Netlify (nitro preset netlify), but as soon as I prerender some routes with routeRules in my nuxt.config file, the live preview stops working, and I get this message: Unable to connect, check the browser console for more information. In the console, I'm also getting this error: Unable to connect to visual editing. Make sure you've set up '@sanity/visual-editing' correctly. Ideally, I'd like to keep some routes static while still using the server routes for the live preview (/preview/enable and /preview/disable). Any idea how I could do that?
3 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Thomas. 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 help with your Nuxt prerendering issue with Sanity. The problem you're experiencing is related to how prerendering works with API routes in Nuxt. When you prerender some routes using routeRules, you need to make sure your API routes (like the Sanity preview routes) are properly configured to work in a hybrid rendering setup. Solution You need to configure your Nuxt application to prerender your static pages while keeping the API routes (like /preview/enable and /preview/disable) as dynamic server routes. Here's how you can do this: 1. Use the nitro.prerender.ignore option to exclude your preview routes from prerendering: 
export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/'], // Start crawling from the homepage
      ignore: ["/preview"] // Ignore all routes under /preview
    }
  },
  // Your other config options...
})
export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/'], // Start crawling from the homepage
      ignore: ["/preview"] // Ignore all routes under /preview
    }
  },
  // Your other config options...
})
This approach is supported by the knowledge sources, as seen in this Stack Overflow post where someone successfully configured a similar setup with static pages and dynamic API routes. 2. Alternatively, you can use routeRules to explicitly define which routes should be prerendered and which should remain dynamic: 
export default defineNuxtConfig({
  routeRules: {
    // Prerender your static pages
    '/': { prerender: true },
    '/about': { prerender: true },
    '/blog/**': { prerender: true },
    
    // Keep preview routes dynamic (not prerendered)
    '/preview/**': { prerender: false }
  }
})
export default defineNuxtConfig({
  routeRules: {
    // Prerender your static pages
    '/': { prerender: true },
    '/about': { prerender: true },
    '/blog/**': { prerender: true },
    
    // Keep preview routes dynamic (not prerendered)
    '/preview/**': { prerender: false }
  }
})
The routeRules approach is documented in Nuxt's prerendering documentation and allows for selective prerendering. Why This Works This solution works because it creates a hybrid rendering setup where: - Your content pages are prerendered at build time - Your API/preview routes remain dynamic and handled by the server at runtime This is exactly the scenario described in the hybrid rendering documentation, where different parts of your application can use different rendering strategies. Remember that when using prerendering with API routes, you need to make sure your deployment platform supports this hybrid approach. Netlify (which you mentioned you're using) does support this setup with the correct configuration. Let me know if you need any clarification or have further questions about this setup! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@1369008538453807337> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Thomas
ThomasOP•3mo ago
@kapa.ai I also tried that, but this is not working.

Did you find this page helpful?