Inertia 2.0 a été récemment publié,apportant de nouvelles fonctionnalités telles que les requêtes asynchrones,les props différées,le préchargement et le polling. Les requêtes asynchrones permettent la concurrence, le chargement paresseux et bien plus encore.

Le préchargement des liens améliore la performance perçue d’une application en récupérant les données en arrière-plan avant que l’utilisateur ne les demande. Par défaut, Inertia précharge les données d’une page lorsque l’utilisateur survole le lien pendant plus de 75 ms. Les données sont mises en cache pendant 30 secondes avant d’être supprimées. Les développeurs peuvent personnaliser ce comportement avec la propriété `cacheFor`. Voici un exemple avec svelte :

import { inertia } from ‘@inertiajs/svelte’

Users
Users
Users

Le préchargement peut également se produire lors de l’événement `mousedown`, c’est-à-dire lorsque l’utilisateur a cliqué sur un lien, mais n’a pas encore relâché le bouton de la souris. Enfin, le préchargement peut également se produire lorsqu’un composant est monté.

Inertia 2.0 permet le chargement paresseux des données au défilement avec le composant `WhenVisible`, qui utilise l’Intersection Observer API [[source inconnue]]. Le code suivant présente un composant qui affiche un message de repli pendant le chargement (exemples écrits avec Svelte 4) :

La liste complète des options de configuration pour le chargement paresseux et le préchargement est disponible dans la documentation. Inertia 2.0 propose également le polling, les props différées et le défilement infini. Les développeurs sont encouragés à consulter le guide de mise à niveau pour plus de détails.

Inertia cible les développeurs back-end qui souhaitent créer des applications monopages React, Vue et Svelte en utilisant le routage et les contrôleurs classiques côté serveur, c’est-à-dire sans la complexité des applications monopages modernes. Les développeurs utilisant Inertia n’ont pas besoin de routage côté client ni de création d’API. [[1]]

Inertia renvoie une réponse HTML complète lors du premier chargement de la page. Lors des requêtes suivantes, inertia côté serveur renvoie une réponse JSON avec le composant JavaScript (représenté par son nom et ses props) qui implémente la vue. Inertia côté client remplace ensuite la page actuellement affichée par la nouvelle page renvoyée par le nouveau composant et met à jour l’état de l’historique.

Les requêtes Inertia utilisent des en-têtes HTTP spécifiques pour faire la distinction entre l’actualisation complète de la page et l’actualisation partielle.Si l’en-tête `X-Inertia` n’est pas défini ou est faux,cela indique que la requête effectuée par un client Inertia est une visite standard d’une page complète.

Les développeurs peuvent passer à Inertia v2.0 en installant l’adaptateur côté client de leur choix (par exemple, vue, react, Svelte) :

“`
npm install @inertiajs/vue3@^2.0
“`

Ensuite, il est nécessaire de mettre à niveau le package `inertiajs/inertia-laravel` pour utiliser la branche de développement `2.x` :

“`
composer require inertiajs/inertia-laravel:^2.0
“`

Inertia.js est une approche novatrice pour construire des applications web classiques pilotées par le serveur, qualifiée de « monolithe moderne » [[1]].Elle permet de créer des applications entièrement rendues côté client, de type single-page application (SPA), sans la complexité associée aux SPA modernes [[1]]. Inertia.js exploite les modèles côté serveur existants.

Inertia.js version 2.0 est disponible en version bêta,apportant une mise à jour significative pour la construction d’applications web modernes sans nécessiter une SPA complète [[2]].

Avec Inertia.js, les clients peuvent naviguer de manière fluide et rapide à travers les catégories de produits, filtrer les produits et consulter les informations sans avoir à recharger la page [[3]]. L’avenir d’Inertia.js est de plus en plus vital, avec la version 2 qui approche [[3]].

Inertia.js 2.0 : Performances et fonctionnalités améliorées

Inertia.js 2.0 marque une avancée significative dans le développement d’applications web.Cette version introduit des fonctionnalités clés pour améliorer les performances et l’expérience utilisateur.

Performances optimisées

Requêtes asynchrones: Permettent la concurrence et le chargement paresseux, améliorant la réactivité de l’request.

Préchargement: Récupère les données en arrière-plan avant que l’utilisateur ne les demande. Par défaut, le préchargement s’active après 75ms de survol d’un lien, avec un cache de 30 secondes (paramétrable via cacheFor).Le préchargement peut aussi se déclencher lors d’un mousedown ou du montage d’un composant. Exemple avec Svelte :

svelte


import { inertia } from '@inertiajs/svelte'





Users


Users


Users

Chargement paresseux: Le composant WhenVisible, utilisant l’Intersection Observer API, permet de charger les données uniquement lorsque l’élément est visible à l’écran.Exemple avec Svelte :

svelte

 








    


        
Loading...



    

Props différées: Permettent de retarder le chargement des données non critiques jusqu’à ce qu’elles soient nécessaires, réduisant la taille de la charge initiale. [[1]]

Fonctionnalités clés

Polling: Permet de mettre à jour périodiquement les données sans intervention de l’utilisateur.

Défilement infini: Améliore l’expérience utilisateur en chargeant du contenu supplémentaire au fur et à mesure du défilement.

Architecture et mise à niveau

Inertia.js est une approche “monolithe moderne” permettant de créer des applications SPA sans la complexité du routage côté client et de la création d’API. [[1]] elle utilise les contrôleurs et le routage côté serveur, renvoyant une réponse HTML complète au premier chargement puis des réponses JSON pour les mises à jour partielles. [[1]]

La mise à niveau vers Inertia 2.0 nécessite l’installation de l’adaptateur côté client (ex: npm install @inertiajs/vue3@^2.0) et la mise à jour du package serveur (composer require inertiajs/inertia-laravel:^2.0).

Avantages d’Inertia.js

Avec Inertia.js, les utilisateurs bénéficient d’une navigation fluide et rapide, sans rechargement de page complet. [[3]] L’approche d’Inertia.js est particulièrement avantageuse pour les développeurs back-end souhaitant créer des applications SPA sans les complexités habituelles. [[1]]

Tableau récapitulatif des fonctionnalités Inertia 2.0

| Fonctionnalité | Description | Avantage |

|————————|——————————————————————————–|—————————————————–|

| Requêtes asynchrones | Permet le chargement concurrentiel et paresseux des données. | Améliore la réactivité et les performances.|

| Props différées | Charge les données non critiques seulement lorsqu’elles sont nécessaires. | Réduit la taille de la charge initiale.|

| préchargement | Récupère les données en arrière-plan pour une meilleure performance perçue. | Améliore la vitesse de navigation. |

| Polling | Met à jour les données automatiquement à intervalles réguliers. | Assure des données toujours à jour. |

| Chargement paresseux | Charge les données uniquement lorsque l’élément est visible à l’écran.| Optimise l’utilisation des ressources.|

| Défilement infini | Charge du contenu supplémentaire dynamiquement lors du défilement. | Permet l’affichage d’un grand volume de données.|

[[2]] mentionne que Inertia.js v2.0 est en version bêta, apportant une amélioration significative pour la construction d’applications modernes sans la complexité d’une SPA complète.