プレビューモード

プレビューモードを使った静的ホスティング向けのライブプレビュー

Nuxt とフルスタティックモジュールを使うことで、API や CMS を呼び出すライブプレビューをすぐに利用することができます。そして、デプロイする前に変化を確認することができます。

内部では $nuxt.refresh を使っており、クライアントサイドで nuxtServerInit や asyncData、fetch を呼び出しているため、プレビューモードでは自動的にページのデータが更新されます。

ライブプレビューを有効化するためには、次のプラグインを追加する必要があります：

export default function ({ query, enablePreview }) {
  if (query.preview) {
    enablePreview()
  }
}

export default {
  plugins: ['~/plugins/preview.client.js']
}

一度そのプラグインを追加すれば、すぐにサイトを生成し配信することができます。

yarn generate
yarn start

npx nuxt generate
npx nuxt start

そして以下のクエリパラメータを確認したいページの最後に追加することでプレビューを見ることができます：

?preview=true

まだ生成されていないページをプレビューする場合

まだ生成されていないページは API 上に存在しますが静的なページとして生成されてはいないため、SPA フォールバックは 404 ページを表示する前に API を呼び出します。

もし validate フックを設定している場合、プレビューモードで 404 ページへリダイレクトしないように validate フックを修正する必要があるでしょう。

validate({ params, query }) {
  if (query.preview) {
    return true
}

enablePreview にデータを渡す場合

enablePreview 関数にデータを渡すことができます。 そのデータは $preview コンテキストヘルパーと this.$preview で利用できます。

この次は？