ISR does not work in in presentation mode

[LKosters]

Version

module: 1.10.1
nuxt: 3.9.3

Nuxt configuration

routeRules: { "/**": { isr: 3600, cors: true, }, "/preview/**": { isr: false, cors: true, }, },

Additional information

An alternative idea would be to turn off the ISR feature, however this would lead to a degraded page performance.

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Steps to reproduce

Clone nuxt sanity repo with the movie example, set ISR to 3600 (other values will also work), build it to a live environment (I use Vercel to host my live envoirment) and use that url in presentation mode from studio.

What is expected?

I can edit my file in presentation mode while ISR is turned on.

What is actually happening?

I get the following error in presentation mode:
"Unable to connect, check the browser console for more information."

Error in browser console:
"Unable to connect to visual editing. Make sure you've setup '@sanity/visual-editing' correctly"

[lwaldner]

@LKosters have you figured out a way to get presentation mode working? I have my site hosted on Vercel and I have not been able to get Sanity to connect. I get the same error messages.

I tried setting routeRules: { "/**": { isr: false, cors: true, }, "/preview/**": { isr: false, cors: true, }, }, in my nuxt config but it doesn't work on Vercel

[LKosters]

@LKosters have you figured out a way to get presentation mode working? I have my site hosted on Vercel and I have not been able to get Sanity to connect. I get the same error messages.

I tried setting routeRules: { "/**": { isr: false, cors: true, }, "/preview/**": { isr: false, cors: true, }, }, in my nuxt config but it doesn't work on Vercel

@lwaldner I cannot get it to work either, for now I just turn of ISR but I would rather have it on for performance.

[marco-land]

I can confirm this issue. The presentation mode seems to break as soon as you add any, even just a single, routeRule, not only when it is set for all routes with "/**" and not only for ISR.

As a temporary solution I deploy a preview branch without any rules and am using that URL for the presentation mode. Maybe that is a temporary fix for you, too.

[notflip]

@LKosters @marco-land I'm getting this error without any route rules, would you guys mind sharing how you set this up?

[marco-land]

@LKosters @marco-land I'm getting this error without any route rules, would you guys mind sharing how you set this up?

My preview branch looks like this

export default defineNuxtConfig({
  // ...
  ssr: true,
  sanity: {
    projectId: process.env.NUXT_SANITY_PROJECT_ID,
    dataset: process.env.NUXT_SANITY_DATASET,
    useCdn: false,
    apiVersion: process.env.NUXT_SANITY_API_VERSION || "2024-03-15",
    visualEditing: {
      studioUrl: process.env.NUXT_SANITY_STUDIO_URL || "http://localhost:3333",
      token: process.env.NUXT_SANITY_TOKEN,
      stega: true,
    },
  },
})

my main branch is like this

export default defineNuxtConfig({
  // ...
  ssr: true,
  sanity: {
    projectId: process.env.NUXT_SANITY_PROJECT_ID,
    dataset: process.env.NUXT_SANITY_DATASET,
    useCdn: false,
    apiVersion: process.env.NUXT_SANITY_API_VERSION || "2024-03-15",
  },
  nitro: {
    prerender: {
      crawlLinks: true,
    },
  },
  routeRules: {
    "/**": { prerender: true },
  },
})

my sanity.config.js

export default defineConfig({
  // ...
  plugins: [
    // ...
    presentationTool({
      previewUrl: {
        // make sure that the origin is the the `preview` branch URL
        origin: process.env.SANITY_STUDIO_PREVIEW_URL || 'http://localhost:3000',
        previewMode: {
          enable: '/preview/enable',
          disable: '/preview/disable',
        },
      },
    }),
  ]
});

I hope this helps, in this case I was using "@nuxtjs/sanity": "1.11.0"

[rdunk]

I've done some testing of this today. I'm unable to replicate any "Unable to connect to visual editing" issues when ISR is enabled, everything does work as expected for me with one major caveat:

Currently there is no cache separation for routes dependent on if they are rendered in preview or non-preview mode. As far as I'm aware this means that preview pages do get cached when using ISR, and those cached pages are potentially served/leaked to users who do not have preview mode enabled.

I'm not aware of a method to set cache keys to differentiate preview rendered pages, so for now I'd recommend @marco-land's approach until we can work this one out. Thanks for raising and for your patience.

[MBerkhout]

I tested this out. Unfortunately @marco-land's approach does not work in all cases. For instance, Vercel (one of the bigger platforms) automatically adds a password protection on the non-production branches.

I also noticed that end users have trouble understanding the different URL's and that keeping two branches with the same code base (but different configuration) is possible, but far from ideal (it requires more complex pipelines to ensure that code pushed to a main branch is also visible on the preview branch).

I think this issue has a big impact on possible integrations of Sanity with Nuxt: all possible work-arounds are not working in a real case scenario. One must make a decision between:

1. Big pagespeed decrease (no ISR)
2. Developer friendliness (two branches) / platform incompatability (no possibilities on Vercel)
3. User friendliness (No visual editing)

All in all, there is no optimal, developer friendly way to use Sanity with preview mode with Nuxt.

Would be great to get some guidance here from @rdunk (sanity) or @danielroe (nuxt), on how to get this in. I am more than OK with spending time to also help to get this working, but would be great to see/discuss what the integration method/starting point of this should be. @danielroe any suggestions?