Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Dynamisk vs. Statisk Rendering i Next.js | Henting og Visning av Data i Next.js
Next.js 14-mestring for Bygging av Moderne Webapplikasjoner

bookDynamisk vs. Statisk Rendering i Next.js

Godt jobbet! Vi har hentet inn noen data og vist dem til brukeren. Likevel har vi støtt på et problem. Problemet skyldes vårt statiske dashbord, noe som betyr at eventuelle oppdateringer i dataene ikke vil vises i applikasjonen.

La oss se nærmere på konseptene statisk og dynamisk rendering.

Statisk rendering

Statisk rendering innebærer å forberede og vise innhold før en bruker i det hele tatt ber om det. Det er som å lage en haug med smørbrød før gjestene kommer til en fest.

Eksempel

Tenk deg at du arrangerer en piknik. I stedet for å lage smørbrød når gjestene ankommer, forbereder du mange smørbrød på forhånd og legger dem på et bord. Når folk kommer, tar de et ferdiglaget smørbrød. Dette gjør det raskere og enklere for alle.

Fordeler

  • Raskere nettsider: Akkurat som med ferdiglagde smørbrød, kan forhåndslagret innhold raskt og enkelt serveres til brukerne;
  • Mindre belastning på serveren: Siden alt er forberedt på forhånd, trenger ikke serveren å lage smørbrød (generere innhold) for hver person som kommer;
  • Bedre rangering i søkemotorer: Søkemotorer har lettere for å forstå og rangere forhåndslagret innhold, på samme måte som et godt organisert piknikbord.

Bruksområder

Statisk rendering passer godt for ting som statiske blogginnlegg eller produktsider der innholdet stort sett er det samme og likt for alle.

Dynamisk gjengivelse

Dynamisk gjengivelse innebærer å generere innhold i sanntid når brukere etterspør det. Det er som en kokk som lager personlige retter til hver kunde på en restaurant.

Eksempel

Tenk på en restaurant der kokken tilbereder måltider basert på hva hver kunde bestiller. Kokken mottar bestillinger, lager maten og serverer den fersk. Dette ligner på dynamisk gjengivelse, hvor innhold genereres for hver bruker som besøker en side.

Fordeler

  • Sanntidsoppdateringer: Akkurat som en kokk kan lage en rett med ferske ingredienser, gjør dynamisk gjengivelse det mulig for applikasjonen å vise sanntidsdata eller ofte oppdatert informasjon;
  • Personlig tilpasset innhold: Som en kokk som lager retter etter kundens preferanser, er dynamisk gjengivelse ideelt for å vise personlig tilpasset innhold som dashbord eller brukerprofiler;
  • Tilgang til brukerspesifikk informasjon: Det er som at kokken spør kundene om deres preferanser før matlaging – dynamisk gjengivelse gir tilgang til informasjon som er spesifikk for hver bruker, som informasjonskapsler eller URL-søkparametere.

Bruksområder

Dynamisk gjengivelse er nyttig for applikasjoner der data ofte endres eller der personlig tilpasset innhold er viktig, som sosiale medier-feeder eller dashbord i sanntid.

Tilbake til prosjektet

For vår app ønsker vi alltid å vise den mest oppdaterte informasjonen.

Når vi bruker @vercel/postgres, er ikke hurtigbufferreglene forhåndsdefinerte, noe som gir oss fleksibilitet til å bestemme hvordan data håndteres – enten statisk eller dynamisk.

For å gjøre dashbordet dynamisk, kan vi bruke en funksjon i Next.js kalt unstable_noStore. Den lar oss hoppe over statisk gjengivelse. Slik gjør du det:

I data.ts-filen, inkluder linjen import unstable_noStore from next/cache øverst. Bruk deretter denne i funksjonene for datainnhenting for å tilpasse hvordan dataene håndteres.

I praksis

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 4

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.08

bookDynamisk vs. Statisk Rendering i Next.js

Sveip for å vise menyen

Godt jobbet! Vi har hentet inn noen data og vist dem til brukeren. Likevel har vi støtt på et problem. Problemet skyldes vårt statiske dashbord, noe som betyr at eventuelle oppdateringer i dataene ikke vil vises i applikasjonen.

La oss se nærmere på konseptene statisk og dynamisk rendering.

Statisk rendering

Statisk rendering innebærer å forberede og vise innhold før en bruker i det hele tatt ber om det. Det er som å lage en haug med smørbrød før gjestene kommer til en fest.

Eksempel

Tenk deg at du arrangerer en piknik. I stedet for å lage smørbrød når gjestene ankommer, forbereder du mange smørbrød på forhånd og legger dem på et bord. Når folk kommer, tar de et ferdiglaget smørbrød. Dette gjør det raskere og enklere for alle.

Fordeler

  • Raskere nettsider: Akkurat som med ferdiglagde smørbrød, kan forhåndslagret innhold raskt og enkelt serveres til brukerne;
  • Mindre belastning på serveren: Siden alt er forberedt på forhånd, trenger ikke serveren å lage smørbrød (generere innhold) for hver person som kommer;
  • Bedre rangering i søkemotorer: Søkemotorer har lettere for å forstå og rangere forhåndslagret innhold, på samme måte som et godt organisert piknikbord.

Bruksområder

Statisk rendering passer godt for ting som statiske blogginnlegg eller produktsider der innholdet stort sett er det samme og likt for alle.

Dynamisk gjengivelse

Dynamisk gjengivelse innebærer å generere innhold i sanntid når brukere etterspør det. Det er som en kokk som lager personlige retter til hver kunde på en restaurant.

Eksempel

Tenk på en restaurant der kokken tilbereder måltider basert på hva hver kunde bestiller. Kokken mottar bestillinger, lager maten og serverer den fersk. Dette ligner på dynamisk gjengivelse, hvor innhold genereres for hver bruker som besøker en side.

Fordeler

  • Sanntidsoppdateringer: Akkurat som en kokk kan lage en rett med ferske ingredienser, gjør dynamisk gjengivelse det mulig for applikasjonen å vise sanntidsdata eller ofte oppdatert informasjon;
  • Personlig tilpasset innhold: Som en kokk som lager retter etter kundens preferanser, er dynamisk gjengivelse ideelt for å vise personlig tilpasset innhold som dashbord eller brukerprofiler;
  • Tilgang til brukerspesifikk informasjon: Det er som at kokken spør kundene om deres preferanser før matlaging – dynamisk gjengivelse gir tilgang til informasjon som er spesifikk for hver bruker, som informasjonskapsler eller URL-søkparametere.

Bruksområder

Dynamisk gjengivelse er nyttig for applikasjoner der data ofte endres eller der personlig tilpasset innhold er viktig, som sosiale medier-feeder eller dashbord i sanntid.

Tilbake til prosjektet

For vår app ønsker vi alltid å vise den mest oppdaterte informasjonen.

Når vi bruker @vercel/postgres, er ikke hurtigbufferreglene forhåndsdefinerte, noe som gir oss fleksibilitet til å bestemme hvordan data håndteres – enten statisk eller dynamisk.

For å gjøre dashbordet dynamisk, kan vi bruke en funksjon i Next.js kalt unstable_noStore. Den lar oss hoppe over statisk gjengivelse. Slik gjør du det:

I data.ts-filen, inkluder linjen import unstable_noStore from next/cache øverst. Bruk deretter denne i funksjonene for datainnhenting for å tilpasse hvordan dataene håndteres.

I praksis

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 4
some-alt