Context ID を利用して Live および Preview のサイトを Vercel で展開する方法を以前紹介をしました。今回は、この Preview の動作を少し確認していきます。
Live と Preview の違い
同じサイトに対して Live と Preview の Context ID が割り振られる形ですが、利用するデータに関しての違いは以下のようになります。
- Live : Experience Edge に対して公開済（Publish済）のコンテンツ
- Preview: 下書き、承認待ちなどの公開前のコンテンツ
今回はこの Preview での動作確認をする形です。
ページを編集する
すでに公開済の Live のページのイメージは以下のような形です。
今回はテキスト及び画像を Pages で以下のように変更します。
- 最初の文章に Preview という文字を追加
- 画像を別のものに変更
変更結果は以下のようになります。
Preview ページの確認
では実際にプレビューの画面を確認します。今回はページを更新しただけのため、ページに対して再読み込みを実行すると Next.js の ISR が動作してページが更新されます。変更をしたデータが反映されていることがわかります。
ソースコードを確認すると、画像に関しては CMS が持っているデータをプレビューで表示するようになっており、Experience Edge で公開されていないことも確認できました。
まとめ
画像に関して、CMS のサーバーからデータを取得して表示しているのがわかりました。これにより、公開前の画像に関して、プレビューサイトで見えるようになっている仕組みを確認することができました。