Les applications monopages (Single-Page Applications ou SPA) sont devenues la manière moderne de créer des applications web, et Inertia.js est un outil de premier plan permettant aux développeurs de créer des SPA avec un rendu à la fois côté client et côté serveur.
Dans cet article, nous verrons comment Inertia fait de la construction de SPA un jeu d’enfant et comment il résout de nombreux autres problèmes pour les développeurs. Nous couvrirons également les principales fonctionnalités de l’outil.
Mais avant de commencer, assurons-nous d’abord que nous comprenons le fonctionnement des applications côté serveur et côté client.
Qu’est-ce que le rendu côté serveur ?
On parle de rendu côté serveur (Server-Side Rendering ou SSR) lorsqu’une application peut rendre ou afficher le contenu d’une page web sur le serveur plutôt que dans le navigateur. Lorsqu’un utilisateur tente de visiter le site exemple.com, le navigateur envoie une requête au serveur demandant toutes les informations nécessaires pour afficher cette page web spécifique, et le serveur répond instantanément en fournissant au navigateur une page entièrement rendue.
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ésout ensuite le contenu JavaScript, et la page web s’affiche pour l’utilisateur.
Le problème de l’approche SSR est qu’il faut beaucoup de temps pour charger une page entièrement rendue depuis le serveur, ce qui n’offre pas une expérience utilisateur agréable. C’est pourquoi les développeurs envisagent les SPA et le rendu côté client.
Qu’est-ce que le rendu côté client ?
Le rendu côté client permet au navigateur d’avoir tout ce dont il a besoin pour rendre la page web du côté client au lieu de recevoir une page entièrement rendue du serveur. Lorsque la page est chargée, le navigateur n’envoie pas d’autres requêtes au serveur, ce qui rend l’expérience de navigation extrêmement rapide.
Le rendu côté client a contribué à la création des SPA, révolutionnant ainsi le web. Vous pouvez créer un site web qui ne nécessite pas le rechargement de la page, quel que soit le nombre de liens sur lesquels vous cliquez. Il permet à l’utilisateur de naviguer facilement sur le site web.
Bien que les SPA soient fantastiques, cette approche présente beaucoup de complexité et de problèmes que nous allons aborder aujourd’hui. Inertia résout la majorité de ces problèmes en utilisant efficacement les frameworks côté serveur. Elle combine les meilleures caractéristiques des applications côté serveur et côté client.
Qu’est-ce qu’Inertia.js ?
Inertia n’est pas un framework JavaScript. Il s’agit plutôt d’une stratégie ou d’une technique de développement de SPA. Elle permet au développeur d’utiliser les frameworks côté serveur actuels pour construire un SPA moderne sans la complexité qui l’accompagne.
Inertia a été conçu pour accompagner, et non remplacer, les frameworks que vous utilisez déjà. Considérez-le comme un allié utile qui vous aide à accomplir des tâches plus rapidement et plus efficacement. Il prend actuellement en charge trois frameworks frontend (Vue, React et Svelte) pour le rendu côté client et deux frameworks backend (Laravel et Rails) pour le rendu côté serveur.
Pour la plupart des développeurs Laravel, Inertia est l’une des techniques les plus fiables pour construire des SPA puisqu’elle leur permet de connecter à la fois les frameworks frontend et backend.
Comment fonctionne Inertia.js ?
Inertia est similaire à Vue Router, en ce sens qu’il vous permet de vous déplacer entre les pages sans avoir à recharger la page entière. Toutefois, Inertia fonctionne en synchronisation avec votre framework côté serveur. Cela est possible grâce à Link, une enveloppe pour la balise d’ancrage standard. Lorsqu’on clique sur une Link, Inertia intercepte l’événement de clic et envoie une requête XHR au serveur, ce dernier reconnaissant qu’il s’agit d’une requête Inertia et renvoyant une réponse JSON. Cette réponse comprend le nom et les données du composant JavaScript, après quoi Inertia supprime comme par magie les composants inutiles et les remplace par ceux nécessaires à la visite de la nouvelle page et met à jour l’état de l’historique.
Une plongée profonde dans la fonctionnalité d’Inertia.js
Lorsqu’un visiteur se rend pour la première fois sur exemple.com, le navigateur effectue une requête pleine page standard et le serveur renvoie une réponse HTML complète comme si Inertia n’existait pas. Cette réponse HTML comporte tous les actifs du site (CSS, JavaScript), mais elle contient également une ressource supplémentaire pour Inertia, qui est la racine div avec l’attribut data-page contenant les données JSON de la page initiale. Inertia utilise ensuite ces données JSON pour lancer le framework frontend et afficher la page initiale.
Une fois l’application démarrée, chaque route que l’utilisateur visite à l’intérieur du même domaine en utilisant Link sera une requête XHR avec l’en-tête X-Inertia. Cela indique au serveur qu’il s’agit d’une requête Inertia.
Le retour d’information sera une réponse JSON avec le contenu de la page, plutôt qu’une réponse HTML complète comme lors de la visite initiale.
Quels problèmes Inertia.js résout-il ?
Inertia résout un grand nombre de problèmes pour les développeurs web. Le but de la création d’Inertia était de donner des solutions rapides et efficaces à toute la complexité qui accompagne la conception d’un SPA.
Complexités des SPA
Si les développeurs devaient construire un SPA sans Inertia, ils devraient créer des API REST ou GraphQL et les protéger avec une sorte de méthode d’authentification, ce qui nécessiterait la création d’un système de gestion d’état frontend, parmi beaucoup d’autres choses.
Inertia a été conçu pour aider les développeurs à transformer leurs applications côté serveur fonctionnant entièrement sur le serveur backend en une application JavaScript à page unique sans avoir à passer par toutes les complexités qui accompagnent la création de SPA.
Créer une SPA à l’aide d’Inertia est similaire à la création d’une application rendue côté serveur. Vous créez des contrôleurs, effectuez des requêtes auprès de la base de données pour obtenir les données nécessaires, puis renvoyez les résultats aux vues.
La clé ici est que les vues sont des composants JavaScript. Cela signifie que vous obtenez les données de votre serveur, puis Inertia travaille avec le framework frontend pour afficher la page contenant les données sous forme de fichier JavaScript, ce qui élimine le besoin de créer des API.
Authentification
Comme Inertia alimente l’application avec des données et des réponses provenant du backend, elle utilisera simplement le système d’authentification que vous avez côté serveur. Cela signifie que vous n’aurez pas à vous soucier de l’authentification côté client — vous aurez à la place un système d’authentification basé sur la session qui se synchronise avec votre système d’authentification côté serveur.
Problèmes de SEO
Comme expliqué précédemment pour le rendu côté serveur, les moteurs de recherche interceptent la réponse 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 à identifier le contenu de la page puisque le serveur répondra avec des composants JavaScript et des données JSON.
Mais Inertia a résolu ce problème en introduisant la fonction de rendu côté serveur (SSR) que vous pouvez ajouter à votre application. Inertia utilise l’environnement Node.js comme déclencheur pour convertir la réponse en données JSON en HTML.
Pour mieux illustrer cela, imaginez Inertia assis entre le serveur et le navigateur, en train de regarder. Lorsque le serveur reçoit une requête Inertia et renvoie une réponse JSON, Inertia détecte l’existence d’un serveur Node.js, transforme la réponse JSON en HTML et la renvoie, permettant ainsi aux moteurs de recherche d’indexer la page comme si l’application n’était pas un SPA.
Inertia fournit également un composant Head, qui vous permet d’ajouter un titre et des métadonnées à votre page :
<script setup>
import { Head } from '@inertiajs/inertia-vue3'
</script>
<template>
<Head>
<title>Page Title</title>
<meta name="description" content="Page Description" />
</Head>
</template>
Voici un autre exemple tiré de la documentation en ligne d’Inertia:
// Layout.vue
import { Head } from '@inertiajs/inertia-vue3'
<Head>
<title>My app</title>
<meta head-key="description" name="description" content="This is the default description" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</Head>
// About.vue
import { Head } from '@inertiajs/inertia-vue3'
<Head>
<title>About - My app</title>
<meta head-key="description" name="description" content="This is a page specific description" />
</Head>
Formulaires et Form Helper
Il est possible d’envoyer une demande de formulaire standard tout en utilisant Inertia. Cependant, cela entraînera un rafraîchissement de la page entière.
Inertia permet aux utilisateurs de faire des demandes de formulaire en utilisant Inertia, ce qui supprime la possibilité de rafraîchissement de la page. Une fois que le formulaire est soumis avec Inertia, il est traité côté serveur, ce qui vous libère pour rediriger l’utilisateur vers la même page (ou une page complètement différente).
Inertia nous facilite la vie lors de la création et de l’envoi de formulaires. Voici un exemple sur la façon dont vous pouvez l’utiliser avec l’API de composition Vue.js 3 :
<script setup>
import { useForm } from "@inertiajs/inertia-vue3";
const form = useForm({
email: null,
password: null,
});
</script>
<template>
<form @submit.prevent="form.post('kinsta/login')">
<input type="text" v-model="form.email" />
<input type="password" v-model="form.password" />
<button type="submit">Login</button>
</form>
</template>
Vous pouvez soumettre le formulaire avec GET, POST, PUT, PATCH et DELETE.
<script setup>
import { useForm } from "@inertiajs/inertia-vue3";
const form = useForm({
email: null,
password: null,
});
const submit = () => {
form.post("kinsta/login");
};
</script>
<template>
<form @submit.prevent="submit()">
<input type="text" v-model="form.email" />
<input type="password" v-model="form.password" />
<button type="submit">Login</button>
</form>
</template>
L’aide de formulaire d’Inertia offre également quelques propriétés utiles telles que la propriété processing qui se transforme en true une fois que le formulaire commence à être traité. Ceci peut être utilisé pour désactiver les boutons d’envoi pendant le traitement du formulaire afin d’éviter les envois multiples :
<button type="submit" :disabled="form.processing">Submit</button>
Vous pouvez également utiliser preserveState, preserveScroll et des rappels d’événements avec le formulaire, ce qui sera utile pour ajouter des options supplémentaires au formulaire :
form.post('kinsta/login, {
preserveScroll: true,
onSuccess: () => form.reset('password'),
})
Se souvenir de l’état avec Inertia.js
Disons qu’un utilisateur remplit un formulaire sur votre site web et décide de naviguer vers une autre page avant de l’envoyer. Lorsqu’il revient à la page du formulaire, la saisie du formulaire de l’utilisateur sera réinitialisée.
Heureusement, Inertia fournit la fonction useRemember, qui vous permet de sauvegarder les entrées de formulaire de l’utilisateur dans l’état historique et de les restaurer lors de la navigation historique.
Vous pouvez utiliser cette fonctionnalité en l’important depuis Inertia et en l’appliquant à votre formulaire :
import { useRemember } from '@inertiajs/inertia-vue3'
export default {
setup() {
const form = useRemember({
first_name: null,
last_name: null,
})
return { form }
},
}
Si vous avez une page avec de nombreux formulaires qui utilisent la fonctionnalité useRemember, chaque composant doit avoir une clé unique afin qu’Inertia sache quelles données restaurer dans chaque composant :
const form = useRemember({
first_name: null,
last_name: null,
}, 'Users/Create')
Nous n’avons pas besoin d’utiliser la fonctionnalité useRemember lorsque nous utilisons l’aide de formulaire d’Inertia. Inertia se souviendra automatiquement de l’état de l’entrée du formulaire, nous devons donc simplement donner un identifiant unique :
import { useForm } from '@inertiajs/inertia-vue3'
const form = useForm('CreateUser', data)
L’aspect agréable de cette fonctionnalité est que vous pouvez vous souvenir manuellement de n’importe quelle donnée dans votre application. Cela peut également être utile pour transmettre des données d’un composant profondément imbriqué au composant principal :
import { Inertia } from '@inertiajs/inertia'
// DeeplyNestedComponent.vue
Inertia.remember(data, 'my-key')
// MainComponent.vue
let data = Inertia.restore('my-key')
Téléversements de fichiers
Inertia détecte si le formulaire inclut des fichiers et, si c’est le cas, transforme les données de la requête en objet formData, ce qui est toujours nécessaire. Ainsi, si vous avez un formulaire qui inclut un nom et un avatar, Inertia traitera le formulaire comme multipart/form-data.
Validation et erreurs
Lorsqu’un utilisateur envoie un formulaire avec des valeurs incorrectes et qu’il est envoyé au serveur pour validation, vous renvoyez l’utilisateur à 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.
Comme les props sont réactifs, ils apparaissent lorsque l’envoi du formulaire est terminé. Pour qu’Inertia puisse détecter l’existence d’erreurs, elle garde un œil sur page.props.errors.
Une fois qu’il a trouvé des erreurs, il fournit alors un callback onError() au lieu de onSuccess().
Voici un exemple avec Vue 3 pour vous aider à comprendre le concept :
const submit = () => {
form.post("kinsta/login", {
onError: () => {
return "Hi! , the server returned an error and Inertia saved it as a prop. Do as you like with me"
},
onSuccess: () => {
return "Wohoo!!"
}
}
);
};
Afficher les erreurs est aussi simple que de les définir en tant que props et de les afficher conditionnellement dans votre HTML :
<script setup>
defineProps({
errors: Object,
});
//
</script>
<template>
<form @submit.prevent="submit()">
//
<div v-if="errors.email">{{ errors.email }}</div>
</form>
</template>
En utilisant Inertia, vous n’avez pas à vous soucier des anciennes données d’entrée en cas d’erreurs. Dès qu’Inertia détecte que l’utilisateur a été redirigé vers la page contenant des erreurs, il préserve automatiquement l’ancien état du composant pour POST, PUT, PATCH et DELETE.
Rechargments partiels avec Inertia.js
La fonctionnalité de rechargement partiel d’Inertia est tout simplement excellente puisqu’elle ne recharge qu’un composant sélectionné sur la page plutôt que de récupérer à nouveau l’ensemble des données du serveur. L’optimisation de votre application passe ainsi au niveau supérieur. Vous pouvez également visiter le lien suivant pour en savoir plus sur la façon d’optimiser les performances de votre application Laravel.
Les rechargements partiels peuvent être effectués en utilisant la propriété only d’Inertia :
import { Inertia } from '@inertiajs/inertia'
Inertia.visit(url, {
only: ['users'],
})
Redirections externes avec Inertia.js
Le routage par sous-domaine, ou redirection externe, est l’un des défis les plus frustrants des SPA. Il est irrationnel d’attendre de votre application qu’elle reste une application à page unique tout en visitant un domaine différent.
Il peut être nécessaire de rediriger une requête Inertia vers un site web externe ou même vers un autre point de terminaison non Inertia dans votre application. Ceci est possible par le biais d’une visite window.location initiée côté serveur :
return Inertia::location($url);
Si vous ouvrez la console pendant que vous testez cette opération, vous constaterez qu’elle renvoie 409 conflict. Cette réponse contient l’URL dans l’en-tête X-Inertia-Location, qu’Inertia détectera du côté client et effectuera automatiquement la visite.
Comment travailler avec Inertia.js
Le travail avec Inertia est similaire au travail sur une application côté serveur, à l’exception du fait qu’il s’agit d’une application mono-page entièrement réactive. Vous devriez être en mesure de définir vos routes, de personnaliser les contrôleurs et de renvoyer une vue qu’Inertia enverra à votre framework frontend.
Routes Laravel et Inertia.js
Le routage Laravel n’est pas quelque chose que vous voulez abandonner lors du développement de votre application ; il vous permet de construire rapidement les routes les plus complexes, et il existe de nombreuses ressources Laravel gratuites et payantes qui peuvent vous aider à en apprendre davantage sur Laravel et le fonctionnement du routage.
La beauté de la chose, c’est que vous n’avez pas besoin de Vue Router ou React Router pour effectuer un routage simple côté client, car Inertia possède son propre système de routage qui fonctionne avec le routage Laravel. Si la tâche ne nécessite pas de données backend, vous pouvez utiliser l’aide de routage pour router directement vers un composant.
Route::inertia('/home', 'HomeComponent');
public function index()
{
return Inertia::render('Users/Index', [
'users' => User::all();
'create_url' => URL::route('users.create'),
]);
}
Avant de poursuivre, nous aimerions vous présenter DevKinsta, un outil puissant pour les développeurs, les concepteurs et les agences qui leur permet de construire des applications web WordPress à une ou plusieurs pages. Heureusement, WordPress peut être intégré à Laravel à l’aide du package Corcel. Si vous construisez une application Laravel avec intégration de WordPress, consultez l’outil APM de Kinsta pour une surveillance extraordinaire des performances.
Redirections
Vous devez toujours rediriger l’utilisateur vers le chemin correct qui correspond à la requête initiale. Par exemple, si un utilisateur se soumet au point de terminaison store pour envoyer un article, assurez-vous de rediriger le client vers le point de terminaison GET peut-être vers la route de l’article.
public function store()
{
Post::create(
Request::validate([
'title' => ['required'],
'body' => ['required'],
])
);
// redirect the user to the posts show page
return Redirect::route('posts.show');
}
Inconvénients de l’utilisation d’Inertia.js
Jusqu’à présent, nous nous sommes concentrés sur les nombreux avantages de l’utilisation d’Inertia. Toutefois, comme tout outil, Inertia présente également des inconvénients.
- L’utilisateur doit avoir des connaissances de base de Vue ou React.
- Comme les données du modèle peuvent être entièrement transmises au côté client, l’utilisateur doit s’assurer de renvoyer explicitement les données pertinentes au frontend.
- Les API doivent être recréées si l’application web doit avoir une application Android ou iOS à un moment donné.
Devriez-vous utiliser Inertia.js ?
Pour répondre à la question de savoir si vous devez ou non utiliser Inertia, la réponse est oui, si vous voulez construire une application moderne à page unique, côté serveur et axée sur le référencement.
Vous pouvez en savoir plus en visitant le site officiel d’Inertia.js et en lisant la documentation.
Résumé
Les applications côté client et les SPA sont de plus en plus populaires à mesure que les technologies web évoluent, alors que les applications traditionnelles côté serveur ont commencé à tomber en désuétude. Plus que jamais, il est important d’avoir les bons outils à portée de main.
Inertia est une approche ou une solution moderne fantastique permettant aux développeurs côté serveur de créer des applications à page unique. Elle résout tellement de problèmes et fait gagner tellement de temps.
Comme nous l’avons abordé dans notre article, Inertia prend désormais en charge le rendu côté serveur, ce qui l’amène à un tout autre niveau en permettant aux développeurs de créer des SPA axés sur le référencement.
Inertia reçoit également beaucoup d’amour de la part de la communauté. L’effort de développement est parrainé par Laravel Forge, Laracasts, et un certain nombre d’autres organisations de qualité. Par conséquent, Inertia est un outil fiable qui sera amélioré et maintenu à l’avenir pour les développeurs Laravel, d’autant plus que la demande de codeurs Laravel continue de croître.
Et si vous êtes à la recherche de la prochaine maison pour votre projet alimenté par Intertia, consultez les offres d’hébergement d’applications de Kinsta.
