{"id":47486,"date":"2021-08-04T16:00:27","date_gmt":"2021-08-04T14:00:27","guid":{"rendered":"https:\/\/kinsta.com\/?p=98454"},"modified":"2023-08-22T14:42:22","modified_gmt":"2023-08-22T13:42:22","slug":"vue-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/","title":{"rendered":"10 choses \u00e0 savoir sur le framework frontend Vue.js"},"content":{"rendered":"

Avec l’essor continu des frameworks frontends JavaScript<\/a>, dont le nouveau Vue.js 3, il est devenu vital de les suivre et de comprendre toutes leurs nouvelles fonctionnalit\u00e9s.<\/p>\n

Dans cet article, nous allons explorer Vue.js 3 et ses nouvelles fonctionnalit\u00e9s<\/a>. Ces derniers ajouts rendent Vue.js encore plus robuste, ce qui en fait un excellent framework \u00e0 envisager pour votre prochain projet. Vous apprendrez en d\u00e9tail 10 choses que vous devez savoir sur Vue.js et comment il vous aidera \u00e0 fournir des applications frontend \u00e9volutives et performantes.<\/p>\n

Pr\u00eat ? C’est parti !<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Qu’est-ce que Vue.js ?<\/h2>\n

Selon Evan You, le cr\u00e9ateur de Vue.js :<\/p>\n

\u00ab\u00a0Vue.js est une solution plus flexible, moins opini\u00e2tre. Ce n’est qu’une couche d’interface, donc vous pouvez l’utiliser comme une fonctionnalit\u00e9 l\u00e9g\u00e8re dans les pages plut\u00f4t que comme un SPA complet.\u00a0\u00bb<\/em><\/p><\/blockquote>\n

Il souhaitait cr\u00e9er un framework frontend aussi puissant qu’Angular<\/a>, mais \u00e9galement plus \u00ab\u00a0l\u00e9ger\u00a0\u00bb et plus flexible, sans toutes les extensions et concepts inutiles qui accompagnent Angular.<\/p>\n

Le r\u00e9sultat est Vue.js, qui est l’un des framework frontend les plus populaires utilis\u00e9s aujourd’hui..<\/p>\n

\"Vue.js
Vue.js est le deuxi\u00e8me framework fronend le plus populaire. (Source: State of JS 2020<\/a>)<\/figcaption><\/figure>\n\n

Pourquoi les d\u00e9veloppeurs utilisent Vue.js<\/h2>\n

Diff\u00e9rentes raisons poussent un d\u00e9veloppeur<\/a> \u00e0 utiliser une technologie particuli\u00e8re. Voyons pourquoi nous pensons que vous devriez apprendre Vue.js.<\/p>\n

Pour commencer, Vue.js est l’un des frameworks les plus simples \u00e0 utiliser pour la plupart des d\u00e9veloppeurs, car il utilise JavaScript. Par cons\u00e9quent, toute personne ayant des connaissances de base en JavaScript sera en mesure de d\u00e9velopper avec Vue.js.<\/p>\n

L’outil Vue CLI combin\u00e9 \u00e0 d’autres outils de d\u00e9veloppement<\/a> frontend fait de la configuration de Vue.js un jeu d’enfant. Il est configur\u00e9 par d\u00e9faut avec certaines fonctionnalit\u00e9s, mais vous pouvez \u00e9galement cr\u00e9er du code avec une logique et une structure DRY (Don’t Repeat Yourself).<\/p>\n

La r\u00e9activit\u00e9 est \u00e9galement int\u00e9gr\u00e9e \u00e0 Vue.js. Cela signifie que la fonctionnalit\u00e9 en temps r\u00e9el qui \u00e9tait populaire sur le framework Angular est un jeu d’enfant avec Vue.js. Par exemple, vous pouvez facilement appliquer une simple directive telle que v-if<\/code> dans votre application Vue.js.<\/p>\n

Ensuite, examinons les principaux avantages et inconv\u00e9nients de Vue.js.<\/p>\n

Avantages et inconv\u00e9nients de Vue.js<\/h2>\n

Vue.js est le deuxi\u00e8me framework le plus populaire utilis\u00e9 aujourd’hui. Voyons ce qui le rend populaire aupr\u00e8s des d\u00e9veloppeurs web et ce qui les en \u00e9loigne.<\/p>\n

Les avantages de Vue.js<\/h3>\n

Nous allons commencer par explorer les aspects positifs de Vue.js.<\/p>\n

Petite taille<\/h4>\n

Vue.js a une tr\u00e8s petite taille d’environ 18 Ko, ce qui est excellent par rapport \u00e0 d’autres frameworks de grande taille. Cependant, avec cette taille, Vue.js aura un impact positif sur le SEO et l’UX de votre application frontend<\/a>.<\/p>\n

Composant \u00e0 fichier unique et lisibilit\u00e9<\/h4>\n

Vue.js utilise une architecture bas\u00e9e sur les composants, s\u00e9parant ainsi les gros morceaux de code en composants plus petits. En outre, dans Vue.js, tout est un composant, et chaque composant est \u00e9crit avec du HTML, du CSS et du JavaScript, ce qui favorise la lisibilit\u00e9 et la simplicit\u00e9.<\/p>\n

Syst\u00e8me d’outillage solide<\/h4>\n

Vue.js prend en charge un grand nombre d’outils de d\u00e9veloppement frontend d\u00e8s le d\u00e9part, avec peu ou pas de configuration de votre part. Par exemple, Vue.js prend en charge des outils tels que Babel et Webpack<\/a>. En outre, il fournit des tests unitaires, des biblioth\u00e8ques de tests de bout en bout, des syst\u00e8mes de routage flexibles et faciles \u00e0 utiliser, des gestionnaires d’\u00e9tat, un rendu c\u00f4t\u00e9 serveur (SSR), etc.<\/p>\n

Facile \u00e0 utiliser<\/h4>\n

Si vous avez d\u00e9j\u00e0 utilis\u00e9 Vue.js, vous conviendrez qu’il est tr\u00e8s facile \u00e0 utiliser. Il modernise l’approche habituelle du d\u00e9veloppement web, ce qui permet \u00e0 n’importe quel d\u00e9butant de s’y mettre directement et de se sentir \u00e0 l’aise en quelques pratiques seulement.<\/p>\n

Les inconv\u00e9nients de Vue.js<\/h3>\n

Maintenant que nous avons fait le tour des avantages, explorons les inconv\u00e9nients de Vue.js.<\/p>\n

Complexit\u00e9 de r\u00e9activit\u00e9<\/h4>\n

La mise en \u0153uvre de la liaison bidirectionnelle dans Vue.js est un outil pratique pour g\u00e9rer les composants Vue.js. La liaison bidirectionnelle fait r\u00e9f\u00e9rence au partage de donn\u00e9es entre une classe de composant et son mod\u00e8le, elle est d\u00e9velopp\u00e9e de telle sorte que si les donn\u00e9es changent \u00e0 un endroit, elles mettent automatiquement \u00e0 jour les autres.<\/p>\n

Cependant, il y a un probl\u00e8me concernant le fonctionnement de la r\u00e9activit\u00e9. Le syst\u00e8me de r\u00e9activit\u00e9 ne restitue que les morceaux de donn\u00e9es d\u00e9clench\u00e9s. Parfois, il y a des erreurs lors de la lecture des donn\u00e9es, ce qui n\u00e9cessite de les aplatir. Vous pouvez prendre connaissance de ce probl\u00e8me connu et de la mani\u00e8re dont il est r\u00e9solu sur le site de Vue.js<\/a>.<\/p>\n

Barri\u00e8re linguistique<\/h4>\n

Au d\u00e9part, Vue.js a \u00e9t\u00e9 adopt\u00e9 principalement par les Chinois, de grandes entreprises telles que Xiaomi et Alibaba ayant contribu\u00e9 \u00e0 populariser le framework et \u00e0 cr\u00e9er une demande sur le march\u00e9 du travail. Cependant, avec l’adoption significative de nombreuses entreprises chinoises, beaucoup de forums, de canaux de discussion et autres \u00e9taient principalement en chinois, ce qui rendait l’adoption difficile pour les d\u00e9veloppeurs non natifs.<\/p>\n

Aujourd’hui, ce n’est plus le cas, car Vue.js a \u00e9volu\u00e9 pour int\u00e9grer la prise en charge de nombreuses langues<\/a>, mais certaines langues sont moins bien prises en charge que d’autres.<\/span><\/p>\n

Risques de sur-flexibilit\u00e9<\/h4>\n

Comme indiqu\u00e9 ci-dessus, Vue.js est tr\u00e8s souple et facile \u00e0 utiliser. Par cons\u00e9quent, il est facile d’avoir beaucoup de code spaghetti partout, car chacun dans une \u00e9quipe d’entreprise peut avoir des opinions diff\u00e9rentes sur la fa\u00e7on de faire les choses.<\/p>\n

Parmi les avantages et les inconv\u00e9nients de Vue.js \u00e9voqu\u00e9s ci-dessus, vous avez peut-\u00eatre d\u00e9j\u00e0 rep\u00e9r\u00e9 des fonctionnalit\u00e9s que vous aimez et d’autres qui ne vous conviennent pas.<\/p>\n

10 choses \u00e0 savoir sur Vue.js<\/h2>\n

Vous trouverez ci-dessous les dix choses que vous devez savoir sur Vue.js et pourquoi il est essentiel de les conna\u00eetre.<\/p>\n

Propri\u00e9t\u00e9s calcul\u00e9es<\/h3>\n

Une propri\u00e9t\u00e9 calcul\u00e9e est l’une des fonctionnalit\u00e9s les plus utilis\u00e9es dans Vue.js. Une propri\u00e9t\u00e9 calcul\u00e9e vous permet de cr\u00e9er des propri\u00e9t\u00e9s qui peuvent \u00eatre modifi\u00e9es, manipul\u00e9es et afficher des donn\u00e9es de mani\u00e8re efficace et lisible.<\/p>\n

Elle s’av\u00e8re pratique lorsque vous souhaitez r\u00e9p\u00e9ter de nombreuses petites m\u00e9thodes pour des choses comme le formatage, la modification de valeurs ou un vaste processus que vous devez d\u00e9clencher dans certaines situations.<\/p>\n

Les propri\u00e9t\u00e9s calcul\u00e9es permettent de supprimer l’exc\u00e8s de logique dans votre mod\u00e8le. Une trop grande quantit\u00e9 de cette logique peut entra\u00eener un gonflement de votre code et le rendre difficile \u00e0 maintenir rapidement.<\/p>\n

En supposant que vous souhaitiez formater une cha\u00eene de caract\u00e8res en majuscules, voici comment vous pourriez proc\u00e9der :
\n<\/span><\/p>\n

<template>\n  <div>\n    <p> I love {{ value.toUpperCase() }} <\/p>\n  <\/div>\n<\/template>\n<\/code><\/pre>\n
Que se passe-t-il si vous devez changer la variable de value<\/code> \u00e0 50 endroits diff\u00e9rents ? Eh bien, les propri\u00e9t\u00e9s calcul\u00e9es<\/a> sont l\u00e0 pour vous aider :<\/p>\n
<template>\n  <div>\n    <p> I love {{ value }} <\/p>\n  <\/div>\n<\/template>\n<script>\n  export default {\n    computed:{\n      value(){\n        return this.value.toUpperCase()\n      }\n    }\n  }\n<\/script><\/code><\/pre>\n
Vous pouvez facilement changer toUpperCase()<\/code> en toLowerCase()<\/code>, et tout se refl\u00e9tera \u00e0 partir d’un seul point.<\/p>\n
Traitement des \u00e9v\u00e9nements<\/h3>\n
Vue.js simplifie la communication entre l’enfant et le parent gr\u00e2ce \u00e0 l’utilisation de $emit<\/code> et v-on<\/code>. Il devient facile et direct de g\u00e9rer la communication entre les hi\u00e9rarchies de composants.<\/p>\n
La fonction $emit<\/code> accepte deux param\u00e8tres : une cha\u00eene de caract\u00e8res pour le nom et une valeur facultative \u00e0 \u00e9mettre.<\/p>\n
v-on:event-name<\/code> est utilis\u00e9 par le composant enfant pour recevoir l’\u00e9v\u00e9nement \u00e9mis par son composant parent :<\/span><\/p>\n
<template>\n  <section>\n    <button @click=\"onClick\">Add <\/button>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  name: \"AddEvent\",\n  methods: {\n    onClick() { \n      this.$emit('add', this.data);\n    }\n  }\n}\n<\/script><\/code><\/pre>\n
Lorsque vous d\u00e9clenchez le bouton Add<\/code>, la m\u00e9thode onClick<\/code> d\u00e9clenche l’\u00e9v\u00e9nement $emit<\/code>, qui \u00e9met l’\u00e9v\u00e9nement add<\/code> vers un composant enfant \u00e0 l’\u00e9coute de l’\u00e9v\u00e9nement add<\/code>.<\/p>\n
Voyons comment \u00e9couter un \u00e9v\u00e9nement :<\/p>\n
<template>\n  <section><\/span>\n  <p v-show=\"showSaveMsg\">This co<\/span>mponent is listening <\/span>to the ADD event<\/p>\n  <;add-<\/span>event v-on:add=\"onAdd\"><\/add-event>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  data(){\n    return {\n      showSaveMsg: false\n    }\n  },\n  components:{\n    AddEvent: () => import('.\/AddEvent')\n  },\n  methods: {\n    onAdd() { \n        this.sh<\/span>owSaveMsg = true;\n    }\n  }\n}\n<\/script><\/code><\/pre>\n
Le code ci-dessus \u00e9coute l’\u00e9v\u00e9nement add<\/code> r\u00e9pond en changeant la valeur de showSaveMsg<\/code> en true<\/code>, ce qui affiche \u00e0 nouveau le message.<\/p>\n
Chargement diff\u00e9r\u00e9 \/ Composants asynchrones<\/h3>\n
Le chargement diff\u00e9r\u00e9<\/a> est l’un des meilleurs hacks de performance pour Vue.js, o\u00f9 les composants sont ajout\u00e9s et rendus de mani\u00e8re asynchrone ou \u00e0 la demande, ce qui r\u00e9duit consid\u00e9rablement la taille du fichier, le temps de r\u00e9ponse aux requ\u00eates HTTP, etc.<\/p>\n
Le chargement diff\u00e9r\u00e9 est r\u00e9alis\u00e9 gr\u00e2ce aux importations dynamiques de Webpack, qui prend \u00e9galement en charge le fractionnement du code.<\/p>\n
Vue.js permet le chargement diff\u00e9r\u00e9 des composants et peut \u00eatre r\u00e9alis\u00e9 globalement avec les scripts suivants :<\/span><\/p>\n
import Vue from \"vue\";\nVue.component(\"new-component\", () => import(\".\/components\/NewComponent.vue\"));\n<\/code><\/pre>\n
Vous pouvez le r\u00e9aliser localement avec un composant comme ci-dessous :<\/p>\n
<template>\n  <div>\n    <component><\/component>\n  <\/div>\n<\/template>\n<script>\nexport default {\n  components: {\n    'Component': () => import('.\/Component')\n  }\n}\n<\/script><\/code><\/pre>\n
Composants globaux<\/h3>\n
Nous pouvons obtenir une r\u00e9utilisation importante dans Vue.js avec des composants globaux, o\u00f9 vous enregistrez un composant une fois et l’utilisez ensuite partout dans votre instance Vue.js.<\/p>\n
Les composants globaux sont une fonctionnalit\u00e9 importante qui peut vous faire gagner beaucoup de temps en enregistrant les composants individuellement \u00e0 chaque fois, mais il est facile d’en abuser en enregistrant tous les composants globalement. L’enregistrement de tous les composants de mani\u00e8re globale peut facilement conduire \u00e0 une taille de construction importante, ce qui entra\u00eene un mauvais r\u00e9f\u00e9rencement et un ralentissement du temps de chargement des pages<\/a>.<\/p>\n
Veillez \u00e0 toujours enregistrer les composants globaux qui ont de nombreux cas d’utilisation dans votre projet, comme indiqu\u00e9 ci-dessous :<\/p>\n
import Vue from \"vue\";\nVue.component(\"new-component\", () => import(\".\/componetns\/NewComponent.vue\"));<\/code><\/pre>\n
Composant de fichier unique<\/h3>\n
Les composants sont l’une des fonctions les plus puissantes de Vue.js. Ils vous permettent d’\u00e9tendre les \u00e9l\u00e9ments HTML, CSS et JavaScript essentiels pour encapsuler du code r\u00e9utilisable.<\/p>\n
Les composants peuvent aider \u00e0 d\u00e9composer les grands projets en petits \u00e9l\u00e9ments r\u00e9utilisables que nous pouvons \u00e9tendre \u00e0 l’ensemble du projet, encourageant ainsi le principe DRY (Don’t Repeat Yourself) de l’ing\u00e9nierie logicielle.<\/p>\n
Il peut fournir une organisation et des encapsulations pour les grands projets, un code r\u00e9utilisable, et peut \u00eatre s\u00e9par\u00e9 en fichiers .vue<\/code>.<\/p>\n
<template>\n  <section>\n    <button @click=\"onClick\">Add<\/button>\n  <\/section>\n<\/template>\n\n<script>\nexport default {\n  name: \"CustomButtom\",\n  methods: {\n    onClick() { \n      this.$emit('add', this.data);\n    }\n  }\n}\n<\/script>\n\n<style scoped>\n  button{\n    \/** Button Styles *\/\n  }\n<\/style><\/code><\/pre>\n
Les scripts ci-dessus cr\u00e9ent un composant de bouton personnalis\u00e9 que nous pouvons r\u00e9utiliser dans notre projet. Chaque composant poss\u00e8de son HTML, son CSS et son JavaScript.<\/p>\n
Tests<\/h3>\n
Vue.js fournit l’une des biblioth\u00e8ques de test les plus robustes, faisant des tests unitaires avec Jest et Mocha ou des tests<\/a> de bout en bout un jeu d’enfant avec peu ou pas de configuration.<\/p>\n
Un coup d’\u0153il rapide sur les tests avec ces outils pourrait en valoir la peine pour vous. Nous allons donc explorer l’installation, la configuration et le test d’un projet de d\u00e9monstration ci-dessous.<\/p>\n
Si vous utilisez l’outil CLI Vue recommand\u00e9<\/a> pour configurer votre projet, ex\u00e9cutez les commandes suivantes:<\/span><\/p>\n
vue add unit-jest \/\/to run unit test with jest\n\nnpm install --save-dev @vue\/test-utils\n<\/code><\/pre>\n
Ensuite, apr\u00e8s la configuration, incluez le code ci-dessous, qui d\u00e9montre comment tester un composant simple :<\/p>\n
\/\/ Import the `mount()` method from Vue Test Utils\nimport { mount } from '@vue\/test-utils'\n\n\/\/ The component to test\nconst MessageComponent = {\n  template: '<p>{{ message }}<\/p>',\n  props: ['message']\n}\n\ntest('displays a message', () => {\n  \/\/ mount() returns a wrapped Vue component we can interact with\n  const wrapper = mount(MessageComponent, {\n    propsData: {\n      msg: 'Welcome to our testing world'\n    }\n  })\n\n  \/\/ Assert the rendered text of the component\n  expect(wrapper.text()).toContain('Welcome to our testing world')\n})<\/code><\/pre>\n
La biblioth\u00e8que de tests Vue propose deux excellentes options pour tester vos composants : Mount et Shallow.<\/p>\n
Si vous voulez tester un composant avec une isolation compl\u00e8te, utilisez la m\u00e9thode shallow<\/code>. Sinon, si vous devez travailler sur un composant avec des sous-composants dont vous voulez assurer la communication, l’option mount<\/code> fonctionne tr\u00e8s bien.<\/p>\n
Le puissant outil Vue CLI<\/h3>\n
Vue CLI est un excellent outil CLI<\/a> et donne une bonne dose de pouvoir \u00e0 tout d\u00e9veloppeur Vue. Avec lui, vous pouvez rapidement tester n’importe quel composant de mani\u00e8re isol\u00e9e. Ce qui est g\u00e9nial avec Vue CLI, c’est que vous pouvez d\u00e9velopper enti\u00e8rement un composant de mani\u00e8re isol\u00e9e, le tester, tout en ayant acc\u00e8s au rechargement \u00e0 chaud lorsque vous it\u00e9rez sur ce composant particulier.<\/p>\n
Pour faire la d\u00e9monstration, installons Vue CLI de mani\u00e8re globale :<\/span><\/p>\n
npm install -g @vue\/cli<\/code><\/pre>\n
Ensuite, vous pouvez tester n’importe quel composant en ex\u00e9cutant la commande ci-dessous :<\/p>\n
vue serve .\/components\/views\/Home.vue<\/code><\/pre>\n
Si vous souhaitez extraire un composant particulier pour, par exemple, le partager avec vos coll\u00e8gues, vous pouvez le faire en utilisant la commande ci-dessous :<\/p>\n
vue build --target lib --name goldenRule .\/components\/views\/Home<\/code><\/pre>\n
Vue CLI est tr\u00e8s puissant et peut vous faire gagner \u00e9norm\u00e9ment de temps si vous ma\u00eetrisez l’art de l’utiliser. Si vous voulez en savoir plus, vous pouvez jeter un coup d’\u0153il sur la documentation officielle<\/a>.<\/p>\n
Gestion des propri\u00e9t\u00e9s<\/h3>\n
La gestion des propri\u00e9t\u00e9s est essentielle pour le composant Vue car elles peuvent \u00eatre cr\u00e9\u00e9es de diff\u00e9rentes mani\u00e8res. Vous pouvez \u00e9galement valider les propri\u00e9t\u00e9s, cr\u00e9er plusieurs propri\u00e9t\u00e9s et les modifier si n\u00e9cessaire.<\/p>\n
Pour cr\u00e9er une nouvelle propri\u00e9t\u00e9 dans un composant Vue, vous pouvez le faire de plusieurs mani\u00e8res diff\u00e9rentes. En supposant que vous avez votre composant, vous devez cr\u00e9er la propri\u00e9t\u00e9 isAdmin<\/code>.<\/p>\n
Voyons les diff\u00e9rentes fa\u00e7ons de proc\u00e9der :<\/span><\/p>\n
<template>\n  <section>\n    <component v-if=\"isAdmin\"><\/component>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  name: 'Component',\n\n \/\/ One\n  props: {\n    isAdmin: {\n      type: Boolean,\n      default: false,\n      required: true\n    }\n  },\n \n \/\/ Two\n  props: ['isAdmin'],\n\n \/\/ Three\n  props: {\n    isAdmin: Boolean\n  }\n\n}\n<\/script><\/code><\/pre>\n
La validation de votre propri\u00e9t\u00e9 est tr\u00e8s importante. Heureusement, c’est aussi tr\u00e8s simple :<\/p>\n
\/\/ ...\n\n \/\/ One\n  props: {\n    isAdmin: {\n      default: false,\n      required: true,\n      validator: function(value) {\n        return typeof === 'boolean';\n      }\n    }\n  },\n\n\/\/ ...<\/code><\/pre>\n
Enfin, la modification des propri\u00e9t\u00e9s est aussi simple que le r\u00e9alignement de leurs valeurs :<\/h3>\n
\/\/...\n\nmethods: {\n  isAdmin() {\n    this.isAdmin = true;\n  }\n}\n\n\/\/..\n<\/code><\/pre>\n
Pour attribuer une valeur \u00e0 la propri\u00e9t\u00e9 dans un composant parent :<\/p>\n
<template>\n  <section>\n    <component :isAdmin=\"true\"><\/component>\n  <\/section>\n<\/template><\/code><\/pre>\n
Rendu c\u00f4t\u00e9 serveur (SSR)<\/h3>\n
Malgr\u00e9 toutes les fonctionnalit\u00e9s et les avantages de l’utilisation de Vue.js pour cr\u00e9er des applications frontend, Vue.js reste une biblioth\u00e8que c\u00f4t\u00e9 client qui ne fait que rendre et manipuler les \u00e9l\u00e9ments du DOM.<\/p>\n
Le rendu c\u00f4t\u00e9 serveur aide les frameworks c\u00f4t\u00e9 client tels que Vue.js \u00e0 mieux fonctionner. Les robots d’exploration des moteurs de recherche verront les pages de votre site web enti\u00e8rement rendues lors de l’exploration.<\/p>\n
Pour que votre site web soit index\u00e9<\/a> plus rapidement par Google et Bing, il doit avoir un score plus rapide et plus \u00e9lev\u00e9 de temps de mise \u00e0 disposition du contenu. C’est ce que le rendu c\u00f4t\u00e9 serveur de Vue.js vous aide \u00e0 r\u00e9aliser.<\/p>\n
Le rendu c\u00f4t\u00e9 serveur (SSR) est une technique populaire permettant de rendre une application mono-page (SPA) c\u00f4t\u00e9 client sur le serveur, puis d’envoyer une page enti\u00e8rement rendue au lecteur.<\/p>\n
Lorsque la page est rendue du c\u00f4t\u00e9 du serveur, celui-ci l’envoie au client en tant que r\u00e9ponse. Ainsi, chaque \u00e9l\u00e9ment d’information a d\u00e9j\u00e0 \u00e9t\u00e9 rendu lorsque le navigateur affiche la page du moteur de recherche.<\/p>\n
La r\u00e9alisation de SSR dans Vue.js<\/a> est difficile pour les d\u00e9butants. Il sera plus facile d’utiliser Nuxt.js<\/a>, qui dispose d’un SSR int\u00e9gr\u00e9 et d’une courbe d’apprentissage tr\u00e8s faible..<\/span><\/p>\n
D\u00e9ploiement<\/h3>\n
Vue.js pr\u00e9sente un grand nombre d’avertissements, d’erreurs et de tailles de fichiers gonfl\u00e9es pendant le d\u00e9veloppement, mais ces probl\u00e8mes disparaissent imm\u00e9diatement lorsque vous passez en production pour le d\u00e9ploiement. Vue.js configurera automatiquement les outils de construction Webpack, les minifications<\/a>, l’extraction et la purge des CSS, la mise en cache, le suivi des erreurs d’ex\u00e9cution, etc.<\/p>\n
Les clients de Kinsta<\/a> peuvent envisager d’utiliser la fonction int\u00e9gr\u00e9e de minification du code<\/a> \u00e0 laquelle ils peuvent acc\u00e9der directement dans le tableau de bord MyKinsta<\/a>. Cela leur permet d’activer facilement la minification automatique de CSS et JavaScript d’un simple clic.<\/p>\n
Vue.js facilite le processus de d\u00e9ploiement en configurant et en param\u00e9trant automatiquement l’environnement de production sans aucune \u00e9tape suppl\u00e9mentaire de la part du d\u00e9veloppeur.<\/p>\n
Pour d\u00e9ployer votre application Vue.js<\/a>, vous pouvez consulter ses guides g\u00e9n\u00e9raux.<\/p>\n\n
R\u00e9sum\u00e9<\/h2>\n
Dans cet article, nous avons explor\u00e9 en d\u00e9tail ce qu’est Vue.js, pourquoi vous devriez l’utiliser, ses avantages et ses inconv\u00e9nients, et les 10 choses que vous devriez savoir \u00e0 son sujet.<\/p>\n
Nous esp\u00e9rons que vous avez approfondi vos connaissances de Vue.js pour cr\u00e9er des applications frontend \u00e9volutives et performantes.<\/p>\n
Continuez \u00e0 coder !<\/p>\n
Si vous avez des questions ou des suggestions, nous sommes impatients de les entendre. Parlez-nous dans la section des commentaires ci-dessous !<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Avec l’essor continu des frameworks frontends JavaScript, dont le nouveau Vue.js 3, il est devenu vital de les suivre et de comprendre toutes leurs nouvelles fonctionnalit\u00e9s. …<\/p>\n","protected":false},"author":193,"featured_media":47518,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[979,980,1016],"class_list":["post-47486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-tutoriel-javascript","topic-vue-js"],"yoast_head":"\n10 choses \u00e0 savoir sur le framework frontend Vue.js<\/title>\n<meta name=\"description\" content=\"D\u00e9couvrez 10 raisons pour lesquelles vous devriez reconsid\u00e9rer Vue.js comme biblioth\u00e8que JS frontend pour votre prochain projet de d\u00e9veloppement web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 choses \u00e0 savoir sur le framework frontend Vue.js\" \/>\n<meta property=\"og:description\" content=\"D\u00e9couvrez 10 raisons pour lesquelles vous devriez reconsid\u00e9rer Vue.js comme biblioth\u00e8que JS frontend pour votre prochain projet de d\u00e9veloppement web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-04T14:00:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T13:42:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/08\/vue-js.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Solomon Eseme\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"D\u00e9couvrez 10 raisons pour lesquelles vous devriez reconsid\u00e9rer Vue.js comme biblioth\u00e8que JS frontend pour votre prochain projet de d\u00e9veloppement web.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/08\/vue-js.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kaperskyguru\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solomon Eseme\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"10 choses \u00e0 savoir sur le framework frontend Vue.js\",\"datePublished\":\"2021-08-04T14:00:27+00:00\",\"dateModified\":\"2023-08-22T13:42:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/\"},\"wordCount\":2788,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/08\/vue-js.jpeg\",\"articleSection\":[\"Non class\u00e9s\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/\",\"name\":\"10 choses \u00e0 savoir sur le framework frontend Vue.js\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/08\/vue-js.jpeg\",\"datePublished\":\"2021-08-04T14:00:27+00:00\",\"dateModified\":\"2023-08-22T13:42:22+00:00\",\"description\":\"D\u00e9couvrez 10 raisons pour lesquelles vous devriez reconsid\u00e9rer Vue.js comme biblioth\u00e8que JS frontend pour votre prochain projet de d\u00e9veloppement web.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/08\/vue-js.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/08\/vue-js.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/vue-js\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"10 choses \u00e0 savoir sur le framework frontend Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\",\"name\":\"Solomon Eseme\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"caption\":\"Solomon Eseme\"},\"description\":\"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me\",\"sameAs\":[\"https:\/\/masteringbackend.com\",\"https:\/\/linkedin.com\/in\/solomoneseme\",\"https:\/\/x.com\/kaperskyguru\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/solomoneseme\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 choses \u00e0 savoir sur le framework frontend Vue.js","description":"D\u00e9couvrez 10 raisons pour lesquelles vous devriez reconsid\u00e9rer Vue.js comme biblioth\u00e8que JS frontend pour votre prochain projet de d\u00e9veloppement web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/","og_locale":"fr_FR","og_type":"article","og_title":"10 choses \u00e0 savoir sur le framework frontend Vue.js","og_description":"D\u00e9couvrez 10 raisons pour lesquelles vous devriez reconsid\u00e9rer Vue.js comme biblioth\u00e8que JS frontend pour votre prochain projet de d\u00e9veloppement web.","og_url":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2021-08-04T14:00:27+00:00","article_modified_time":"2023-08-22T13:42:22+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/08\/vue-js.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"D\u00e9couvrez 10 raisons pour lesquelles vous devriez reconsid\u00e9rer Vue.js comme biblioth\u00e8que JS frontend pour votre prochain projet de d\u00e9veloppement web.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/08\/vue-js.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Solomon Eseme","Dur\u00e9e de lecture estim\u00e9e":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"10 choses \u00e0 savoir sur le framework frontend Vue.js","datePublished":"2021-08-04T14:00:27+00:00","dateModified":"2023-08-22T13:42:22+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/"},"wordCount":2788,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/08\/vue-js.jpeg","articleSection":["Non class\u00e9s"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/vue-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/","url":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/","name":"10 choses \u00e0 savoir sur le framework frontend Vue.js","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/08\/vue-js.jpeg","datePublished":"2021-08-04T14:00:27+00:00","dateModified":"2023-08-22T13:42:22+00:00","description":"D\u00e9couvrez 10 raisons pour lesquelles vous devriez reconsid\u00e9rer Vue.js comme biblioth\u00e8que JS frontend pour votre prochain projet de d\u00e9veloppement web.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/vue-js\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/08\/vue-js.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/08\/vue-js.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/vue-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Vue.js","item":"https:\/\/kinsta.com\/fr\/sujets\/vue-js\/"},{"@type":"ListItem","position":3,"name":"10 choses \u00e0 savoir sur le framework frontend Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2","name":"Solomon Eseme","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","caption":"Solomon Eseme"},"description":"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me","sameAs":["https:\/\/masteringbackend.com","https:\/\/linkedin.com\/in\/solomoneseme","https:\/\/x.com\/kaperskyguru"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/solomoneseme\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/47486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=47486"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/47486\/revisions"}],"predecessor-version":[{"id":59912,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/47486\/revisions\/59912"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47486\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47486\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47486\/translations\/de"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47486\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47486\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47486\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47486\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47486\/translations\/se"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47486\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/47518"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=47486"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=47486"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=47486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}