Rendu

Le rendu côté serveur (SSR), est la capacité qu'une application a à générer une page web sur le serveur au lieu de la générer dans le navigateur. Le rendu côté serveur renvoie une page complète au client; le JavaScript côté client prend ensuite le relais et permet à Vue.js d'hydrater notre application.

Serveur Node.js requis

Un environnement JavaScript est requis pour rendre notre page web.

Un serveur Node.js a besoin d'être configuré pour exécuter notre application Vue.js.

Contrôler et étendre les possibilités de notre serveur

Nous pouvons étendre les possibilités de notre serveur avec serverMiddleware et contrôler les routes avec middleware.

export default function (req, res, next) {
  console.log(req.url)
  next()
}

export default {
  serverMiddleware: ['~/server-middleware/logger']
}

Différence entre serveur et navigateur

Comme nous sommes dans un environnement Node.js nous avons accès aux objets Node.js tels que req et res. Nous n'avons pas accès aux objets window ou document vu qu'ils appartiennent au navigateur. Nous pouvons cependant utiliser window ou document en les utilisant dans les hooks beforeMount ou mounted.

beforeMount{
  window.alert('hello');
}
mounted{
  window.alert('hello');
}

Les étapes pour faire du rendu côté serveur avec Nuxt

Étape 1: Du navigateur au serveur

Quand le navigateur envoie la requête initiale, cela va atterir sur le serveur Node.js. Nuxt va alors générer le HTML et le renvoyer au navigateur en prenant en compte le résultat des functions telles que asyncData, nuxtServerInit ou fetch. Les fonctions présentes dans les hooks seront aussi exécutées.

Étape 2: Du serveur au navigateur

Le navigateur reçoit la page avec le HTML généré depuis le serveur. Le contenu est affiché et l'hydratation de Vue.js entre en scène, rendant le tout réactif. Après ce processus, la page est intéractive.

Étape 3: Du navigateur au navigateur

Naviguer entre les pages à l'aide de <NuxtLink> est fait du côté client afin que nous n'ayons pas besoin de faire une requête au serveur, sauf si nous faisons un rafraîchissement manuel de notre navigateur.