Question

Live preview with NextJS SSR

  • 24 November 2023
  • 1 reply
  • 179 views
M

https://www.contentstack.com/docs/developers/set-up-live-preview/set-up-live-preview-with-rest-for-server-side-rendering

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

  1. add management token, add enable: true, specify host – this part is straightforward and does not require clarifications
  2. call init() to ….. init some magic? 
  3. 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.

1 reply

Victor Monsch
Rank

Hi @MaksymDryha ,

 

Below are some explanations that will hopefully help.

To understand exactly how Live Preview works, feel free to visit our How Live Preview works with SDK documentation page.

 

1. Message "You are currently previewing a different webpage. To go back, open the webpage that corresponds to the current entry."

When the URL we receive from you differs from the current URL loaded in the live preview panel, we display this warning. This can occur in two scenarios.
  a. When a user clicks on a link on a website that changes the URL of the live preview
  b. The website automatically redirected to another URL.
So we show this message to inform you that the live preview may behave differently because the URL is different.

 

2. call init() 

We use the "init" function to initialize the live preview SDK and execute various steps to display the entry's draft data. Live preview SDK acts as a bridge between the Contentstack app ( app.contentstack.com ) and the Contentstack Javascript SDK (which you added to your website to gather data from Contentstack). As a result, this step is required to appropriately perform the duty of mediator. To get more info on this please check our Live preview SDK documentation

 

3. 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?

This phase is only for Live preview SSR mode, and it involves passing the live preview hash, content type UID, and entry UID to Stack. Manually invoke the livePreviewQuery method. This step is necessary for two reasons.

1. The Contentstack SDK is informed that the next data retrieval request will be for draft data.

2. The Contentstack SDK will include a live preview hash, a content type UID, and an entry UID to appropriately retrieve draft data.

 

Let us know if you have other questions, or feel free to contact support by clicking on the question mark in the top right when logged into Contentstack.

Reply


Terms & ConditionsCookie settings