search

payloadcms / payload

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
https://payloadcms.com
MIT License
24.87k stars 1.58k forks source link

Server-side live preview doesn't automatically enable draft mode #7772

Closed remarcable closed 2 months ago

remarcable commented 2 months ago

Link to reproduction

https://github.com/payloadcms/payload-3.0-demo/compare/main...remarcable:livepreview-repro?expand=1

Payload Version

3.0.0-beta.80 (also tested on 3.0.0-beta.84

Node Version

v20.10.0

Next.js Version

15.0.0-canary.104

Describe the Bug

Hey there 👋

I recently implemented live preview as described at

When I use Live Preview on a page it doesn't initially update the site until I manually enable draft mode (e.g. by clicking the "Preview" button). This is a confusing user experience as the page doesn't update even when it should.

Current Behavior

Expected Behavior

Reproduction Steps

See the code at https://github.com/payloadcms/payload-3.0-demo/compare/main...remarcable:livepreview-repro?expand=1

Then see this video for reproduction steps in the UI:

https://github.com/user-attachments/assets/2aeeb0ec-fdd7-4285-bef5-7f652d84cb50

Adapters and Plugins

No response

paulpopus commented 2 months ago

So you're right that there's a few ways to do this however Payload can't really enable LivePreview for you on it's own, you enable it via a Next API route.

In our website template see: https://github.com/payloadcms/payload/blob/beta/templates/website/src/payload/utilities/generatePreviewPath.ts

In your own code see: https://github.com/remarcable/payload-3.0-demo/blob/livepreview-repro/payload.config.ts#L47

In this line, preview is enabled and we're pointing the URL for it to the next preview endpoint which then enables draft mode in nextjs. So you simply need to do the same for livePreview

remarcable commented 2 months ago

@paulpopus Thanks for your response, makes total sense. This was the exact solution I would have thought about, just didn't connect the dots.

Awesome!

github-actions[bot] commented 1 month ago

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.