I completed all the steps listed in this document to setup live preview for our site. When debugging, I see that the live preview hash and content_type_uid are received by the NextJS server. They are then passed by me to the Stack.livePreviewQuery. Now when I try to test live preview, the website is loaded successfully and I get the following message:
You are currently previewing a different webpage. To go back, open the webpage that corresponds to the current entry.
When I make changes to the entry, the website in the preview pane reloads (I see it blinking a bit + the server logs indicate that new requests are made each time I make draft changes to the entity), but it never gets into the “draft” mode.
The thing is that while all these live preview configuration steps seem to be simple, I lack understanding of how exactly live preview works, so I don’t have any idea on what and where to debug now. The guide is basically saying
- add management token, add enable: true, specify host – this part is straightforward and does not require clarifications
- call init() to ….. init some magic?
- add the hash and content_type_uid from the request params to ….. make sure this added fields somehow magically make the page repaint/reload on change?
The guide falls short in providing a comprehensive understanding. I'd be grateful for some help in getting a complete picture of how live preview works and figuring out the meaning behind the error message.