Med så mange muligheder at vælge imellem, er gengivelse et emne, du skal holde dig opdateret på.
Moderne web-frameworks tilbyder mange muligheder for, hvordan man leverer et websted eller en app fra server til klient. Du kan generere HTML på begge sider eller præ-rendere det til højhastighedsdistribution gennem et indholdsleveringsnetværk.
Beslutningen om, hvordan et websted eller en app skal struktureres, afhænger af et par forskellige faktorer. Du skal være opmærksom på, hvordan besøgende får adgang til dit websted eller din app. Du bør forstå, om belastningshastigheden betyder mere ved indledende belastning eller efterfølgende navigation. Overvej også, hvor ofte du vil opdatere webstedet.
Hav alle disse faktorer i tankerne for at afveje fordele og ulemper ved hvert gengivelsesparadigme.
Gengivelse af websteder på flere måder end én
Gengivelse af et websted refererer til den proces, hvorved et websted vises i en webbrowser. Der er mange forskellige måder at nærme sig processen med at konvertere rådata til formateret HTML på en brugers skærm.
Hver metode har sine fordele og ulemper, og at kende fordelene og ulemperne ved hver enkelt metode kan hjælpe dig med at vælge den rigtige til dit websted.
CSR: Browseren tager ansvaret
CSR står for Client Side Rendering. Når du gengiver en app eller et websteds klientside, sender serveren kun lidt eller ingen HTML, bortset fra et lille stykke kedelkode. Siden anmoder derefter om alle data, den har brug for, fra serveren, efter sideindlæsningshændelsen, via AJAX-anmodninger.
Når en app eller side gengiver klientsiden, sender serveren et script til klienten, der genererer HTML'en i klientens browser. Dette giver mulighed for enkeltside-applikationer, der ikke opdaterer browseren, når du interagerer med dem.
CSR-apps er ofte hurtige at indlæse på navigation, men de kan være langsomme at indlæse i starten. Hastigheden vil i høj grad afhænge af den ramme, du vælger til at udføre gengivelsen, og hvor mange ekstra biblioteker og tilføjelser, du bruger. Mest populære moderne JavaScript-rammer inkludere en mulighed for CSR.
Sider og apps, der er gengivet på klientsiden, lider under manglende evne til at navigere direkte til en given side ved hjælp af en URL. Når en gengivet app på klientsiden først starter, uanset den indtastede URL, vil den navigere til det samme udgangspunkt.
SSR: Gengivelse på en central server
SSR står for Server Side Rendering. Dette er en meget mere traditionel form for websidegengivelse, hvor websteder genererer HTML baseret på skabeloner og sender en blanding af HTML, stylesheets og scripts til klienten. Størstedelen af de mest populære backend-webrammer falder ind under denne kategori.
Server Side Rendered apps og websteder har tendens til at have hurtigere indledende belastninger, men hver efterfølgende navigation vil kræve en fuld opdatering. Dette betyder, at det ikke kun vil tage længere tid, men udviklere, der arbejder med SSR, bliver nødt til at tage højde for sessionsstyring.
Den største fordel ved SSR-genererede websteder og apps er konsistensen af stinavigation. En bruger, der indtaster en given sti, vil blive ført direkte til den anmodede side. Nogle frameworks administrerer brugeromdirigeringer fra side til side i appen, men brugerne kan muligvis ikke få adgang til den side, de ønsker i starten.
Mange moderne rammer tilbyder blandede løsninger, der starter med at servere en server-renderet side til klienten. Når siden er indlæst, opstår der en hændelse kendt som hydrering, hvor scripthændelser på klientsiden er knyttet til sidens kontroller. Herfra og ud varetager klienten enhver navigation.
En blandet dynamik giver brugerne mulighed for at gå direkte til en hvilken som helst side i en app, mens de stadig modtager hastigheden og glatheden af en enkeltsidet applikation. Next.js tilbyder flere gengivelsesparadigmer, ligesom Nuxt.js og Sveltekit.
SSG: Minimeret gengivelse
SSG, eller Static Site Generation, omgår behovet for at generere HTML på klient- eller serversiden. I stedet forkompilerer websteder og apps i SSG-stil hver side, de kunne have brug for, og skubber resultaterne til et CDN for hurtig levering.
Dette er en ekstremt effektiv metode til at servere websider ekstremt hurtigt. Resultaterne er normalt kompileret i simple bundter, der indeholder al HTML og stylesheets, der er nødvendige for en individuel side. Disse bundter holdes så kompakte som muligt for at sikre, at brugeren modtager dem så hurtigt som muligt.
SSG-websteder har en tendens til at tilbyde usædvanligt hurtige indlæsningshastigheder, på trods af at de kræver en opdatering for hver navigation. Den største ulempe ved et statisk websted er imidlertid mangel på fleksibilitet. Meget dynamiske systemer såsom sociale medier apps eller komplekse e-handelsplatforme vil kræve langt flere ændringer, end en SSG nemt kan håndtere.
Mange statiske websteder vil også kræve en større mængde overhead at ændre, da hver ny ændring skal kompileres uafhængigt. Dette gør SSG-stil til et dårligt valg for websteder, der ændrer sig hurtigt, som en digital butiksfacade med hurtigt skiftende beholdning eller apps til sociale medier.
ISR: Lidt af det hele
Nemt den mest komplekse type gengivelse, men også den mest fordelagtige, ISR står for Incremental Static Regeneration. ISR blander hastigheden og skalerbarheden af statisk genererede websteder med reaktiviteten af apps i SSR- og CSR-stil.
Når der anmodes om en side i en ISR-lignende side eller app, vil serveren først kontrollere, om der er en uudløbet cachelagret version af siden. Hvis der er, vil serveren straks betjene den cachelagrede side.
Hvis en cachelagret version af siden ikke eksisterer, eller der er gået nok tid siden dens generering, vil serveren generere en ny version. Denne nye version vil blive videregivet til klienten og cachelagret til fremtidig brug.
Denne type gengivelse er mere kompleks at konfigurere, men den automatiserer de fleste af de problemer, som SSG-websteder normalt oplever. Dette gør det muligt for apps at tilbyde både hastigheden og pålideligheden af en statisk genereret app, mens den automatiserer de ekstra omkostninger.
Adskillige moderne rammer tilbyder allerede muligheden for ISR-stil gengivelse. Mange flere har støtte til inkrementel generation i udvikling. De fleste større rammer vil snart understøtte ISR-gengivelse, hvis de ikke allerede gør det.
Hvilken gengivelsestype er den bedste?
Der er flere måder at gengive et websted eller en app. Hver af disse fire gengivelsestyper har flere variationer. Ingen gengivelsestype er ideel til alle projekter, og hvilken type du vælger, afhænger af, hvad der er vigtigst på dit websted eller din app.
Når du vælger et gengivelsesparadigme til dit projekt, er det vigtigt at overveje hastighed, hvordan dit publikum vil bruge dit projekt, og hvor ofte webstedet vil ændre sig. Disse vil være de primære principper, der vil hjælpe dig med at beslutte den bedste måde at strukturere dit websted eller din app på.
