S’il y a bien un aspect que de nombreux développeurs détestent avec Vue.JS, c’est la gestion du rendu côté serveur (ou Server side rendering).

Si vous vous souciez du référencement de votre site, plusieurs solutions s’offrent à vous :

  • Le rendu côté serveur (c’est ce que nous allons faire avec NuxtJs framework) ;
  • Le prérendu (pour générer des fichiers HTML statiques au moment du développement de votre site web).

Il existe déjà une excellente documentation sur le rendu côté serveur de Vue JS, que vous pouvez consulter notamment ici. Mais si vous débutez en la matière, cela reste assez compliqué à comprendre et appliquer.

Raison de plus pour passer par NuxtJs Framework pour le server side rendering et optimiser le référencement de son site web. Voici comment procéder, étape par étape.

Configurer NuxtJs Framework

Passons en revue les étapes pour configurer NuxtJs Framework.

Tout d’abord, vous devez avoir installé vue-cli et node.

Après cela, les commandes sont assez simples.

vue init nuxt/starter nuxtmedium (appuyez simplement sur entrée pour toutes les questions)

cd nuxtmedium

npm install

npm run dev

Vous venez de créer votre premier projet NuxtJs Framework. Toutes les dépendances sont installées et il s’exécutera sur http://localhost:3000n

Les différences en matière de routage

Le routage dans NuxtJs Framework est un peu différent. En effet, il est généré automatiquement en fonction de votre arborescence dans le dossier pages.

Pour commencer, créons deux routes. Dans le dossier des pages, nous allons créer deux dossiers et chaque dossier aura un fichier index.vue.

Vos fichiers vue doivent commencer par un « i » minuscule.

NuxtJs Framework va maintenant pouvoir lire cette arborescence et crée deux routes, /about et /contact.

Ajoutons d’abord du contenu dans le fichier à propos de index.vue.

<template>

<div>

<h1>About page</h1>

</div>

</template>

Ensuite, faisons la même chose pour le fichier contact.

<template>

<div>

<h1>Contact page</h1>

</div>

</template>

Vous pouvez maintenant visionner vos deux routes sur http://localhost:3000/contact et http://localhost:3000/about

C’est un bon début… Et maintenant ? Comment optimiser le référencement avec NuxtJs Framework ?

Optimiser le référencement avec NuxtJs Framework

Dans NuxtJs Framework, tout ce que vous avez à faire pour optimiser le référencement d’une page est d’inclure l’option head dans votre script.

Ainsi, pour la page About, cela donnera quelque chose comme ceci :

<script>

export default {

head: {

title: ‘This is the about page’,

meta: [

{

hid: ‘description’,

name: ‘description’,

content: ‘My about page’

}

]

}

}

</script>

Le fichier index.vue final pour la page About est celui-ci :

<template>

<div>

<h1>About page</h1>

</div>

</template>

<script>

export default {

head: {

title: ‘This is the about page’,

meta: [

{

hid: ‘description’,

name: ‘description’,

content: ‘My about page’

}

]

}

}

</script>

Et celui-ci pour la page contact :

<modèle>

<template>

<div>

<h1>Contact page</h1>

</div>

</template>

<script>

export default {

head: {

title: ‘This is the contact page’,

meta: [

{

hid: ‘description’,

name: ‘description’,

content: ‘My contact page’

}

]

}

}

</script>

Désormais, si vous ouvrez les pages contact et about (à propos), vous pouvez voir le titre changer. Si vous vérifiez le code source, vous remarquerez également la balise méta pour la description.

Grâce à NuxtJs Framework, votre référencement est à nouveau au point.

Si vous obtenez des erreurs eslint dues à l’espacement dans votre code, vous pouvez le désactiver en ouvrant nuxt.config.js et commenter le code if dans la fonction extend.

extend (config, ctx) {

/*

if (ctx.dev && ctx.isClient) {

config.module.rules.push({

enforce: ‘pre’,

test: /.(js|vue)$/,

loader: ‘eslint-loader’,

exclude: /(node_modules)/

})

}

*/

}

NuxtJs Framework est-il uniquement destiné au rendu côté serveur et au référencement ?

Vous disposez de plusieurs options pour gérer le rendu côté serveur et le référencement dans Vue.JS. NuxtJs Framework ne se limite donc pas à cela. Il peut même faire beaucoup plus !

Tout d’abord, ce framework vous fournit une meilleure structure de dossiers pour démarrer votre projet.

Le routage peut-être un peu compliqué à appréhender au début, mais une fois que vous aurez pris vos marques, vous pourrez apprécier pleinement sa puissance.

Mais là où NuxtJs Framework se démarque clairement, c’est grâce à une autre option de déploiement appelée Nuxt generate. Elle vous permettra de développer une application Vue.js générée statiquement.

Certaines des fonctionnalités répertoriées dans leur documentation sont les suivantes :

  • Écrire des fichiers Vue
  • Fractionnement automatique du code
  • Rendu côté serveur
  • Système de routage puissant avec données asynchrones
  • Service de fichiers statiques
  • Transpilation ES6/ES7
  • Regroupement et minification de votre JS & CSS
  • Gestion de l’élément <head> (titre, meta…)
  • Remplacement de module à chaud en développement
  • Préprocesseur : SASS, LESS, Stylus, etc.
  • En-têtes push HTTP/2 prêts
  • Extension avec l’architecture modulaire

Lorsque vous voudrez créer une application Vue.js, assurez-vous d’utiliser NuxtJs Framework… Besoin d’aide pour mener à bien votre projet ?Notre équipe est là pour vous accompagner !

Tous
Business
Jamstack
NodeJS
React Native
Développement Web & Mobile
Flutter
Mobile
Python
Strapi
Wordpress
UX/UI Design
Headless
Process business
Outils

Articles de la même catégorie

Refonte de site internet : améliorer son tunnel de conversion

5 conseils pour augmenter son taux de conversion lors de la refonte de votre site internet

Découvrez nos 5 conseils pratiques à appliquer lors de la refonte de votre site web pour augmenter votre taux de conversion !...
Express JS

Express JS : tout ce que vous devez savoir

Découvrez Express JS, le framework basé sur Node.js pour construire des backend puissants....
Angular vs React : que choisir ?

Angular vs React : que choisir pour votre entreprise ?

Vous hésitez entre Angular vs React pour développer votre site web d'entreprise ? Découvrez notre comparatif !...