CSR, SSR, SSG, ISR: Hvordan velge riktig gjengivelsesparadigme

Moderne nettrammeverk tilbyr mange alternativer for hvordan du kan levere et nettsted eller en app fra server til klient. Du kan generere HTML på begge sider, eller forhåndsgjengi den for høyhastighetsdistribusjon gjennom et innholdsleveringsnettverk.

Å bestemme hvordan et nettsted eller en app skal struktureres er avhengig av noen få forskjellige faktorer. Du må være klar over hvordan besøkende får tilgang til nettstedet eller appen din. Du bør forstå om lastehastigheten betyr mer ved første lasting eller etterfølgende navigasjon. Vurder også hvor ofte du vil oppdatere nettstedet.

Ha alle disse faktorene i tankene for å veie opp fordeler og ulemper ved hvert gjengivelsesparadigme.

Gjengivelse av nettsteder på flere måter enn én

Gjengivelse av et nettsted refererer til prosessen der et nettsted vises i en nettleser. Det er mange forskjellige måter å nærme seg prosessen med å konvertere rådata til formatert HTML på en brukers skjerm.

Hver metode har sine fordeler og ulemper, og å kjenne til fordelene og ulempene ved hver metode kan hjelpe deg med å velge den riktige for nettstedet ditt.

CSR: Nettleseren tar ansvar

CSR står for Client Side Rendering. Når du gjengir en app- eller nettstedsklientside, sender serveren lite eller ingen HTML bortsett fra en liten del av koden. Siden ber deretter om alle data den trenger fra serveren, etter sideinnlastingshendelsen, via AJAX-forespørsler.

Når en app eller side gjengir klientsiden, sender serveren et skript til klienten som vil generere HTML-en i klientens nettleser. Dette gir mulighet for enkeltsideapplikasjoner som ikke oppdaterer nettleseren når du samhandler med dem.

CSR-apper er ofte raske å laste på navigering, men de kan være trege å laste inn i starten. Hastigheten vil i stor grad avhenge av rammeverket du velger for å gjøre gjengivelsen og hvor mange ekstra biblioteker og tillegg du bruker. Mest populære moderne JavaScript-rammeverk inkludere et alternativ for CSR.

Fullstendig klient-side gjengitte sider og apper lider av manglende evne til å navigere direkte til en gitt side ved hjelp av en URL. Når en gjengitt app på klientsiden først starter, uavhengig av URL-en som er angitt, vil den navigere til samme startpunkt.

SSR: Gjengivelse på en sentral server

SSR står for Server Side Rendering. Dette er en mye mer tradisjonell form for nettsidegjengivelse der nettsteder genererer HTML basert på maler og sender en blanding av HTML, stilark og skript til klienten. Flertallet av de mest populære backend-nettrammene faller inn i denne kategorien.

Gjengitte apper og nettsteder på serversiden har en tendens til å ha raskere innledende lastinger, men hver påfølgende navigasjon vil kreve en full oppdatering. Dette betyr at ikke bare vil de ta lengre tid, men utviklere som jobber med SSR må ta hensyn til øktadministrasjon.

Den største fordelen med SSR-genererte nettsteder og apper er konsistensen av stinavigering. En bruker som angir en gitt sti vil bli ført direkte til den forespurte siden. Noen rammeverk administrerer brukeromadresseringer fra side til side i appen, men brukere kan kanskje ikke få tilgang til siden de vil ha i utgangspunktet.

Mange moderne rammeverk tilbyr blandede løsninger som starter med å servere en server-gjengitt side til klienten. Når siden er lastet inn, oppstår en hendelse kjent som hydrering der skripthendelser på klientsiden er knyttet til sidens kontroller. Herfra og ut, håndterer klienten all navigering.

En blandet dynamikk gir brukerne muligheten til å gå direkte til en hvilken som helst side i en app, mens de fortsatt mottar hastigheten og jevnheten til en enkeltsideapplikasjon. Next.js tilbyr flere gjengivelsesparadigmer, det samme gjør Nuxt.js og Sveltekit.

SSG: Minimert gjengivelse

SSG, eller Static Site Generation, omgår behovet for å generere HTML på klient- eller serversiden. I stedet forhåndskompilerer nettsteder og apper i SSG-stil hver side de kan trenge, og sender resultatene til et CDN for rask levering.

Dette er en ekstremt effektiv metode for å betjene nettsider ekstremt raskt. Resultatene er vanligvis kompilert i enkle pakker som inneholder all HTML og stilark som trengs for en individuell side. Disse pakkene holdes så kompakte som mulig for å sikre at brukeren mottar dem så raskt som mulig.

SSG-nettsteder har en tendens til å tilby eksepsjonelt raske lastehastigheter, til tross for at de krever en oppdatering for hver navigasjon. Den største ulempen med et statisk nettsted er imidlertid mangelen på fleksibilitet. Svært dynamiske systemer som sosiale medier-apper eller komplekse e-handelsplattformer vil kreve langt flere endringer enn en SSG enkelt kan håndtere.

Mange statiske nettsteder vil også kreve en større mengde overhead for å endre siden hver ny endring må kompileres uavhengig. Dette gjør SSG-stil til et dårlig valg for nettsteder som endrer seg raskt, som en digital butikkfront med raskt skiftende beholdning eller apper for sosiale medier.

ISR: Litt av alt

Enkelt den mest komplekse typen gjengivelse, men også den mest fordelaktige, ISR står for Incremental Static Regeneration. ISR blander hastigheten og skalerbarheten til statisk genererte nettsteder med reaktiviteten til apper i SSR- og CSR-stil.

Når en side er forespurt i en ISR-stil side eller app, vil serveren først sjekke for å se om det er en uutløpt bufret versjon av siden. Hvis det er det, vil serveren umiddelbart betjene den bufrede siden.

Hvis en bufret versjon av siden ikke eksisterer, eller det har gått nok tid siden den ble generert, vil serveren generere en ny versjon. Denne nye versjonen vil bli sendt til klienten og bufret for fremtidig bruk.

Denne typen gjengivelse er mer kompleks å sette opp, men den automatiserer bort de fleste problemene som SSG-nettsteder vanligvis opplever. Dette gjør at apper kan tilby både hastigheten og påliteligheten til en statisk generert app samtidig som den automatiserer bort ekstra overhead.

Flere moderne rammeverk tilbyr allerede muligheten for gjengivelse i ISR-stil. Mange flere har støtte for inkrementell generering i utvikling. De fleste større rammeverk vil snart støtte ISR-gjengivelse hvis de ikke allerede gjør det.

Hvilken gjengivelsestype er best?

Det er flere måter å gjengi et nettsted eller en app. Hver av disse fire gjengivelsestypene har flere variasjoner. Ingen type gjengivelse er ideell for alle prosjekter, og hvilken type du velger vil avhenge av hva som er viktigst på nettstedet eller appen din.

Når du velger et gjengivelsesparadigme for prosjektet ditt, er det viktig å vurdere hastighet, hvordan publikum vil bruke prosjektet ditt, og hvor ofte nettstedet vil endre seg. Dette vil være hovedprinsippene som vil hjelpe deg med å bestemme den beste måten å strukturere nettstedet eller appen på.