Cycles de vie de Nuxt

Peu importe l'outil que nous utilisons, nous serons davantage en confiance lorsque nous serons capable de comprendre comment il marche dans les détails. Il en est de même pour Nuxt. Le but de ce chapitre est de nous donner une vue d'ensemble des différentes parties du framework, leur ordre d'exécution ainsi que la façon dont ils intéragissent entre eux.

Le cycle de vie de Nuxt décrit les différentes étapes qui ont lieu après la phase de build, une fois que notre application a été bundlée, chunkée et minifiée. Ce qu'il se passe après cette phase dépend de si nous avons activé le rendu côté serveur ou pas. Si c'est le cas, il faut ensuite regarder le type de rendu serveur que nous avons choisi:

Rendu dynamique côté serveur (SSR) (nuxt start)

ou Génération statique de site (SSG) (nuxt generate).

Cycle de vie

Serveur

Pour le SSR, les étapes suivantes seront exécutées pour chaque requête sur notre app

• Le serveur démarre (nuxt start)

Lorsque nous utilisons la génération statique de notre site, les étapes qui ont lieu sur le serveur ne seront exécutées que lors de la phase de build et une fois pour chaque page générée.

• Le processus de génération commence (nuxt generate)
• Hooks Nuxt
• serverMiddleware
• Les plugins de Nuxt côté serveur
  • en suivant l'ordre défini dans nuxt.config.js
• nuxtServerInit
  • action Vuex qui est appelée seulement côté serveur pour pré-remplir le store
  • le premier argument dans le context de Vuex, le second argument dans le context de Nuxt
    • on dispatch les autres actions d'ici → c'est seulement le "point d'entrée" pour des actions ultérieures du côté serveur
  • peut seulement être défini dans le store/index.js
• Middleware
  • Global middleware
  • Layout middleware
  • Route middleware
• asyncData
• beforeCreate (cycle de vie de Vue)
• created (cycle de vie de Vue)
• Le nouveau fetch (du haut vers le bas, en parallèle si ce sont des voisins)
• Sérialisation du state (hook render:routeContext de Nuxt)
• le rendu HTML commence (hook render:route de Nuxt)
• render:routeDone hook quand le HTML a été envoyé au navigateur
• generate:before hook de Nuxt
• les fichiers HTML sont générés
  • génération intégralement statique
    • ex. les payloads statiques sont extraits
  • generate:page (HTML éditable)
  • generate:routeCreated (Route générée)
• generate:done quand tous les fichiers HTML ont été générés

Client

Cette partie du cycle est entièrement exécutée dans le navigateur, peu importe le mode que nous avons choisi pour Nuxt.

• Reçoit le HTML
• Charge les ressources (ex. Javascript)
• Hydratation de Vue
• Middleware
  • Global middleware
  • Layout middleware
  • Route middleware
• asyncData (bloquant)
• plugins clients de Nuxt
  • en suivant l'ordre défini dans nuxt.config.js
• beforeCreate (méthode du cycle de vie de Vue)
• created (méthode du cycle de vie de Vue)
• Le nouveau fetch (du haut vers le bas, en parallèle si ce sont des voisins)
• beforeMount (méthode du cycle de vie de Vue)
• mounted (méthode du cycle de vie de Vue)

Naviguer en utilisant le composant NuxtLink

De la même façon que pour la partie client, tout se passe dans le navigateur mais seulement lors d'une navigation avec <NuxtLink>. De plus, aucun contenu n'est affiché sur la page tant qu'il reste des tâches bloquantes.

• middleware (bloquant)
  • Global middleware
  • Layout middleware
  • Route middleware
• asyncData (bloquant)
• asyncData (bloquant) ou chargement entièrement statique du payload
• beforeCreate & created (méthode du cycle de vie de Vue)
• fetch (non-bloquant)
• beforeMount & mounted

Ensuite ?