Goed gedaan! We hebben wat data verkregen en deze succesvol aan de gebruiker getoond. We zijn echter op een probleem gestuit. Het probleem komt voort uit ons statische dashboard, wat betekent dat eventuele updates aan de data niet worden weergegeven in de applicatie.

Laten we ons verdiepen in de concepten van statische en dynamische rendering.

Statische rendering

Statische rendering houdt in dat content wordt voorbereid en getoond voordat een gebruiker erom vraagt. Het is vergelijkbaar met het maken van een stapel sandwiches voordat de gasten op een feest arriveren.

Voorbeeld

Stel je voor dat je een picknick organiseert. In plaats van sandwiches te maken wanneer de gasten aankomen, bereid je vooraf een aantal sandwiches en leg je deze op tafel. Wanneer mensen komen, pakken ze een vooraf gemaakte sandwich. Dit maakt het sneller en gemakkelijker voor iedereen.

Voordelen

• Snellere websites: Net als bij kant-en-klare sandwiches kan vooraf voorbereide content snel en eenvoudig aan gebruikers worden geleverd;
• Minder belasting voor de server: Omdat alles van tevoren is voorbereid, hoeft de server geen sandwiches (content genereren) te maken voor elke bezoeker die arriveert;
• Betere zoekmachineresultaten: Zoekmachines kunnen vooraf gemaakte content eenvoudiger begrijpen en indexeren, vergelijkbaar met een goed georganiseerde picknicktafel.

Gebruikssituaties

Statische rendering is ideaal voor zaken als statische blogposts of productpagina's waarbij de content grotendeels hetzelfde blijft en voor iedereen gelijk is.

Dynamische Rendering

Dynamische rendering betekent het genereren van content op het moment dat gebruikers hierom vragen. Het is vergelijkbaar met een chef-kok die voor elke klant een gepersonaliseerd gerecht bereidt in een restaurant.

Voorbeeld

Denk aan een restaurant waar de chef-kok maaltijden bereidt op basis van de bestelling van elke klant. De chef ontvangt het verzoek, kookt de maaltijd en serveert deze vers. Dit lijkt op dynamische rendering, waarbij content wordt gegenereerd voor elke gebruiker die een pagina bezoekt.

Voordelen

• Realtime updates: Net zoals een chef-kok een gerecht met verse ingrediënten kan maken, maakt dynamische rendering het mogelijk om realtime of vaak bijgewerkte gegevens weer te geven;
• Gepersonaliseerde content: Zoals een chef-kok gerechten bereidt op basis van klantvoorkeuren, is dynamische rendering ideaal voor het tonen van gepersonaliseerde content zoals dashboards of gebruikersprofielen;
• Toegang tot gebruikersspecifieke informatie: Het is alsof een chef-kok klanten naar hun voorkeuren vraagt voordat hij gaat koken – dynamische rendering maakt het mogelijk om informatie te gebruiken die specifiek is voor elke gebruiker, zoals cookies of URL-zoekparameters.

Gebruikssituaties

Dynamische rendering is nuttig voor applicaties waarbij gegevens vaak veranderen of waar gepersonaliseerde content belangrijk is, zoals sociale media-feeds of realtime dashboards.

Terug naar het project

Voor onze app geven we altijd de voorkeur aan het tonen van de meest actuele informatie.

Bij het gebruik van @vercel/postgres zijn de cachingregels niet vooraf gedefinieerd, waardoor we de flexibiliteit hebben om te bepalen hoe gegevens worden verwerkt – of dit nu statisch of dynamisch is.

Om het dashboard dynamisch te maken, kunnen we een functie in Next.js gebruiken genaamd unstable_noStore. Hiermee kunnen we statische rendering overslaan. Zo werkt het:

Voeg in het bestand data.ts de regel import unstable_noStore from next/cache toe aan het begin. Gebruik deze vervolgens in de data-fetching functies om aan te passen hoe de gegevens worden verwerkt.

In de praktijk