SSR avec Nuxt.js : Comment ça marche ?
SSR avec Nuxt.js : Comment ça marche ?
Depuis 2005, le terme Single Page Application (SPA) est monté en puissance au sein de la communauté frontend.
L’objectif de la SPA est d’éviter le chargement de page durant la navigation et ainsi d’améliorer l’expérience utilisateur.
La page est donc générée à l’aide de requêtes AJAX afin de récupérer les données, et modifier le DOM.
Le principal inconvénient de la SPA est que la page servie par le serveur est vide, ce qui est très mauvais pour le référencement (SEO).
Dans une application SPA classique, le serveur envoie une page index.html vide qui sera mise à jour par le client.
Le SSR à la rescousse …
Dans une application universelle: Le serveur envoie une page index.html pré-rendue au client grâce au SSR.
Le crawler de Google va charger toutes les pages de notre application, qui seront pré-rendues (donc avec du contenu), ce qui améliorera leur référencement.
Et Nuxt.js dans tout ça ?
Il existe un guide officiel de Vue.js spécifiant les bonnes pratiques pour réaliser du SSR (https://fr.vuejs.org/v2/guide/ssr.html).
Ce guide recommande néanmoins d’utiliser Nuxt.js car la mise en place du SSR se révèle fastidieux et intimidant.
Configurer proprement tous les aspects dont nous avons discuté pour un rendu côté serveur prêt pour la production peut être intimidant. Fort heureusement, il y a un excellent projet communautaire dont le but est de rendre tout cela plus simple : Nuxt.js. […] Nous vous recommandons grandement de l’essayer.
Guide SSR de Vue.js
Il existe deux méthodes permettant d’effectuer le pré-rendu côté serveur :
- asyncData : Elle est exactement comme la méthode data, sauf que celle-ci s’exécutera sur le serveur et permettra de faire le pré-rendu en SSR.
- fetch : Elle permet tout comme la méthode asyncData d’effectuer du pré-rendu en SSR, mais aussi de mettre à jour le store vuex de l’application.
Nuxt.js nous évite grâce à ces deux méthodes pas mal de tracas.
Pour en savoir plus, découvrez Nuxt.js: le framework qui rend la vie facile.
