Écrit par Rahul Chhodde✏️
Les frameworks frontend modernes se marient bien avec leurs frameworks full-stack dédiés, comme React avec Next.js, Vue avec Nuxt.js et Svelte avec SvelteKit. Mais la même facilité d'utilisation et la même prise en charge prête à l'emploi semblent impossibles lors de l'association d'une solution frontend moderne comme React avec un backend traditionnel ou un framework côté serveur comme Laravel.
Cet écart d'adaptabilité entre les solutions frontend JavaScript et les frameworks backend traditionnels est comblé par Inertia.js. Dans ce guide d'adoption, nous apprendrons comment utiliser Inertia pour créer des applications monopage (SPA) avec un framework backend traditionnel et une interface JavaScript moderne tout en conservant le routage côté serveur.
Inertia.js est un outil qui permet aux développeurs de créer des SPA modernes avec des frameworks frontend et backend populaires sans avoir besoin d'une API entre les deux. Créée en 2019 par Jonathan Reinink, l'idée principale derrière Inertia était de simplifier le processus de création de SPA modernes tout en tirant parti des frameworks côté serveur existants.
En termes plus simples, Inertia fonctionne comme un ciment qui maintient ensemble vos frameworks côté serveur et côté client, garantissant une communication efficace entre le backend et le frontend. Avec Inertia, au lieu de conserver deux bases de code différentes pour le frontend et le backend ou côté serveur, vous développez l'intégralité de l'application dans une seule base de code comme un monolithe.
Initialement, Inertia ne prenait en charge que Vue et Laravel. Avec ses versions ultérieures, il a évolué et étendu sa prise en charge à davantage de frameworks.
Le monolithe Inertia moderne fournit des fonctionnalités importantes telles que le rendu côté serveur (SSR), la gestion automatisée des versions des actifs, le chargement paresseux des composants de page, la prise en charge de TypeScript, etc. Nous explorerons sa prise en charge du framework plus tard tout en discutant de l'intégration du framework.
L'inertie fonctionne comme un adaptateur entre le frontend et le backend. Il diffère des SPA classiques sur les aspects suivants :
Lorsqu'une requête est effectuée à partir du navigateur à l'aide d'une application basée sur Inertia, elle atteint d'abord le backend. En conséquence, une réponse Inertia est créée, renvoyant d'abord un document HTML complet avec la bibliothèque JavaScript Inertia au navigateur via le client Inertia.
Pour les navigations ultérieures, le client Inertia effectue des requêtes de récupération et reçoit en retour des données JSON du serveur. À l'aide de ces données reçues, le client met ensuite à jour le frontend et les modifications sont reflétées sur l'application sans rechargement complet de la page.
Voici un organigramme expliquant tout ce processus de manière visuelle :
Si vous êtes dans une situation où vous devez utiliser un framework backend traditionnel pour votre SPA, mais que vous avez la liberté de gérer le frontend comme vous le souhaitez, vous devriez envisager d'utiliser Inertia ou un outil similaire.
Inertia est fait sur mesure pour Laravel et offre une plus grande stabilité dans les projets Laravel. Si vous êtes un développeur Laravel et que vous souhaitez faire plus que ce que propose par défaut le modèle Blade, Inertia est quelque chose que vous voudrez peut-être essayer.
Vous pouvez explorer d'autres cas d'utilisation dans lesquels Inertia pourrait être votre ami. Les deux sections suivantes couvrent certains avantages et inconvénients de l'utilisation d'Inertia, ce qui vous aidera à prendre une décision éclairée quant à son choix pour le développement de votre application.
Il existe certains inconvénients connus des SPA en général dont nous ne discuterons pas ici. Au lieu de cela, nous aborderons les inconvénients d'Inertia en tant qu'utilitaire de développement.
Avec Inertia, vous gérez le frontend et le backend de votre application dans une seule base de code. Ce couplage étroit rend Inertia inadapté aux projets qui exigent de maintenir séparément le frontend et le backend pour une meilleure maintenabilité, une séparation des préoccupations, une évolutivité, un développement indépendant, une flexibilité de la pile technologique et d'autres raisons similaires.
L'utilisation d'un outil comme Inertia ajoute un utilitaire supplémentaire à votre pile pour explorer et apprendre. Comprendre les modèles et les conventions spécifiques à l'inertie nécessite une courbe d'apprentissage modérée, ce qui peut être un peu ennuyeux et prendre beaucoup de temps.
Étant donné que l'adaptation à des outils comme Inertia pour le frontend et le backend n'est pas encore courante, il n'existe pas de manière standard de faire les choses avec eux. Par conséquent, s’éloigner d’Inertia nécessiterait une refactorisation importante, en particulier sur le frontend.
De plus, la complexité des tests, en particulier pour les tests API et unitaires, est vouée à augmenter puisque les frontières entre frontend et backend coïncident dans un monolithe.
Inertia compte plus de 6 000 étoiles sur GitHub et plus de 85 contributeurs. Son adaptateur Laravel compte plus de 2 000 étoiles. Toutes ces statistiques combinées sont bien inférieures à celles des outils de la même catégorie qui n'offrent pas autant de fonctionnalités et de support de framework qu'Inertia.
Il peut donc y avoir des circonstances dans lesquelles vous souhaitez construire quelque chose de spécifique avec et ne trouvez pas suffisamment de références et de guides à suivre.
Voir le tableau ci-dessous pour une comparaison frontale entre Inertia.js et certains de ses concurrents comme Livewire.
Rendre votre application hors ligne en premier peut être compliqué avec Inertia, car établir une stratégie de mise en cache judicieuse n'est pas simple avec cet outil. Vous devez également garder à l'esprit qu'Inertia, par défaut, envoie le composant pleine page à chaque requête, augmentant ainsi la taille de la charge utile, ce qui peut être résolu avec des rechargements partiels.
L'inertie présente certains avantages généraux par rapport aux SPA traditionnels rendus côté client. Discutons de certaines de ses principales forces une par une.
Inertia s'intègre parfaitement aux frameworks frontend et backend populaires et fournit un support direct pour Vue dans ses versions de démonstration. Les frameworks et bibliothèques pris en charge, à la fois frontend et backend combinés, incluent Laravel, Rails, Phoenix, Django, React, Vue et Svelte.
Laravel vous permet de créer vos actifs avec Vite, vous offrant une expérience de développement beaucoup plus rapide et plus productive que Laravel Mix basé sur Webpack. Le regroupement d'actifs basé sur Vite convient parfaitement si votre objectif est de mettre en œuvre une interface basée sur JavaScript.
Malgré une expérience de développement légèrement médiocre comme décrit ci-dessus, Inertia offre une intégration simplifiée, éliminant le besoin d'une API distincte pour faire fonctionner ensemble le frontend et le backend. Inertia vous permet d'utiliser des kits de démarrage et fournit des guides d'installation manuelle pour configurer des environnements côté client et côté serveur pour le développement.
Au lieu d'envoyer au client du HTML entièrement rendu par le serveur avec un énorme package JavaScript, les applications Inertia reçoivent un shell HTML minimal avec des données JSON initiales qui s'affichent comparativement plus rapidement sur le client.
Cela rend les applications basées sur Inertia légèrement meilleures en termes de performances initiales sans complexité supplémentaire par rapport à un SPA rendu côté client classique. Il ajoute également à une UX globale de meilleure qualité et améliore le First Contentful Paint, une métrique importante de Core Web Vital.
Les applications basées sur l'inertie utilisent le routage côté serveur, ce qui permet d'obtenir des URL plus soignées et facilement explorables. Cela rend la gestion des métadonnées pour chaque page assez simple. De plus, comme indiqué dans le dernier point, ces applications ont probablement de meilleurs scores FCP en raison de la petite quantité de données initiales envoyées au client.
La combinaison de ces deux fonctionnalités permet d'obtenir un meilleur référencement et donne aux applications Inertia.js un avantage sur les SPA traditionnels.
Astuce : Si le rendu côté client (CSR) a un impact négatif sur la métrique FCP, vous pouvez opter pour une application entièrement rendue par le serveur avec le plugin SSR d'Inertia.js pour améliorer le score.
Étant donné qu'Inertia.js agit comme un adaptateur entre le frontend et le backend, il est bien compact (comme il se doit), ne pesant qu'environ 15 Ko minifié et gzippé.
La documentation Inertia vous permet de démarrer immédiatement, en particulier lorsque vous utilisez Laravel comme framework backend. Il contient également un guide de mise à niveau pour les versions existantes et couvre les concepts généraux aux concepts avancés en un seul endroit.
Apprenons comment configurer Inertia avec deux des solutions frontend et backend les plus populaires : un backend basé sur Laravel avec un frontend alimenté par React. Vous pouvez trouver tout le code couvert dans ce didacticiel dans ce référentiel GitHub.
Notez que cette configuration n'implique pas l'utilisation de TypeScript par souci de simplicité.
En supposant que Laravel soit installé sur votre machine, créons un nouveau projet Laravel en utilisant la commande d'installation de Laravel :
laravel new
Vous devriez voir quelque chose comme ci-dessous dans votre terminal de développeur :
Après avoir exécuté cette commande dans le terminal et fourni un nom pour votre projet, le programme d'installation vous demandera de choisir un kit de démarrage et un framework de test, d'initialiser un dépôt Git et de suivre d'autres logistiques de configuration.
Les kits de démarrage comme Breeze ou Jetstream fournissent des échafaudages prêts à l'emploi basés sur Inertia.js avec une application de démonstration, mais nous ne voulons pas de cela. Nous allons plutôt configurer les choses à partir de zéro.
À la fin des étapes d'installation, vous serez invité à choisir une base de données. J'ai choisi pgsql car j'utilise PostgreSQL pour expliquer cet article. Choisissez le vôtre en fonction de vos préférences de base de données.
Ensuite, nous devrions installer l'intégration Inertia.js pour Laravel en exécutant la commande composer suivante dans le terminal :
composer require inertiajs/inertia-laravel
La commande ci-dessus installera l'adaptateur Laravel pour Inertia et ses dépendances. Cela préparera également le terrain pour que Laravel et Inertia travaillent ensemble.
Après cela, ajoutons le middleware Inertia pour gérer les requêtes Inertia dans Laravel. Utilisez la commande artisanale suivante pour ce faire :
laravel new
Au lieu des modèles Blade par défaut de Laravel, nous utiliserons React pour gérer nos pages et nos composants. Plaçons-nous dans notre dossier de projet et installons React et React DOM à l'aide de la commande suivante. Utilisez le gestionnaire de packages Node de votre choix pour ce faire :
composer require inertiajs/inertia-laravel
Installons également le plugin React de Vite en tant que dépendance de développement, puisque nous utiliserons Vite comme gestionnaire d'actifs tout au long du projet :
php artisan inertia:middleware
Enfin, ajoutez le support Inertia pour React à l'aide de la commande ci-dessous :
pnpm add react react-dom
J'utilise également Tailwind CSS avec cette configuration, qui est complètement facultative. Si vous souhaitez également installer Tailwind CSS, cela implique les mêmes étapes que vous suivez lors de l'installation de Tailwind CSS avec une application React ou Vue.
Tout d'abord, localisez le fichier app.js dans le répertoire resources/js, renommez-le en app.jsx et remplacez son contenu par ce qui suit :
pnpm add --save-dev @vitejs/plugin-react
Les modifications ci-dessus aideront Inertia à identifier nos pages et à les relier aux itinéraires corrects.
Ensuite, renommez le fichier Welcome.blade.php dans le répertoire resources/view en app.blade.php et remplaçons son contenu par ce qui suit :
pnpm add @inertiajs/react
Notez que dans la structure HTML de base d'une page Web, ce fichier contient certaines directives Inertia et Vite nécessaires pour injecter certains scripts pour exécuter des rechargements, ajouter des scripts, etc.
Ensuite, ajoutez le middleware requis dans le fichier bootstrap/app.php pour gérer les requêtes spécifiques à Inertia :
import { createInertiaApp } from "@inertiajs/react";
import { createRoot } from "react-dom/client";
import "../css/app.css";
createInertiaApp({
resolve: (name) => {
const pages = import.meta.glob("./Pages/**/*.jsx", { eager: true });
return pages[`./Pages/${name}.jsx`];
},
setup({ el, App, props }) {
createRoot(el).render(<App {...props} />);
},
});
Configurons également le plugin React pour qu'il fonctionne avec Vite et profite des avantages qu'il offre :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@viteReactRefresh
@vite('resources/js/app.jsx')
@inertiaHead
</head>
<body>
@inertia
<div id="app"></div>
</body>
</html>
Enfin, exécutons Laravel et React tous deux en utilisant les commandes suivantes :
<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use App\Http\Middleware\HandleInertiaRequests;
return Application::configure(basePath: dirname(__DIR__))
->withRouting(
web: __DIR__.'/../routes/web.php',
commands: __DIR__.'/../routes/console.php',
health: '/up',
)
->withMiddleware(function (Middleware $middleware) {
$middleware->web(append: [
HandleInertiaRequests::class,
]);
})
->withExceptions(function (Exceptions $exceptions) {
//
})->create();
Nous pouvons écrire un script Shell pour exécuter ces commandes ensemble dans une seule fenêtre de terminal, mais pour garder les choses simples et faciles, exécutons-les dans deux terminaux distincts pour l'instant.
Une fois ces commandes exécutées avec succès, vous pouvez voir les deux URL locales. Exécutez celui de Laravel pour voir à quoi ressemble votre application Laravel. Et avec cela, vous avez réussi à configurer une application de base avec Inertia !
Vous pouvez faire beaucoup de choses avec votre application Inertia. Jetons un coup d'œil à certaines des fonctionnalités remarquables que vous devriez connaître.
Pour mieux organiser les différentes mises en page et pages, créez deux sous-répertoires dans le répertoire resources/js. Vous pouvez également gérer vos composants dans un répertoire séparé ici et les utiliser dans vos pages à votre guise.
Voici un exemple rapide de notre mise en page principale :
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [
laravel({
input: "resources/js/app.jsx",
refresh: true,
}),
react(),
],
resolve: {
alias: {
"@": "/resources/js",
},
},
});
Il s'agit essentiellement d'un composant qui sert de mise en page de base et est donc placé dans un dossier de mises en page dédié. Le MainLayout peut désormais être utilisé comme composant dans nos pages comme indiqué dans le code suivant :
laravel new
Voici un aperçu de la façon dont MainLayout.jsx et About.jsx peuvent former ensemble une page de travail avec les styles fournis par Tailwind CSS :
Avec le routage Laravel traditionnel, il est facile de créer de nouveaux itinéraires et d'accrocher les pages que nous avons découvertes dans le dernier segment. Même s’il n’est pas basé sur des fichiers, le routage est assez simple à gérer. Si vous avez travaillé avec des frameworks backend basés sur JavaScript comme Express et Fastify, vous connaissez déjà le fonctionnement du routage dans Laravel.
Accédez au fichier routes/web.php, ajoutez de nouvelles routes et affichez la page associée à l'aide de la méthode de rendu d'Inertia, comme indiqué dans le code ci-dessous :
composer require inertiajs/inertia-laravel
La liaison dynamique dans Inertia est similaire à React et Next, et peut être réalisée à l'aide du composant Link d'Inertia, comme indiqué ci-dessous :
php artisan inertia:middleware
La capture d'écran ci-dessous démontre le comportement dynamique de type SPA de la navigation que nous venons d'apprendre à créer dans les blocs de code ci-dessus :
Inertia fournit un hook useForm pour travailler avec les requêtes GET et POST afin de gérer les soumissions d'état et de formulaire. Il fournit également le hook usePage, qui vous permet d'accéder aux données partagées transmises du serveur au client, comme un message de réussite ou d'échec.
Voici un exemple simple qui effectue des requêtes GET et POST pour charger et envoyer des données utilisateur. Notez que la requête GET est implicitement gérée par Inertia, alors que nous effectuons des requêtes POST avec la méthode post depuis le hook useForm pour envoyer des données au serveur :
pnpm add react react-dom
En utilisant cette approche, nous pouvons créer une page pour obtenir une liste de données de la base de données, l'afficher dans un tableau HTML et également ajouter davantage de ces données à la base de données à l'aide d'un formulaire comme indiqué ci-dessous :
Inertia.js fournit une indication de progression basée sur NProgress. Vous pouvez l'activer lors de la création du fichier App.jsx et y fournir des paramètres de configuration pour l'indicateur de progression :
pnpm add --save-dev @vitejs/plugin-react
Si vous n'êtes pas familier avec ce à quoi ressemblent les animations de chargement de NProgress, en voici un petit aperçu :
Si vous travaillez régulièrement avec Laravel, il ne vous faudra pas grand-chose pour intégrer et consommer une base de données dans votre configuration Inertia. Ajoutez simplement les informations d'identification de base de données requises dans le fichier .env, assurez-vous que vous utilisez le bon pilote de base de données, consultez le fichier config/database.php et vous êtes prêt à partir.
Avec une base de données existante, vous pouvez utiliser le système de migration de Laravel pour définir le schéma de base de données requis. Je n'avais pas de base de données, j'en ai donc créé une et l'ai remplie avec de fausses données utilisateur en utilisant le mécanisme Laravel Seeder pour l'afficher sur le frontend. Voici quelques étapes que j'ai suivies par la suite :
Pour quelqu'un qui découvre l'écosystème Laravel ou qui ne travaille pas souvent avec des bases de données avec Laravel, cela peut prendre un peu plus que cela lors de la migration et du remplissage de la base de données. Dans de tels cas, vider le cache de configuration peut grandement aider à éliminer les erreurs causées par les options de configuration mises en cache.
Les applications potentielles d’Inertia sont nombreuses et variées. L'association de Laravel avec une interface JavaScript moderne à l'aide d'Inertia simplifie le développement full-stack pour les applications monolithiques dotées de fonctionnalités backend robustes.
Bien qu'il ne convienne pas à toutes les équipes ou situations, voici quelques cas d'utilisation dans lesquels vous pourriez trouver qu'Inertia est une bonne option :
L'inertie n'est pas la seule solution pour relier les frameworks et bibliothèques côté serveur et côté client. Livewire et Hybridly sont deux autres outils populaires avec leurs propres avantages et inconvénients. Lorsque vous comparez vos options, vous voudrez peut-être considérer :
Ce tableau fournit un aperçu utile de la façon dont ces trois éléments se comparent pour éclairer davantage votre décision :
| Feature | Inertia.js | Livewire | Hybridly |
|---|---|---|---|
| Server-side framework | Laravel, Rails | Laravel only | Laravel only |
| Client-side framework | Vue.js, React, Svelte | None (PHP-based) | Vue.js |
| SPA-like experience | Yes | Yes | Yes |
| Server-side rendering (SSR) | Optional | Yes | Yes |
| Real-time updates | No (needs additional setup) | Yes | Yes |
| Full-page reloads | No | No | No |
| Learning curve | Moderate | Low | Moderate |
| Component-based architecture | Yes | Yes | Yes |
| State management | Client-side | Server-side | Both |
| SEO-friendly | Good | Excellent | Excellent |
| Backend-driven UI | Partial | Full | Full |
| Progressive enhancement | Limited | Yes | Yes |
| File uploads | Supported | Native support | Supported |
| Pagination | Supported | Native support | Supported |
| Form handling | Client-side | Server-side | Both |
| Authentication | Supported | Native support | Supported |
| Authorization | Supported | Native support | Supported |
| Testing | Both client & server | Server | Both client and server |
| Ecosystem/Community | Small | Large | Small (newer) |
| Performance | Very good | Good | Very good |
| Bundle size | Larger (due to JS framework) | Smaller | Moderate |
| Offline support | Possible | Limited | Possible |
| Mobile app development | Possible | Not ideal | Possible |
Dans ce guide d'adoption, nous avons appris ce qu'est Inertia.js et comment il est utilisé pour créer une application hybride utilisant un framework backend traditionnel comme Laravel et une bibliothèque frontend moderne comme React.
Nous avons découvert les avantages et les inconvénients de l'utilisation d'Inertia, certaines de ses applications pratiques et un exemple pour le configurer avec Laravel. Si jamais vous êtes bloqué en suivant le guide, pensez à cloner ce référentiel GitHub pour le projet que nous avons couvert, ou déposez un commentaire et je serai heureux de vous aider.
Il ne fait aucun doute que les frontends deviennent de plus en plus complexes. À mesure que vous ajoutez de nouvelles bibliothèques JavaScript et d'autres dépendances à votre application, vous aurez besoin de plus de visibilité pour garantir que vos utilisateurs ne rencontrent pas de problèmes inconnus.
LogRocket est une solution de surveillance des applications frontales qui vous permet de rejouer les erreurs JavaScript comme si elles se produisaient dans votre propre navigateur afin que vous puissiez réagir plus efficacement aux bugs.
LogRocket fonctionne parfaitement avec n'importe quelle application, quel que soit le framework, et dispose de plugins pour enregistrer un contexte supplémentaire depuis Redux, Vuex et @ngrx/store. Au lieu de deviner pourquoi les problèmes surviennent, vous pouvez regrouper et signaler l'état dans lequel se trouvait votre application lorsqu'un problème est survenu. LogRocket surveille également les performances de votre application, en rapportant des mesures telles que la charge du processeur du client, l'utilisation de la mémoire du client, etc.
Construisez en toute confiance : commencez à surveiller gratuitement.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
