SSR – en förklaring
SSR, som alltså är en förkortning av Server-Side Rendering, är en webbapplikations förmåga att rendera webbsidan på en server snarare än i själva webbläsaren. När sidan i fråga kommer till klientsidan är den redan fullt ut återgiven – och den är det som en följd av att den först blivit renderad på serversidan.
Då en begäran tas emot på serversidan sker en sammanställning – en kompilering – av all data. Om detta kräver att exempelvis sidans innehåll behöver hämta data från databasen så sker detta automatiskt. Därefter skickas renderad data vidare – först till den renderade sidan och sedan direkt vidare som ett svar till klienten via vald webbläsare.
Varje gång klienten navigerar till sidan, oavsett rutt, kommer servern att göra om jobbet och leverera en nyrenderad sida.
CSR – En förklaring
Om SSR alltså renderar en webbsida på serversidan så gör CSR det motsatta. CSR – Client-Server Rendering – renderar istället en webbsida på på själva klientsidan. Detta innebär att när en begäran tas emot på servern så kommer denna inte att rendera den – istället skickas ett slags skelett, en enda sida, till klienten. Skelettet i fråga skickas kombinerat med Javascript – och så småningom förvandlas också Javascript-sidan till en komplett, fullt ut renderad sida.
Frågan blir naturlig. Var är innehållet och vad händer om exempelvis sidan måste hämta data från databasen? Det är här API kommer in i bilden. Klienten kommer att skicka en begäran till API om att hämta data för att sedan återge densamma till själva sidan.
Om klienten exempelvis skulle navigera till sidan via en annan rutt kommer sidan att renderas om enligt den tidigare begäran som gjordes och detta innebär att sidan alltid är densamma som vid den första begäran.
Skillnaden mellan SSR och CSR
Givet dessa förklaringar ser man att den största skillnaden mellan SSR och CSR är var en webbsida renderas. SSR gör det alltså på servern – detta medan CSR renderar sidan i klienten och hanterar själva routingen utan att en sida behöver uppdateras varje gång en ny rutt begärs av klienten.
Frågan är när man bäst använder respektive variant? Vi gör en liten sammanställning:
Använd SSR om …
- … SEO är din största prioritet. Vill du att alla som exempelvis söker på Google ska hitta till din webbplats så är SSR överlägset CSR.
- … Du vill att din webbplats ska ha en snabbare initial laddning.
- … Du har en sida som inte kräver så mycket interaktion med besökaren.
Använd CRS om …
- … SEO inte är fullt så prioriterad.
- … Du har en sida som bygger på omfattande interaktioner med besökaren.
- … Du bygger en webbapplikation.