CSR, SSR, SSG, ISR: Hur man väljer rätt renderingsparadigm

Moderna webbramverk erbjuder många alternativ för hur man levererar en webbplats eller app från server till klient. Du kan generera HTML på båda sidor eller förrendera den för höghastighetsdistribution via ett innehållsleveransnätverk.

Att bestämma hur en webbplats eller app ska struktureras beror på några olika faktorer. Du måste vara medveten om hur besökare kommer åt din webbplats eller app. Du bör förstå om laddningshastigheten har större betydelse vid initial laddning eller efterföljande navigering. Tänk också på hur ofta du kommer att uppdatera webbplatsen.

Ha alla dessa faktorer i åtanke för att väga upp för- och nackdelar med varje renderingsparadigm.

Återge webbplatser på fler sätt än ett

Att rendera en webbplats hänvisar till den process genom vilken en webbplats visas i en webbläsare. Det finns många olika sätt att närma sig processen att konvertera rådata till formaterad HTML på en användares skärm.

Varje metod har sina för- och nackdelar, och att känna till fördelarna och nackdelarna med var och en kan hjälpa dig att välja rätt för din webbplats.

CSR: Webbläsaren tar ansvar

CSR står för Client Side Rendering. När du renderar en app- eller webbplatsklientsida skickar servern lite eller ingen HTML utom en liten bit kod. Sidan begär sedan all data den behöver från servern, efter sidladdningshändelsen, via AJAX-förfrågningar.

När en app eller sida renderar klientsidan skickar servern ett skript till klienten som kommer att generera HTML i klientens webbläsare. Detta möjliggör ensidiga applikationer som inte uppdaterar webbläsaren när du interagerar med dem.

CSR-appar är ofta snabba att ladda vid navigering, men de kan vara långsamma att ladda initialt. Hastigheten beror till stor del på det ramverk du väljer för att göra renderingen och hur många extra bibliotek och tillägg du använder. Mest populära moderna JavaScript-ramverk inkludera ett alternativ för CSR.

Helt renderade sidor och appar på klientsidan lider av oförmågan att navigera direkt till en given sida med en URL. När en renderad app på klientsidan först startar, oavsett vilken URL som angetts, navigerar den till samma startpunkt.

SSR: Rendering på en central server

SSR står för Server Side Rendering. Detta är en mycket mer traditionell form av webbsidesrendering där webbplatser genererar HTML baserat på mallar och skickar en blandning av HTML, stilmallar och skript till klienten. Majoriteten av de mest populära backend-webbramverken faller i denna kategori.

Server Side Rendered appar och webbplatser tenderar att ha snabbare initiala laddningar, men varje efterföljande navigering kommer att kräva en fullständig uppdatering. Detta innebär att de inte bara kommer att ta längre tid, utan utvecklare som arbetar med SSR kommer att behöva ta hänsyn till sessionshantering.

Den största fördelen med SSR-genererade webbplatser och appar är konsekvensen i vägnavigeringen. En användare som anger en given sökväg kommer direkt till den begärda sidan. Vissa ramverk hanterar användaromdirigeringar från sida till sida i appen, men användare kanske inte kan komma åt sidan de vill ha initialt.

Många moderna ramverk erbjuder blandade lösningar som börjar med att servera en server-renderad sida till klienten. När sidan har laddats inträffar en händelse som kallas hydrering där skripthändelser på klientsidan kopplas till sidans kontroller. Härifrån och framåt sköter klienten all navigering.

En blandad dynamik erbjuder möjligheten för användare att gå direkt till vilken sida som helst i en app, samtidigt som de får samma hastighet och smidighet som en ensidig applikation. Next.js erbjuder flera renderingsparadigm, liksom Nuxt.js och Sveltekit.

SSG: Minimerad rendering

SSG, eller Static Site Generation, kringgår behovet av att generera HTML på klient- eller serversidan. Istället förkompilerar webbplatser och appar i SSG-stil varje sida som de kan behöva och skickar resultaten till ett CDN för snabb leverans.

Detta är en extremt effektiv metod för att betjäna webbsidor extremt snabbt. Resultaten sammanställs normalt i enkla paket som innehåller all HTML och stilmallar som behövs för en enskild sida. Dessa paket hålls så kompakta som möjligt för att säkerställa att användaren får dem så snabbt som möjligt.

SSG-webbplatser tenderar att erbjuda exceptionellt snabba laddningshastigheter, trots att de kräver en uppdatering för varje navigering. Den stora nackdelen med en statisk webbplats är dock bristen på flexibilitet. Mycket dynamiska system som appar för sociala medier eller komplexa e-handelsplattformar kommer att kräva mycket fler förändringar än vad en SSG lätt kan hantera.

Många statiska webbplatser kommer också att kräva en större mängd omkostnader för att ändra eftersom varje ny ändring kommer att behöva kompileras oberoende. Detta gör SSG-stil till ett dåligt val för webbplatser som förändras snabbt, som ett digitalt skyltfönster med snabbt skiftande lager eller appar för sociala medier.

ISR: Lite av allt

Lätt den mest komplexa typen av rendering, men också den mest fördelaktiga, ISR står för Incremental Static Regeneration. ISR blandar hastigheten och skalbarheten hos statiskt genererade webbplatser med reaktiviteten hos appar i SSR- och CSR-stil.

När någon sida efterfrågas på en sida eller app i ISR-stil kommer servern först att kontrollera om det finns en cachad version av sidan som inte har gått ut. Om det finns kommer servern omedelbart att betjäna den cachade sidan.

Om en cachad version av sidan inte finns, eller om det har gått tillräckligt med tid sedan dess generering, kommer servern att generera en ny version. Denna nya version kommer att skickas till klienten och cachelagras för framtida användning.

Denna typ av rendering är mer komplex att ställa in, men den automatiserar bort de flesta problem som SSG-sajter normalt upplever. Detta gör att appar kan erbjuda både hastigheten och tillförlitligheten hos en statiskt genererad app samtidigt som den automatiserar bort extra omkostnader.

Flera moderna ramverk erbjuder redan möjligheten till rendering i ISR-stil. Många fler har stöd för inkrementell generering i utveckling. De flesta större ramverk kommer snart att stödja ISR-rendering om de inte redan gör det.

Vilken renderingstyp är bäst?

Det finns flera sätt att rendera en webbplats eller app. Var och en av dessa fyra typer av rendering har flera varianter. Ingen typ av rendering är idealisk för alla projekt, och vilken typ du väljer beror på vad som är viktigast på din webbplats eller app.

När du väljer ett renderingsparadigm för ditt projekt är det viktigt att tänka på hastighet, hur din publik kommer att använda ditt projekt och hur ofta webbplatsen kommer att förändras. Dessa kommer att vara de primära principerna som hjälper dig att bestämma det bästa sättet att strukturera din webbplats eller app.