[3.0 Beta] Server-side live preview not working correctly in a decoupled setup

[yobottehg]

TL:DR;
With a decoupled setup, in live preview, after a change of a field the new request inside the iframe has disabled draft mode and returns the published version.

Details:

We implemented server side live preview like written here: https://payloadcms.com/docs/beta/live-preview/server and done inside the new website template here: https://github.com/payloadcms/payload/tree/beta/templates/website

However other then in the template we don't run payload in the same Next.js instance but on a separate one (The website is also Next.js, we need dedicated docker containers for security reasons).

So the website is running on localhost:3011 and the cms on localhost:3010. The connection is done via GraphQL.

I got everything working to preview the draft version of the page exactly once.

After a change the post-message is sent, received and router.refresh() is called. However in the new request the draft mode is disabled the published version of the page is loaded instead of the draft version.

I tested that with https and with http, with secure cookies and without, same site lax and none always the same result. See the original issue regarding cookie problems here: vercel/next.js#49927

I'm unsure how the draft mode state is computed inside Next.js so i'm unsure where to further debug this.

What I can see in dev tools is that the __prerender_bypass cookie that Next.js sets is removed after 1 second. I'm unsure if this is first set by the CMS or by the iFrame. However It is removed after the first request inside the iFrame. Therefore I think this could be related to the second request being done with disabled draft mode.

However this could also be related to caching or something else but I'm a bit stuck here. Is there someone who did this and it works like it should?

I created a video showcasing this behaviour, perhaps this helps in giving me a hint:

server_side_live_preview_payload.mp4

[yobottehg]

Update: Seems to be a dev server problem. Works good with a production build.

[itekhi]

Hello! I'm running Payload v3.52.0 on Next v15.4.4, with @trieb.work/nextjs-turbo-redis-cache in Docker (3 instances of Payload on standalone Next all inside Docker Compose), and I'm seeing the same issue happening in my production setup.

When I go back to one instance without the cache handler all works as expected... If anyone knows what this could be, or if you could at least point me in the right direction, that would be great 🙏🏻