Dans ce tutoriel je vous propose de découvrir Inertia.js, un outil qui permet de créer des sites single-page React, Vue ou Svelte contrôlés par le serveur.
Le fonctionnement
Dans le cadre d'une application single-app classique le client va piloter l'ensemble de la navigation utilisateur et le serveur ne sera contacté qu'au travers d'une API.
InertiaJS propose une approche single-app différente où les décisions sont prises par le serveur (le back-end va choisir le composant à afficher et les props à passer).
Comment cela fonctionne ?
Lors du premier chargement :
- Le back-end va définir le composant à afficher et les propriétés associées puis va envoyer ces informations au front au travers d'un élément HTML.
- Le code côté client va analyser cet élément et charger le composant demandé puis le monter avec les propriétés associées.
Lors d'un clic sur un élément :
- Une requête ajax va être envoyée au serveur.
- Le serveur récupère les données et renvoie un JSON contenant le composant à charger et les props associées.
- Le client va charger le composant (s'il ne l'a pas déjà fait) puis l'injecter dans la structure.
Inertia permet d'utiliser des frameworks front (ce qui permet de créer facilement des éléments interactifs) en éliminant une partie de la complexité associée (routeur et gestion d'une API).
L'inconvénient
Cette approche possède cependant aussi plusieurs inconvénients :
- il n'y a pas, à l'heure actuelle, la possibilité d'avoir du rendu côté serveur (problématique pour le SEO).
- la transition entre les pages peut être plus lente que pour une application front classique car il faut attendre la réponse du serveur pour déterminer le composant à afficher (pas de ghost possible).
Une utilisation partielle
Inertia n'est pas un choix "tout ou rien" et il peut être utilisé de manière sélective et des pages "classiques" peuvent cohabiter avec des pages inertia.
