Cambi di vista istantanei con il prefetching di Inertia v3

Negli ultimi mesi abbiamo costruito There There presso Spatie, uno strumento di supporto plasmato dai due decenni che abbiamo trascorso gestendo il nostro supporto clienti. L'obiettivo è semplice: l'helpdesk che abbiamo sempre desiderato.

Ci interessa usare l'AI in un modo particolare. Dovrebbe aiutare gli agenti di supporto a scrivere risposte migliori, non sostituirli. L'umano rimane al comando della conversazione, e il modello fa il lavoro ingrato di abbozzare, riformulare e suggerire link. There There è attualmente in beta privata, e puoi richiedere l'accesso anticipato su there-there.app.

Stiamo costruendo There There con Laravel e Inertia, e ci affidiamo molto alle ultime funzionalità che Inertia v3 introduce. Questo post riguarda un'altra di queste: il prefetching al passaggio del mouse (hover).

Usare il prefetch al passaggio del mouse

In un helpdesk, un agente di supporto cambia vista costantemente. I miei ticket aperti, non assegnati, in attesa, spam, viste di team, filtri personalizzati. Ogni cambio attiva un caricamento di pagina con un filtro diverso. Se ogni cambio dipende da un round-trip, la sidebar inizia a sembrare un peso morto.

Inertia v3 ha un'API di prefetching integrata che copre tutto questo in modo ordinato. Invece di aspettare il click, recuperiamo i dati della vista appena il cursore si posiziona sul link, e manteniamo il risultato in una cache a breve termine così che la navigazione effettiva risulti istantanea.

Ecco il cuore del nostro link di vista nella sidebar.

<Link
    href={buildViewUrl(view)}
    prefetch="hover"
    cacheFor="30s"
    preserveState={isOnTickets}
    preserveScroll={isOnTickets}
>
    <Icon className="size-4" />
    <span>{view.label}</span>
</Link>

prefetch="hover" è tutto il meccanismo. Dopo che il cursore rimane sul link per 75ms, Inertia lancia la richiesta sottostante in background. Quando l'agente clicca davvero, la risposta è già in memoria, e la pagina cambia senza attesa di rete.

cacheFor è dove avviene la vera ottimizzazione. Il default è 30 secondi. Per le nostre viste dei ticket, è un punto dolce: abbastanza lungo perché passare avanti e indietro sembri gratuito, abbastanza breve perché i contatori non diventino visibilmente obsoleti. Puoi alzarlo per liste più statiche, o abbassarlo a "0" per viste dove la freschezza conta più della velocità.

Eccolo in azione. Il cursore passa sopra, Inertia scalda la cache in background, e il click arriva su dati che sono già lì.

Un piccolo dettaglio merita di essere segnalato. Quando un agente lascia una vista, spesso vuoi cancellare le richieste in volo per non mostrare dati obsoleti. La chiamata ovvia è router.cancelAll(), ma questa cancella anche i prefetch che stanno felicemente scaldando la cache per le viste che l'agente sta per visitare.

Inertia v3 ti permette di limitare questo comportamento. Ecco come cancelliamo la visita attiva senza toccare i prefetch.

router.cancelAll({ async: false, prefetch: false });

I flag dicono a Inertia di mantenere attivi i prefetch in background e le visite asincrone (come uno scroll infinito), mentre cancella la normale visita di pagina. L'agente ottiene una navigazione immediata e la sidebar rimane pronta per la prossima mossa.

In conclusione

Il prefetching al passaggio del mouse è una di quelle funzionalità che costa quasi nulla da attivare e cambia la sensazione dell'app. Una prop, una durata della cache, e sei a posto. La limitazione della cancellazione è l'unico dettaglio che vale la pena conoscere, perché senza di essa annulleresti la tua stessa ottimizzazione la prima volta che ti allontani da una vista.

Puoi leggere di più nella guida al prefetching di Inertia v3. E se vuoi provare There There di persona, siamo in beta privata e puoi richiedere l'accesso anticipato su there-there.app.