Godt klaret! Vi har hentet nogle data og vist dem til brugeren. Dog er vi stødt på et problem. Problemet opstår på grund af vores statiske dashboard, hvilket betyder, at eventuelle opdateringer af dataene ikke vil blive afspejlet i applikationen.

Lad os dykke ned i begreberne statisk og dynamisk rendering.

Statisk rendering

Statisk rendering betyder, at indholdet forberedes og vises, før en bruger overhovedet anmoder om det. Det svarer til at lave en masse sandwiches, før gæsterne ankommer til en fest.

Eksempel

Forestil dig, at du holder picnic. I stedet for at lave sandwiches, når gæsterne ankommer, forbereder du en masse sandwiches på forhånd og lægger dem på et bord. Når folk kommer, tager de en færdiglavet sandwich. Dette gør det hurtigere og nemmere for alle.

Fordele

• Hurtigere hjemmesider: Ligesom færdiglavede sandwiches kan forberedt indhold hurtigt og nemt serveres til brugerne;
• Mindre belastning på serveren: Da alt er forberedt på forhånd, behøver serveren ikke lave sandwiches (generere indhold) til hver person, når de ankommer;
• Bedre placering i søgemaskiner: Søgemaskiner har lettere ved at forstå og rangere forberedt indhold, ligesom et velorganiseret picnicbord.

Anvendelsesområder

Statisk rendering er ideel til eksempelvis statiske blogindlæg eller produktsider, hvor indholdet forbliver stort set det samme og er ens for alle.

Dynamisk rendering

Dynamisk rendering betyder, at indhold oprettes i realtid, når brugerne anmoder om det. Det svarer til en kok, der laver personlige retter til hver kunde på en restaurant.

Eksempel

Forestil dig en restaurant, hvor kokken tilbereder måltider baseret på, hvad hver kunde bestiller. Kokken modtager bestillinger, laver maden og serverer den frisk. Dette svarer til dynamisk rendering, hvor indhold genereres for hver bruger, der besøger en side.

Fordele

• Opdateringer i realtid: Ligesom en kok kan lave en ret med friske ingredienser, gør dynamisk rendering det muligt for din applikation at vise data i realtid eller ofte opdaterede data;
• Personligt indhold: Som en kok, der laver retter baseret på kundens præferencer, er dynamisk rendering ideel til at vise personligt indhold som dashboards eller brugerprofiler;
• Adgang til bruger-specifik information: Det svarer til, at en kok spørger kunderne om deres præferencer, før han laver mad – dynamisk rendering giver mulighed for at tilgå information, der er specifik for hver bruger, såsom cookies eller URL-søgeparametre.

Anvendelsesområder

Dynamisk rendering er nyttig til applikationer, hvor data ofte ændres, eller hvor personligt indhold er vigtigt, som sociale medie-feeds eller realtidsdashboards.

Tilbage til projektet

For vores app foretrækker vi altid at vise de mest opdaterede oplysninger.

Når vi bruger @vercel/postgres, er cache-reglerne ikke foruddefinerede, hvilket giver os fleksibilitet til at bestemme, hvordan data håndteres – om det skal være statisk eller dynamisk.

For at gøre dashboardet dynamisk kan vi bruge en funktion i Next.js kaldet unstable_noStore. Den gør det muligt at springe statisk rendering over. Sådan gør du:

I filen data.ts skal du inkludere linjen import unstable_noStore from next/cache øverst. Brug derefter funktionen i datahentningsfunktionerne for at tilpasse, hvordan dataene håndteres.

I praksis