{"id":63004,"date":"2022-11-07T12:03:47","date_gmt":"2022-11-07T11:03:47","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=63004&post_type=knowledgebase&preview_id=63004"},"modified":"2025-10-01T20:44:34","modified_gmt":"2025-10-01T19:44:34","slug":"inertia-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/inertia-js\/","title":{"rendered":"Le guide ultime d’Inertia.js"},"content":{"rendered":"

Les applications monopages (Single-Page Applications ou SPA) sont devenues la mani\u00e8re moderne de cr\u00e9er des applications web, et Inertia.js est un outil de premier plan permettant aux d\u00e9veloppeurs de cr\u00e9er des SPA avec un rendu \u00e0 la fois c\u00f4t\u00e9 client et c\u00f4t\u00e9 serveur.<\/p>\n

Dans cet article, nous verrons comment Inertia fait de la construction de SPA un jeu d’enfant et comment il r\u00e9sout de nombreux autres probl\u00e8mes pour les d\u00e9veloppeurs. Nous couvrirons \u00e9galement les principales fonctionnalit\u00e9s de l’outil.<\/p>\n

Mais avant de commencer, assurons-nous d’abord que nous comprenons le fonctionnement des applications c\u00f4t\u00e9 serveur et c\u00f4t\u00e9 client.<\/p>\n

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

Qu’est-ce que le rendu c\u00f4t\u00e9 serveur ?<\/h2>\n

On parle de rendu c\u00f4t\u00e9 serveur (Server-Side Rendering ou SSR) lorsqu’une application peut rendre ou afficher le contenu d’une page web sur le serveur plut\u00f4t que dans le navigateur. Lorsqu’un utilisateur tente de visiter le site exemple.com<\/strong>, le navigateur envoie une requ\u00eate au serveur demandant toutes les informations n\u00e9cessaires pour afficher cette page web sp\u00e9cifique, et le serveur r\u00e9pond instantan\u00e9ment en fournissant au navigateur une page enti\u00e8rement rendue.<\/p>\n

Les moteurs de recherche interviennent et indexent les informations fournies par le serveur avant qu’elles n’atteignent le navigateur ; c’est ce qu’on appelle l’optimisation des moteurs de recherche (Search Engine Optimization ou SEO). Le navigateur r\u00e9sout ensuite le contenu JavaScript, et la page web s’affiche pour l’utilisateur.<\/p>\n

\"Affichage
Affichage du contenu rendu c\u00f4t\u00e9 serveur.<\/figcaption><\/figure>\n

Le probl\u00e8me de l’approche SSR est qu’il faut beaucoup de temps pour charger une page enti\u00e8rement rendue depuis le serveur, ce qui n’offre pas une exp\u00e9rience utilisateur agr\u00e9able. C’est pourquoi les d\u00e9veloppeurs envisagent les SPA et le rendu c\u00f4t\u00e9 client.<\/p>\n\n

Qu’est-ce que le rendu c\u00f4t\u00e9 client ?<\/h2>\n

Le rendu c\u00f4t\u00e9 client permet au navigateur d’avoir tout ce dont il a besoin pour rendre la page web du c\u00f4t\u00e9 client au lieu de recevoir une page enti\u00e8rement rendue du serveur. Lorsque la page est charg\u00e9e, le navigateur n’envoie pas d’autres requ\u00eates au serveur, ce qui rend l’exp\u00e9rience de navigation extr\u00eamement rapide.<\/p>\n

\"Affichage
Affichage du contenu rendu c\u00f4t\u00e9 client.<\/figcaption><\/figure>\n

Le rendu c\u00f4t\u00e9 client a contribu\u00e9 \u00e0 la cr\u00e9ation des SPA, r\u00e9volutionnant ainsi le web. Vous pouvez cr\u00e9er un site web qui ne n\u00e9cessite pas le rechargement de la page, quel que soit le nombre de liens sur lesquels vous cliquez. Il permet \u00e0 l’utilisateur de naviguer facilement sur le site web.<\/p>\n

Bien que les SPA soient fantastiques, cette approche pr\u00e9sente beaucoup de complexit\u00e9 et de probl\u00e8mes que nous allons aborder aujourd’hui. Inertia r\u00e9sout la majorit\u00e9 de ces probl\u00e8mes en utilisant efficacement les frameworks c\u00f4t\u00e9 serveur. Elle combine les meilleures caract\u00e9ristiques des applications c\u00f4t\u00e9 serveur et c\u00f4t\u00e9 client.<\/p>\n

Qu’est-ce qu’Inertia.js ?<\/h2>\n

Inertia n’est pas un framework JavaScript<\/a>. Il s’agit plut\u00f4t d’une strat\u00e9gie ou d’une technique de d\u00e9veloppement de SPA. Elle permet au d\u00e9veloppeur d’utiliser les frameworks c\u00f4t\u00e9 serveur actuels pour construire un SPA moderne sans la complexit\u00e9 qui l’accompagne.<\/p>\n

Inertia a \u00e9t\u00e9 con\u00e7u pour accompagner, et non remplacer, les frameworks que vous utilisez d\u00e9j\u00e0. Consid\u00e9rez-le comme un alli\u00e9 utile qui vous aide \u00e0 accomplir des t\u00e2ches plus rapidement et plus efficacement. Il prend actuellement en charge trois frameworks frontend (Vue, React et Svelte) pour le rendu c\u00f4t\u00e9 client et deux frameworks backend (Laravel et Rails) pour le rendu c\u00f4t\u00e9 serveur.<\/p>\n

Pour la plupart des d\u00e9veloppeurs Laravel<\/a>, Inertia est l’une des techniques les plus fiables pour construire des SPA puisqu’elle leur permet de connecter \u00e0 la fois les frameworks frontend et backend.<\/p>\n

Comment fonctionne Inertia.js ?<\/h2>\n

Inertia est similaire \u00e0 Vue Router, en ce sens qu’il vous permet de vous d\u00e9placer entre les pages sans avoir \u00e0 recharger la page enti\u00e8re. Toutefois, Inertia fonctionne en synchronisation avec votre framework c\u00f4t\u00e9 serveur. Cela est possible gr\u00e2ce \u00e0 Link<\/code>, une enveloppe pour la balise d’ancrage standard. Lorsqu’on clique sur une Link<\/code>, Inertia intercepte l’\u00e9v\u00e9nement de clic et envoie une requ\u00eate XHR au serveur, ce dernier reconnaissant qu’il s’agit d’une requ\u00eate Inertia et renvoyant une r\u00e9ponse JSON. Cette r\u00e9ponse comprend le nom et les donn\u00e9es du composant JavaScript, apr\u00e8s quoi Inertia supprime comme par magie les composants inutiles et les remplace par ceux n\u00e9cessaires \u00e0 la visite de la nouvelle page et met \u00e0 jour l’\u00e9tat de l’historique.<\/p>\n

Une plong\u00e9e profonde dans la fonctionnalit\u00e9 d’Inertia.js<\/h3>\n

Lorsqu’un visiteur se rend pour la premi\u00e8re fois sur exemple.com<\/strong>, le navigateur effectue une requ\u00eate pleine page standard et le serveur renvoie une r\u00e9ponse HTML compl\u00e8te comme si Inertia n’existait pas. Cette r\u00e9ponse HTML comporte tous les actifs du site (CSS, JavaScript), mais elle contient \u00e9galement une ressource suppl\u00e9mentaire pour Inertia, qui est la racine div<\/code> avec l’attribut data-page<\/code> contenant les donn\u00e9es JSON de la page initiale. Inertia utilise ensuite ces donn\u00e9es JSON pour lancer le framework frontend et afficher la page initiale.<\/p>\n

\"Inertia.js
Inertia.js : R\u00e9ponse \u00e0 la visite de la page initiale.<\/figcaption><\/figure>\n

Une fois l’application d\u00e9marr\u00e9e, chaque route que l’utilisateur visite \u00e0 l’int\u00e9rieur du m\u00eame domaine en utilisant Link<\/code> sera une requ\u00eate XHR avec l’en-t\u00eate X-Inertia<\/code>. Cela indique au serveur qu’il s’agit d’une requ\u00eate Inertia.<\/p>\n

Le retour d’information sera une r\u00e9ponse JSON avec le contenu de la page, plut\u00f4t qu’une r\u00e9ponse HTML compl\u00e8te comme lors de la visite initiale.<\/p>\n

\"Inertia.js
Inertia.js : R\u00e9ponse de la visite ult\u00e9rieure de l’itin\u00e9raire.<\/figcaption><\/figure>\n

Quels probl\u00e8mes Inertia.js r\u00e9sout-il ?<\/h2>\n

Inertia r\u00e9sout un grand nombre de probl\u00e8mes pour les d\u00e9veloppeurs web. Le but de la cr\u00e9ation d’Inertia \u00e9tait de donner des solutions rapides et efficaces \u00e0 toute la complexit\u00e9 qui accompagne la conception d’un SPA.<\/p>\n

Complexit\u00e9s des SPA<\/h3>\n

Si les d\u00e9veloppeurs devaient construire un SPA sans Inertia, ils devraient cr\u00e9er des API REST ou GraphQL et les prot\u00e9ger avec une sorte de m\u00e9thode d’authentification, ce qui n\u00e9cessiterait la cr\u00e9ation d’un syst\u00e8me de gestion d’\u00e9tat frontend, parmi beaucoup d’autres choses.<\/p>\n

Inertia a \u00e9t\u00e9 con\u00e7u pour aider les d\u00e9veloppeurs \u00e0 transformer leurs applications c\u00f4t\u00e9 serveur fonctionnant enti\u00e8rement sur le serveur backend en une application JavaScript \u00e0 page unique sans avoir \u00e0 passer par toutes les complexit\u00e9s qui accompagnent la cr\u00e9ation de SPA.<\/p>\n

Cr\u00e9er une SPA \u00e0 l’aide d’Inertia est similaire \u00e0 la cr\u00e9ation d’une application rendue c\u00f4t\u00e9 serveur. Vous cr\u00e9ez des contr\u00f4leurs, effectuez des requ\u00eates aupr\u00e8s de la base de donn\u00e9es pour obtenir les donn\u00e9es n\u00e9cessaires, puis renvoyez les r\u00e9sultats aux vues.<\/p>\n

La cl\u00e9 ici est que les vues sont des composants JavaScript. Cela signifie que vous obtenez les donn\u00e9es de votre serveur, puis Inertia travaille avec le framework frontend pour afficher la page contenant les donn\u00e9es sous forme de fichier JavaScript, ce qui \u00e9limine le besoin de cr\u00e9er des API.<\/p>\n

Authentification<\/h3>\n

Comme Inertia alimente l’application avec des donn\u00e9es et des r\u00e9ponses provenant du backend, elle utilisera simplement le syst\u00e8me d’authentification que vous avez c\u00f4t\u00e9 serveur. Cela signifie que vous n’aurez pas \u00e0 vous soucier de l’authentification c\u00f4t\u00e9 client \u2014 vous aurez \u00e0 la place un syst\u00e8me d’authentification bas\u00e9 sur la session qui se synchronise avec votre syst\u00e8me d’authentification c\u00f4t\u00e9 serveur.<\/p>\n

Probl\u00e8mes de SEO<\/h3>\n

Comme expliqu\u00e9 pr\u00e9c\u00e9demment pour le rendu c\u00f4t\u00e9 serveur, les moteurs de recherche interceptent la r\u00e9ponse du serveur au navigateur pour indexer le contenu HTML de la page web. Dans le cas d’un SPA, les moteurs de recherche auront du mal \u00e0 identifier le contenu de la page puisque le serveur r\u00e9pondra avec des composants JavaScript et des donn\u00e9es JSON.<\/p>\n

Mais Inertia a r\u00e9solu ce probl\u00e8me en introduisant la fonction de rendu c\u00f4t\u00e9 serveur (SSR)<\/a> que vous pouvez ajouter \u00e0 votre application. Inertia utilise l’environnement Node.js comme d\u00e9clencheur pour convertir la r\u00e9ponse en donn\u00e9es JSON en HTML.<\/p>\n

Pour mieux illustrer cela, imaginez Inertia assis entre le serveur et le navigateur, en train de regarder. Lorsque le serveur re\u00e7oit une requ\u00eate Inertia et renvoie une r\u00e9ponse JSON, Inertia d\u00e9tecte l’existence d’un serveur Node.js, transforme la r\u00e9ponse JSON en HTML et la renvoie, permettant ainsi aux moteurs de recherche d’indexer la page comme si l’application n’\u00e9tait pas un SPA.<\/p>\n

Inertia fournit \u00e9galement un composant Head<\/code>, qui vous permet d’ajouter un titre et des m\u00e9tadonn\u00e9es \u00e0 votre page :<\/p>\n

\n<script setup>\nimport { Head } from '@inertiajs\/inertia-vue3'\n<\/script>\n\n<template>\n  <Head>\n    <title>Page Title<\/title>\n    <meta name=\"description\" content=\"Page Description" \/>\n  <\/Head>\n<\/template>\n<\/code><\/pre>\n
Voici un autre exemple tir\u00e9 de la documentation en ligne d’Inertia<\/a>:<\/p>\n
\n\/\/ Layout.vue\n\nimport { Head } from '@inertiajs\/inertia-vue3'\n\n<Head>\n  <title>My app<\/title>\n  <meta head-key=\"description\" name=\"description\" content=\"This is the default description\" \/>\n  <link rel=\"icon\" type=\"image\/svg+xml\" href=\"\/favicon.svg\" \/>\n<\/Head>\n\n\/\/ About.vue\n\nimport { Head } from '@inertiajs\/inertia-vue3'\n\n<Head>\n  <title>About - My app<\/title>\n  <meta head-key=\"description\" name=\"description\" content=\"This is a page specific description\" \/>\n<\/Head>\n<\/code><\/pre>\n
Formulaires et Form Helper<\/h3>\n
Il est possible d’envoyer une demande de formulaire standard tout en utilisant Inertia. Cependant, cela entra\u00eenera un rafra\u00eechissement de la page enti\u00e8re.<\/p>\n
Inertia permet aux utilisateurs de faire des demandes de formulaire en utilisant Inertia, ce qui supprime la possibilit\u00e9 de rafra\u00eechissement de la page. Une fois que le formulaire est soumis avec Inertia, il est trait\u00e9 c\u00f4t\u00e9 serveur, ce qui vous lib\u00e8re pour rediriger l’utilisateur vers la m\u00eame page (ou une page compl\u00e8tement diff\u00e9rente).<\/p>\n
Inertia nous facilite la vie lors de la cr\u00e9ation et de l’envoi de formulaires. Voici un exemple sur la fa\u00e7on dont vous pouvez l’utiliser avec l’API de composition Vue.js 3 :<\/p>\n
\n<script setup>\n  import { useForm } from \"@inertiajs\/inertia-vue3\";\n\n  const form = useForm({\n    email: null,\n    password: null,\n  });\n<\/script>\n\n<template>\n  <form @submit.prevent=\"form.post('kinsta\/login')\">\n    \n    <input type=\"text\" v-model=\"form.email\" \/>\n    \n    <input type=\"password\" v-model=\"form.password\" \/>\n    \n    <button type=\"submit\">Login<\/button>\n  <\/form>\n<\/template>\n<\/code><\/pre>\n
Vous pouvez soumettre le formulaire avec GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code> et DELETE<\/code>.<\/p>\n
\n<script setup>\n  import { useForm } from \"@inertiajs\/inertia-vue3\";\n\n  const form = useForm({\n    email: null,\n    password: null,\n  });\n\n  const submit = () => {\n    form.post(\"kinsta\/login\");\n  };\n<\/script>\n\n<template>\n  <form @submit.prevent=\"submit()\">\n    \n    <input type=\"text\" v-model=\"form.email\" \/>\n    \n    <input type=\"password\" v-model=\"form.password\" \/>\n    \n    <button type=\"submit\">Login<\/button>\n  <\/form>\n<\/template>\n<\/code><\/pre>\n
L’aide de formulaire d’Inertia offre \u00e9galement quelques propri\u00e9t\u00e9s utiles telles que la propri\u00e9t\u00e9 processing<\/code> qui se transforme en true<\/code> une fois que le formulaire commence \u00e0 \u00eatre trait\u00e9. Ceci peut \u00eatre utilis\u00e9 pour d\u00e9sactiver les boutons d’envoi pendant le traitement du formulaire afin d’\u00e9viter les envois multiples :<\/p>\n
\n<button type=\"submit\" :disabled=\"form.processing\">Submit<\/button>\n<\/code><\/pre>\n
Vous pouvez \u00e9galement utiliser preserveState<\/code>, preserveScroll<\/code> et des rappels d’\u00e9v\u00e9nements avec le formulaire, ce qui sera utile pour ajouter des options suppl\u00e9mentaires au formulaire :<\/p>\n
\nform.post('kinsta\/login, {\n  preserveScroll: true,\n  onSuccess: () => form.reset('password'),\n})\n<\/code><\/pre>\n
Se souvenir de l’\u00e9tat avec Inertia.js<\/h3>\n
Disons qu’un utilisateur remplit un formulaire sur votre site web et d\u00e9cide de naviguer vers une autre page avant de l’envoyer. Lorsqu’il revient \u00e0 la page du formulaire, la saisie du formulaire de l’utilisateur sera r\u00e9initialis\u00e9e.<\/p>\n
Heureusement, Inertia fournit la fonction useRemember<\/code>, qui vous permet de sauvegarder les entr\u00e9es de formulaire de l’utilisateur dans l’\u00e9tat historique et de les restaurer lors de la navigation historique.<\/p>\n
Vous pouvez utiliser cette fonctionnalit\u00e9 en l’important depuis Inertia et en l’appliquant \u00e0 votre formulaire :<\/p>\n
\nimport { useRemember } from '@inertiajs\/inertia-vue3'\n\nexport default {\n  setup() {\n    const form = useRemember({\n        first_name: null,\n        last_name: null,\n    })\n\n    return { form }\n  },\n}\n<\/code><\/pre>\n
Si vous avez une page avec de nombreux formulaires qui utilisent la fonctionnalit\u00e9 useRemember<\/code>, chaque composant doit avoir une cl\u00e9 unique afin qu’Inertia sache quelles donn\u00e9es restaurer dans chaque composant :<\/p>\n
\nconst form = useRemember({\n        first_name: null,\n        last_name: null,\n    }, 'Users\/Create')\n<\/code><\/pre>\n
Nous n’avons pas besoin d’utiliser la fonctionnalit\u00e9 useRemember<\/code> lorsque nous utilisons l’aide de formulaire d’Inertia. Inertia se souviendra automatiquement de l’\u00e9tat de l’entr\u00e9e du formulaire, nous devons donc simplement donner un identifiant unique :<\/p>\n
\nimport { useForm } from '@inertiajs\/inertia-vue3'\n\nconst form = useForm('CreateUser', data)\n<\/code><\/pre>\n
L’aspect agr\u00e9able de cette fonctionnalit\u00e9 est que vous pouvez vous souvenir manuellement de n’importe quelle donn\u00e9e dans votre application. Cela peut \u00e9galement \u00eatre utile pour transmettre des donn\u00e9es d’un composant profond\u00e9ment imbriqu\u00e9 au composant principal :<\/p>\n
\nimport { Inertia } from '@inertiajs\/inertia'\n\n\/\/ DeeplyNestedComponent.vue\nInertia.remember(data, 'my-key')\n\n\/\/ MainComponent.vue\nlet data = Inertia.restore('my-key')\n<\/code><\/pre>\n
T\u00e9l\u00e9versements de fichiers<\/h3>\n
Inertia d\u00e9tecte si le formulaire inclut des fichiers et, si c’est le cas, transforme les donn\u00e9es de la requ\u00eate en objet formData<\/code>, ce qui est toujours n\u00e9cessaire. Ainsi, si vous avez un formulaire qui inclut un nom et un avatar, Inertia traitera le formulaire comme multipart\/form-data<\/code>.<\/p>\n
Validation et erreurs<\/h3>\n
Lorsqu’un utilisateur envoie un formulaire avec des valeurs incorrectes et qu’il est envoy\u00e9 au serveur pour validation, vous renvoyez l’utilisateur \u00e0 la page du formulaire avec un flash des erreurs de validation dans la session. Inertia capture les erreurs de la session et les enregistre comme props de la page.<\/p>\n
Comme les props sont r\u00e9actifs, ils apparaissent lorsque l’envoi du formulaire est termin\u00e9. Pour qu’Inertia puisse d\u00e9tecter l’existence d’erreurs, elle garde un \u0153il sur page.props.errors<\/code>.<\/p>\n
Une fois qu’il a trouv\u00e9 des erreurs, il fournit alors un callback onError()<\/code> au lieu de onSuccess()<\/code>.<\/p>\n
Voici un exemple avec Vue 3 pour vous aider \u00e0 comprendre le concept :<\/p>\n
\nconst submit = () => {\n    form.post(\"kinsta\/login\", {\n        onError: () => {\n            return \"Hi! , the server returned an error and Inertia saved it as a prop. Do as you like with me\"\n        },\n        onSuccess: () => {\n            return \"Wohoo!!\"\n        }\n    }\n    );\n  };\n<\/code><\/pre>\n
Afficher les erreurs est aussi simple que de les d\u00e9finir en tant que props et de les afficher conditionnellement dans votre HTML :<\/p>\n
\n<script setup>\n  defineProps({\n    errors: Object,\n  });\n\n\/\/\n<\/script>\n\n<template>\n  <form @submit.prevent=\"submit()\">\n    \/\/\n    <div v-if=\"errors.email\">{{ errors.email }}<\/div>\n  <\/form>\n<\/template>\n<\/code><\/pre>\n
En utilisant Inertia, vous n’avez pas \u00e0 vous soucier des anciennes donn\u00e9es d’entr\u00e9e en cas d’erreurs. D\u00e8s qu’Inertia d\u00e9tecte que l’utilisateur a \u00e9t\u00e9 redirig\u00e9 vers la page contenant des erreurs, il pr\u00e9serve automatiquement l’ancien \u00e9tat du composant pour POST<\/code>, PUT<\/code>, PATCH<\/code> et DELETE<\/code>.<\/p>\n
Rechargments partiels avec Inertia.js<\/h3>\n
La fonctionnalit\u00e9 de rechargement partiel d’Inertia est tout simplement excellente puisqu’elle ne recharge qu’un composant s\u00e9lectionn\u00e9 sur la page plut\u00f4t que de r\u00e9cup\u00e9rer \u00e0 nouveau l’ensemble des donn\u00e9es du serveur. L’optimisation de votre application passe ainsi au niveau sup\u00e9rieur. Vous pouvez \u00e9galement visiter le lien suivant pour en savoir plus sur la fa\u00e7on d’optimiser les performances de votre application Laravel<\/a>.<\/p>\n
Les rechargements partiels peuvent \u00eatre effectu\u00e9s en utilisant la propri\u00e9t\u00e9 only<\/code> d’Inertia :<\/p>\n
\nimport { Inertia } from '@inertiajs\/inertia'\n\nInertia.visit(url, {\n  only: ['users'],\n})\n<\/code><\/pre>\n
Redirections externes avec Inertia.js<\/h3>\n
Le routage par sous-domaine, ou redirection externe, est l’un des d\u00e9fis les plus frustrants des SPA. Il est irrationnel d’attendre de votre application qu’elle reste une application \u00e0 page unique tout en visitant un domaine diff\u00e9rent.<\/p>\n
Il peut \u00eatre n\u00e9cessaire de rediriger une requ\u00eate Inertia vers un site web externe ou m\u00eame vers un autre point de terminaison non Inertia dans votre application. Ceci est possible par le biais d’une visite window.location<\/code> initi\u00e9e c\u00f4t\u00e9 serveur :<\/p>\n
\nreturn Inertia::location($url);\n<\/code><\/pre>\n
Si vous ouvrez la console pendant que vous testez cette op\u00e9ration, vous constaterez qu’elle renvoie 409 conflict<\/code>. Cette r\u00e9ponse contient l’URL dans l’en-t\u00eate X-Inertia-Location<\/code>, qu’Inertia d\u00e9tectera du c\u00f4t\u00e9 client et effectuera automatiquement la visite.<\/p>\n
Comment travailler avec Inertia.js<\/h2>\n
Le travail avec Inertia est similaire au travail sur une application c\u00f4t\u00e9 serveur, \u00e0 l’exception du fait qu’il s’agit d’une application mono-page enti\u00e8rement r\u00e9active. Vous devriez \u00eatre en mesure de d\u00e9finir vos routes, de personnaliser les contr\u00f4leurs et de renvoyer une vue qu’Inertia enverra \u00e0 votre framework frontend.<\/p>\n
Routes Laravel et Inertia.js<\/h3>\n
Le routage Laravel n’est pas quelque chose que vous voulez abandonner lors du d\u00e9veloppement de votre application ; il vous permet de construire rapidement les routes les plus complexes, et il existe de nombreuses ressources Laravel gratuites et payantes<\/a> qui peuvent vous aider \u00e0 en apprendre davantage sur Laravel et le fonctionnement du routage.<\/p>\n
La beaut\u00e9 de la chose, c’est que vous n’avez pas besoin de Vue Router ou React Router pour effectuer un routage simple c\u00f4t\u00e9 client, car Inertia poss\u00e8de son propre syst\u00e8me de routage qui fonctionne avec le routage Laravel. Si la t\u00e2che ne n\u00e9cessite pas de donn\u00e9es backend, vous pouvez utiliser l’aide de routage pour router directement vers un composant.<\/p>\n
\nRoute::inertia('\/home', 'HomeComponent');\n<\/code><\/pre>\n
\npublic function index()\n    {\n    return Inertia::render('Users\/Index', [\n        'users' => User::all();\n        'create_url' => URL::route('users.create'),\n    ]);\n}\n<\/code><\/pre>\n
Avant de poursuivre, nous aimerions vous pr\u00e9senter DevKinsta<\/a>, un outil puissant pour les d\u00e9veloppeurs, les concepteurs et les agences qui leur permet de construire des applications web WordPress \u00e0 une ou plusieurs pages. Heureusement, WordPress peut \u00eatre int\u00e9gr\u00e9 \u00e0 Laravel \u00e0 l’aide du package Corcel<\/a>. Si vous construisez une application Laravel avec int\u00e9gration de WordPress, consultez l’outil APM de Kinsta<\/a> pour une surveillance extraordinaire des performances.<\/p>\n
Redirections<\/h3>\n
Vous devez toujours rediriger l’utilisateur vers le chemin correct qui correspond \u00e0 la requ\u00eate initiale. Par exemple, si un utilisateur se soumet au point de terminaison store<\/code> pour envoyer un article, assurez-vous de rediriger le client vers le point de terminaison GET<\/code> peut-\u00eatre vers la route de l’article.<\/p>\n
\npublic function store()\n{\n    Post::create(\n        Request::validate([\n            'title' => ['required'],\n            'body' => ['required'],\n        ])\n    );\n\n    \/\/ redirect the user to the posts show page\n    return Redirect::route('posts.show');\n}\n<\/code><\/pre>\n
Inconv\u00e9nients de l’utilisation d’Inertia.js<\/h2>\n
Jusqu’\u00e0 pr\u00e9sent, nous nous sommes concentr\u00e9s sur les nombreux avantages de l’utilisation d’Inertia. Toutefois, comme tout outil, Inertia pr\u00e9sente \u00e9galement des inconv\u00e9nients.<\/p>\n