Start Våra artiklar CSR och SSR: Styrkan med Universal JavaScript

CSR och SSR: Styrkan med Universal JavaScript

Att implementera en Single Page Application som fungerar lika bra på mobila enheter som på en stationär dator är inte det lättaste. Dessutom ska din webbapp fungera för sökmotorer som Google och Bing. Det finns flera sätt att tackla utmaningarna vid implementationen av en modern webbapp och i denna artikel diskuteras ett av tillvägagångssätten, nämligen genom Universal JavaScript.

Single Page Applications: Inte utan problem

De senaste åren har användandet av frontend-ramverk och -bibliotek för att göra Single Page Applications (SPAs) exploderat. Några av de mest kända är Angular, React och Vue.js m.fl. Ett problem med dessa verktyg är att dynamiska webbsidor skapas på bekostnad av områden som initial laddningstid av innehåll, SEO (search engine optimization), samt sänkt tillgänglighet i form av krav på att klienten måste tillåta JavaScript.

SPAs förlitar sig till stor del på Client Side Rendering (CSR), där mer innehåll laddas ned till klienten och processorkraft läggs på klientsidan. Det här kan skapa en bra användarupplevelse på mer kraftfulla klienter uppkopplade mot ett fast nät, efter att första sidan har laddats. Styrkan hos CSR kan dock av samma anledning i vissa fall bli en svaghet, på t.ex. mobila enheter, där en seg uppkoppling, eller dålig täckning, gör att användarens första intryck blir en blank förstasida, eller långsamma laddningssnurror. Upplevelsen kommer dessutom variera mycket beroende av enhet, browser och sidans komplexitet. En längre initial laddningstid kan också påverka rankingen för webbsidor hos sökmotorer på ett negativt sätt.

Ett ytterligare problem hos SPAs är att många sökmotorer, och även web crawlers för länkning till externa sidor hos sociala medier, ofta endast hämtar den statiska HTML-sidan, utan att exekvera den JavaScript som SPA-ramverket är beroende av. Resultatet är att majoriteten av innehållet på en webbplats inte indexeras och därmed inte finns med i sökresultatet. De få sökmotorer som idag klarar av att exekvera JavaScript gör dessutom inte detta utan problem.

Det finns sätt att komma runt problemen

Ett sätt att komma runt dessa problem är att använda sig av så kallad Server Side Rendering (SSR), i kombination med den tidigare nämnda CSR, i en teknik som har kommit att kallas för Universal JavaScript. Detta finns implementerat för både Angular, React och Vue.js, men det är idag få webbplatser som använder sig av detta.

Tekniken går generellt ut på att ladda visst innehåll statiskt, webbsidans basinnehåll, som har förrenderats på serversidan, för att sedan hämta annat dynamiskt innehåll på klientsidan efter den första laddningen. Detta kan även användas för att göra sidan mer tillgänglig i de fall som klienten inte stödjer JavaScript (detta kallas ibland för "Graceful degradation").

Att implementera en välfungerande webbapp som ger en bra genomgående användarupplevelse på olika enheter, är idag en komplex uppgift. Strategier för SSR kan hjälpa till med att lösa vissa av dessa problem.