POC/Kitstarter Application Web Next Gen - Archi Universelle - sans API

Architecture Universelle Laravel + Inertia + React (SSR)

L'objectif principal de "Proof of Concept" est de créer une architecture NextGen d'une Web application performante qui permet de conserver à un unique endroit les règles métiers (backend Laravel), tout en profitant d'un frontend très performant, rapide pour l'utilisateur (React SSR).

Versions & Dépendances

⚙️ Technologie	🔢 Version recommandée
	^12.0
	>= 22.14.0
	^2.0
	^4.18.0
	^18.2.0
	^5.4.0
	^3.2.0

Cheminement de la requête

1. Backend PHP (Laravel)
   Laravel reçoit la requête HTTP, résout la route, et transmet la demande au moteur de rendu React via Inertia.js.

2. Middleware Inertia (Laravel)
   Détermine quel composant React afficher et envoie ses props au serveur Node.js.

3. Backend Node.js (Express + Vite SSR)
   Utilise Vite pour exécuter et pré-rendre les composants React en HTML.

4. Retour vers Laravel
   Le HTML généré est injecté dans une vue Blade, et renvoyé au client par Laravel.

5. Navigateur (Client)
   Le navigateur reçoit une page HTML pré-rendue. Le JavaScript se charge ensuite pour hydrater les composants React et activer l’interactivité.

---

Avantages de l’architecture universelle sans API

Simplicité & rapidité de développement

• Aucun besoin de créer et maintenir une API.
• Un seul backend (Laravel) pour les règles métier, la sécurité et les routes.
• Moins de duplication entre frontend et backend.

Performances optimales

• Rendu initial rapide grâce au SSR.
• Expérience utilisateur fluide et immédiate.
• Moins de charge côté client.

SEO & accessibilité

• Le contenu HTML est visible dès le premier chargement.
• Meilleure indexabilité par les moteurs de recherche.
• Compatible avec les lecteurs d’écran.

Technologies Utilisées

• Backend : Laravel
• Frontend : React
• Routage : Inertia.js
• Style : Tailwind CSS
• Base de données : MySQL (ou toute autre base de données de votre choix)

Versions

• Laravel : 12.0
• Node.js : >= 22.14
• Inertia.js : 2.0
• Express : ^4.18.0
• React : ^18.2.0
• Vite : ^5.4.0
• Tailwind CSS : ^3.2.0

Rendu Côté Serveur (SSR)

Cette application utilise Inertia.js pour activer le rendu côté serveur, ce qui permet :

• Amélioration des performances : Les chargements de pages initiaux sont plus rapides car le serveur envoie du HTML entièrement rendu au client.
• Avantages SEO : Les moteurs de recherche peuvent explorer le contenu plus efficacement puisque le HTML est généré sur le serveur.
• Navigation fluide : Inertia.js permet des transitions douces entre les pages sans rechargement complet, améliorant ainsi l'expérience utilisateur.

Comment fonctionne le SSR dans ce projet

1. Demande initiale : Lorsqu'un utilisateur navigue vers une page, la demande est envoyée au backend Laravel.
2. Récupération des données : Le contrôleur récupère les données nécessaires, y compris les props requises pour la page (par exemple, menuItems).
3. Rendu : Laravel utilise Inertia pour rendre la page avec les données récupérées et envoie le HTML entièrement rendu au client.
4. Hydratation : Une fois le HTML chargé dans le navigateur, React prend le relais et hydrate la page, permettant des interactions dynamiques.

Installation

Prérequis

• PHP >= 8.4.X
• Composer
• Node.js >= 22.14
• NPM ou Yarn

Étapes pour configurer le projet

1. Cloner le dépôt

   git clone https://github.com/votreusername/poc-archi-universelle.git
   cd poc-archi-universelle

2. Installer les dépendances backend

   Accédez au répertoire du projet et installez les dépendances PHP à l'aide de Composer :

   composer install

3. Configurer les variables d'environnement

   Copiez le fichier .env.example en .env et configurez votre base de données et d'autres paramètres d'environnement :

   cp .env.example .env

   Ensuite, générez la clé de l'application :

   php artisan key:generate

4. Exécuter les migrations

   Si vous avez des migrations, exécutez-les pour configurer votre base de données :

   php artisan migrate

5. Installer les dépendances frontend

   Accédez au répertoire frontend et installez les dépendances JavaScript à l'aide de NPM ou Yarn :

   npm install

6. Exécuter le serveur de développement

   Démarrez le serveur de développement Laravel :

   php artisan serve

   Dans un terminal séparé, démarrez le serveur de développement Express :

   node server.js

   Dans un autre terminal, démarrez le serveur de développement Vite :

   npm run dev
   

7. Accéder à l'application

   Ouvrez votre navigateur et allez à http://127.0.0.1:8000/ pour voir l'application.

Licence

Ce projet est sous licence MIT - voir le fichier LICENSE pour plus de détails.