Inertia 3.11 : des props qui se rechargent en direct

Ce qui se passe

Inertia.js 3.11.0 et inertia-laravel 3.7.0 (Pascal Baljet) ajoutent les live props. Une live prop se recharge quand un événement de diffusion arrive : la page se met à jour sans interrogation périodique du serveur.

Comment ça marche

Côté serveur, on enveloppe la prop dans Inertia::live() avec l'événement qui doit la rafraîchir. Inertia lit les canaux dans la méthode broadcastOn() de cet événement :

return Inertia::render('Team/Dashboard', [
    'stats' => Inertia::live(fn () => $team->stats(), on: new StatsUpdated($team)),
]);

Côté client, on passe un transport à createInertiaApp(). Le helper echo() s'appuie sur l'instance Echo que prépare configureEcho() :

import { createInertiaApp } from '@inertiajs/vue3'
import { echo } from '@inertiajs/vue3/echo'
import { configureEcho } from '@laravel/echo-vue'

configureEcho({ broadcaster: 'reverb' })

createInertiaApp({ live: echo() })

À la réception de l'événement, Inertia fait un rechargement partiel de cette seule prop ; plusieurs props qui écoutent le même événement sur le même canal sont rechargées dans une seule requête. on accepte un tableau d'événements, channel remplace les canaux, et les canaux publics, privés, de présence et privés chiffrés fonctionnent. Les paquets @laravel/echo-vue, echo-react et echo-svelte sont des dépendances homologues optionnelles.

Les garde-fous

• Limitation : un rechargement par prop et par seconde par défaut ; throttle: 4000 côté serveur (en millisecondes) ou echo({ throttle: 2000 }) pour toute l'application.
• Onglet caché : les rechargements attendent le retour de l'onglet ; pauseWhenHidden: false dans echo() les autorise aussi en arrière-plan.
• Valeur dans l'événement : par défaut l'événement ne fait que déclencher le rechargement. Avec Inertia::broadcastProps() dans broadcastWith(), il transporte la nouvelle valeur et la page l'utilise sans requête. Tous les abonnés du canal reçoivent la même charge utile : n'y mettez que des valeurs identiques pour chacun.
• Les merge props ne peuvent pas être live ; les props différées, once, optionnelles et always acceptent ->live().

Autour

• Un hook useProp() renvoie la valeur d'une prop avec des indicateurs loading et loaded, y compris pour les chargements de props différées.
• L'en-tête X-Socket-Id est envoyé sur les requêtes de même origine, donc broadcast(...)->toOthers() fonctionne.
• Transports pusher() (tout client au protocole Pusher) et actionCable() (Rails, AnyCable), transports personnalisés avec subscribe() ou subscribeToChannel(), et un événement de routeur live annulable en retournant false.

Comment s'y prendre

Commencer par une seule prop de tableau de bord en live sur Reverb, garder la limite d'une seconde, comparer le nombre de requêtes, et ne passer à broadcastProps() que si le rechargement coûte vraiment cher.

Source : Laravel News, qui reprend les notes de version Inertia.js v3.11.0 et inertia-laravel v3.7.0. Source en anglais.