Ottimo lavoro! Abbiamo ottenuto alcuni dati e li abbiamo visualizzati con successo all'utente. Tuttavia, abbiamo riscontrato un problema. Il problema deriva dalla nostra dashboard statica, il che significa che eventuali aggiornamenti ai dati non verranno riflessi nell'applicazione.

Approfondiamo i concetti di rendering statico e dinamico.

Rendering Statico

Il rendering statico consiste nel preparare e mostrare i contenuti prima ancora che l'utente li richieda. È come preparare una serie di panini prima che arrivino gli invitati a una festa.

Esempio

Immagina di organizzare un picnic. Invece di preparare i panini quando arrivano gli ospiti, li prepari tutti in anticipo e li metti su un tavolo. Quando le persone arrivano, prendono un panino già pronto. Questo rende tutto più veloce e semplice per tutti.

Vantaggi

• Siti Web più veloci: Come avere panini già pronti, i contenuti pre-preparati possono essere serviti rapidamente e facilmente agli utenti;
• Meno lavoro per il server: Poiché tutto è preparato in anticipo, il server non deve preparare panini (generare contenuti) per ogni persona al loro arrivo;
• Migliore posizionamento nei motori di ricerca: I motori di ricerca trovano più facile comprendere e indicizzare i contenuti pre-generati, come avere un tavolo da picnic ben organizzato.

Casi d'Uso

Il rendering statico è ideale per elementi come post di blog statici o pagine prodotto in cui il contenuto rimane per lo più invariato ed è uguale per tutti.

Rendering Dinamico

Il rendering dinamico consiste nel creare contenuti al momento, in base alle richieste degli utenti. È come uno chef che prepara piatti personalizzati per ogni cliente in un ristorante.

Esempio

Immagina un ristorante dove lo chef cucina i pasti in base a ciò che ogni cliente ordina. Lo chef riceve le richieste, cucina il pasto e lo serve fresco. Questo è simile al rendering dinamico, dove il contenuto viene generato per ogni utente che visita una pagina.

Vantaggi

• Aggiornamenti in tempo reale: Proprio come uno chef può preparare un piatto con ingredienti freschi, il rendering dinamico consente all'applicazione di mostrare dati in tempo reale o frequentemente aggiornati;
• Contenuti personalizzati: Come uno chef che prepara piatti in base alle preferenze dei clienti, il rendering dinamico è ideale per mostrare contenuti personalizzati come dashboard o profili utente;
• Accesso a informazioni specifiche dell'utente: È come uno chef che chiede ai clienti le loro preferenze prima di cucinare – il rendering dinamico permette di accedere a informazioni specifiche di ogni utente, come cookie o parametri di ricerca URL.

Casi d'uso

Il rendering dinamico è utile per applicazioni in cui i dati cambiano spesso o dove i contenuti personalizzati sono importanti, come feed di social media o dashboard in tempo reale.

Torniamo al Progetto

Per la nostra applicazione, preferiamo sempre mostrare le informazioni più aggiornate.

Quando si utilizza @vercel/postgres, le regole di caching non sono predefinite, offrendoci la flessibilità di decidere come gestire i dati – statici o dinamici.

Per rendere la dashboard dinamica, possiamo utilizzare una funzionalità di Next.js chiamata unstable_noStore. Questa permette di saltare il rendering statico. Ecco come:

Nel file data.ts, includere la riga import unstable_noStore from next/cache all'inizio. Poi, utilizzarla nelle funzioni di recupero dati per personalizzare la gestione dei dati.

In Pratica