Mode de prévisualisation

Avec Nuxt et une génération axée sur de l'intégralement statique, nous pouvons maintenant utiliser la prévisualisation en temps réel, sans configuration additionnelle. Cela nous permettra d'appeler notre API ou notre CMS afin que nous puissions voir les changements avant de déployer.

Le mode de prévisualisation va s'occuper de rafraîchir automatiquement la data de la page vu qu'il utilise $nuxt.refresh (et donc fait les appels de nuxtServerInit, asyncData et fetch) du côté client.

Pour activer la prévisualisation en temps réel, il faudra ajouter le plugin suivant:

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

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

Une fois que l'on a ajouté le plugin, on peut maintenant générer et servir notre site.

yarn generate
yarn start

npm run generate
npm run start

Nous pouvons maintenant voir la page de prévisualisation en ajoutant une query param à la fin de la page qui nous intéresse:

?preview=true

Prévisualiser les pages qui ne sont pas encore générées

Pour les pages qui ne sont pas encore générées, la solution de rechange de la SPA va continuer de s'occuper de faire un appel à l'API avant de montrer une page 404 vu que ces pages existent sur l'API mais ne sont pas encore générées.

Si nous avons configuré un crochet de validation (webhook), on aura sans doute besoin de le modifier afin d'accommoder le fait qu'il ne redirige plus vers une 404 en mode de prévisualisation.

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

Passer la data à enablePreview

On peut passer de la data à la fonction enablePreview. La data sera ainsi disponible sur le helper de contexte $preview et sur this.$preview.

Et ensuite ?