Bra jobbat! Vi har hämtat viss data och framgångsrikt visat den för användaren. Dock har vi stött på ett problem. Problemet uppstår från vår statiska instrumentpanel, vilket innebär att eventuella uppdateringar av datan inte kommer att återspeglas i applikationen.

Låt oss fördjupa oss i begreppen statisk och dynamisk rendering.

Statisk rendering

Statisk rendering innebär att innehållet förbereds och visas innan en användare ens efterfrågar det. Det är som att göra en massa smörgåsar innan gästerna kommer till en fest.

Exempel

Föreställ dig att du anordnar en picknick. Istället för att göra smörgåsar när gästerna anländer, förbereder du flera smörgåsar i förväg och lägger dem på ett bord. När folk kommer, tar de en färdig smörgås. Detta gör det snabbare och enklare för alla.

Fördelar

• Snabbare webbplatser: Precis som färdiggjorda smörgåsar kan förberett innehåll snabbt och enkelt serveras till användare;
• Mindre belastning på servern: Eftersom allt är förberett i förväg behöver servern inte göra smörgåsar (generera innehåll) för varje person när de anländer;
• Bättre sökmotorrankning: Sökmotorer har lättare att förstå och ranka förberett innehåll, likt ett välorganiserat picknickbord.

Användningsområden

Statisk rendering passar bra för exempelvis statiska blogginlägg eller produktsidor där innehållet förblir i stort sett detsamma och är detsamma för alla.

Dynamisk rendering

Dynamisk rendering innebär att innehåll skapas direkt när användare begär det. Det är som en kock som lagar personliga rätter för varje kund på en restaurang.

Exempel

Tänk på en restaurang där kocken lagar mat baserat på vad varje kund beställer. Kocken tar emot beställningar, lagar maten och serverar den färsk. Detta liknar dynamisk rendering, där innehåll genereras för varje användare som besöker en sida.

Fördelar

• Uppdateringar i realtid: Precis som en kock kan laga en rätt med färska ingredienser, gör dynamisk rendering det möjligt för din applikation att visa data i realtid eller ofta uppdaterad data;
• Personligt anpassat innehåll: Likt en kock som lagar mat efter kundens önskemål, är dynamisk rendering utmärkt för att visa personligt innehåll som instrumentpaneler eller användarprofiler;
• Tillgång till användarspecifik information: Det är som att kocken frågar kunderna om deras preferenser innan matlagning – dynamisk rendering ger möjlighet att komma åt information som är specifik för varje användare, såsom cookies eller URL-sökparametrar.

Användningsområden

Dynamisk rendering är användbar för applikationer där data ofta ändras eller där personligt innehåll är viktigt, till exempel sociala medieflöden eller instrumentpaneler i realtid.

Tillbaka till projektet

För vår app föredrar vi alltid att visa den mest aktuella informationen.

När vi använder @vercel/postgres är cache-reglerna inte fördefinierade, vilket ger oss flexibilitet att bestämma hur data hanteras – antingen statiskt eller dynamiskt.

För att göra instrumentpanelen dynamisk kan vi använda en funktion i Next.js som heter unstable_noStore. Den gör det möjligt att hoppa över statisk rendering. Så här gör du:

I filen data.ts, inkludera raden import unstable_noStore from next/cache högst upp. Använd sedan detta i funktionerna för datahämtning för att anpassa hur datan hanteras.

I praktiken