We have previously introduced how to deploy Live and Preview sites in Vercel using Context ID. In this article, we will check a little how this Preview works.
Difference between Live and Preview
Live and Preview Context IDs are assigned to the same site, but the differences in the data used are as follows.
- Live : Content that has already been published to Experience Edge
- Preview: Pre-published content such as drafts, awaiting approval, etc.
This time, we are going to check the operation in this preview.
Edit page
The image of the already published Live page looks like this
This time, the text and images will be changed in Pages as follows.
- Add the word Preview to the first sentence
- Change image to another one
The result of the change is as follows
Check the Preview page
Now let's check the actual preview screen. In this case, since the page has just been updated, when the page is reloaded, Next.js' ISR is activated and the page is updated. You can see that the changed data is reflected.
Checking the source code, I could also confirm that as far as images are concerned, the data that the CMS has is displayed in the preview, and not published by Experience Edge.
Summary
We could see that the images were retrieved from the CMS server and displayed. This allowed us to confirm the mechanism by which the images were visible on the preview site prior to publication.