ISR does not work in in presentation mode

LKosters commented 2 months ago

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

[x] I have tested with the latest Nuxt version and the issue still occurs
[x] I have tested with the latest module version and the issue still occurs
[x] 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 commented 2 months ago

@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 commented 2 months ago

@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 commented 1 month ago

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 commented 1 month ago

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

marco-land commented 1 month ago

@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 commented 1 month ago

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.

nuxt-modules / sanity