Aller au contenu principal

Bonus – Ressources et suite (React & Vue)

Niveau 5.2 – Laravel Inertia (React & Vue)

Objectif​

Avoir une vue d’ensemble des ressources officielles, des options avancées (SSR, hybridation) et des suites possibles après le Niveau 5.2 : starter kits Laravel (Breeze, Jetstream), TypeScript, tests E2E, et déploiement. Ce module ne rentre pas dans le détail du code ; il donne des pistes et des liens pour aller plus loin.

Ressources officielles​

  • Inertia.js : inertiajs.com – documentation, exemples, API (Link, useForm, router, usePage). Consulter les sections « Server-side setup » (Laravel), « Client-side setup » (React / Vue), et « Manual visits », « Partial reloads », etc.
  • Laravel : laravel.com/docs – routing, validation, Eloquent, auth, file storage. Indispensable pour la partie backend.
  • React : react.dev – hooks, composants, état. Pour approfondir React en dehors d’Inertia.
  • Vue : vuejs.org – Composition API, reactivity, composants. Pour approfondir Vue.
  • Laravel Breeze : laravel.com/docs/starter-kits#breeze – starter kit minimal (auth : login, register, password reset) avec Blade ou React ou Vue + Inertia. Idéal pour démarrer un nouveau projet sans tout configurer à la main.
  • Laravel Jetstream : jetstream.laravel.com – stack plus complète (auth, 2FA, équipes, profil) avec Livewire ou Inertia + React/Vue. Utile si vous voulez une base « prête à l’emploi » avec beaucoup de fonctionnalités.

Server-Side Rendering (SSR)​

Inertia supporte le SSR : le premier rendu de la page peut être fait côté serveur (Node.js) avec React ou Vue, au lieu d’être fait uniquement dans le navigateur. Avantages : meilleur SEO (le HTML contient déjà le contenu) et first contentful paint plus rapide (l’utilisateur voit du contenu avant que tout le JS soit chargé). La configuration demande un script Node qui rend les composants côté serveur et une adaptation du flux Laravel ↔ Node. La doc Inertia dédie une section au SSR ; c’est une option avancée à envisager une fois la stack de base maîtrisée.

TypeScript​

Utiliser TypeScript pour les composants React ou Vue permet de typer les props des pages (et les shared data) et de réduire les erreurs. Vous pouvez définir des interfaces (User, PaginatedData, etc.) et les réutiliser. Certains projets génèrent même ces types à partir du backend (scripts, ou outils comme ziggy pour les routes). Laravel Breeze et Jetstream proposent parfois des versions TypeScript de leurs stacks Inertia.

Tests E2E (Playwright, Cypress)​

Pour tester le flux complet (ouvrir la page, se connecter, créer un utilisateur, vérifier qu’il apparaît dans la liste), vous pouvez utiliser des outils E2E : Playwright ou Cypress. Ils pilotent un navigateur réel (ou headless), cliquent sur les liens et les boutons, remplissent les formulaires, et vérifient le contenu du DOM. Inertia ne change pas la façon d’écrire ces tests : vous testez l’application comme un utilisateur. Utile pour les parcours critiques (inscription, connexion, CRUD principal).

Déploiement et performance​

  • Déploiement : build front (npm run build), déployer le dossier public et storage comme pour toute app Laravel. Les assets compilés (Vite) sont servis depuis public/build. Penser à php artisan storage:link si vous utilisez le disque public pour les uploads.
  • Performance : le lazy loading des pages (via import.meta.glob dans resolve) est déjà en place. Utiliser les partial reloads (option only) pour les pages lourdes. Côté Laravel, optimiser les requêtes (eager loading, pagination) pour ne pas envoyer trop de données en props.

À retenir​

  • Doc Inertia et Laravel comme références principales. Breeze et Jetstream pour des starters avec Inertia + React/Vue.
  • SSR : option avancée pour SEO et premier rendu. TypeScript : recommandé pour les projets un peu conséquents.
  • Tests E2E (Playwright/Cypress) pour les parcours complets. Déploiement : build Vite + déploiement Laravel classique.

Vous avez maintenant toutes les bases du Niveau 5.2 – Laravel Inertia. Pour mettre en pratique sur un projet plus conséquent, passez au Projet 4 – Application Inertia (section Projets de la formation).