In precedenza, abbiamo trattato come rendere l'app dinamica. Tuttavia, gestire una grande quantità di dati può comportare richieste di dati lente, influenzando negativamente le prestazioni dell'applicazione.

Ora, analizziamo alcune strategie per migliorare l'esperienza utente quando si affrontano richieste di dati lente.

Teoria

Possiamo utilizzare una tecnica ampiamente adottata chiamata Streaming.

Lo streaming è un metodo per inviare informazioni in parti più piccole invece che tutte insieme. Immaginalo come suddividere un lungo viaggio in tappe più brevi e compiere ogni tappa solo quando si è pronti. Questo aiuta a evitare ritardi e permette di visualizzare e utilizzare parti di una pagina web senza dover attendere il caricamento completo.

In Next.js, esistono due modalità per effettuare lo streaming:

• Per l'intera pagina web, si utilizza un file chiamato loading.tsx;
• Per parti specifiche della pagina web, si utilizza un elemento chiamato <Suspense>.

Vediamo più da vicino come funziona questo meccanismo.

Streaming dell'intera pagina

Creare un file loading.tsx nella cartella dashboard per aggiungere un caricatore all'intera pagina della dashboard.

• loading.tsx: File speciale in Next.js che utilizza Suspense. Permette di creare un'interfaccia utente temporanea (fallback UI) da mostrare mentre il contenuto principale della pagina è in caricamento;
• Poiché la <Sidebar> è statica (non cambia), viene visualizzata immediatamente. Gli utenti possono interagire con essa anche mentre il contenuto dinamico è in caricamento.

Ottimo lavoro! Hai appena utilizzato lo streaming.

Correzione del bug

Il problema attuale è che il caricatore utilizzato nel file loading.tsx viene applicato a tutte le pagine all'interno della cartella dashboard. Tuttavia, cosa succede se abbiamo bisogno di elementi UI specifici per ogni pagina dell'app?

Per risolvere questo bug, è possibile implementare i Route Groups. Creare una cartella (overview) all'interno della directory dashboard e spostare lì i file loading.tsx e page.tsx.

In questo modo, il file loading.tsx verrà applicato esclusivamente alla pagina della dashboard, risolvendo il problema.

I gruppi di route ci aiutano a organizzare ordinatamente i file senza modificare l'indirizzo web. Quando creiamo una cartella con le parentesi (), il nome della cartella non farà parte dell'indirizzo web. Ad esempio, /dashboard/(overview)/page.tsx diventa semplicemente /dashboard.