Öka webbprestanda och SEO

Om du har interagerat med SEO i flera år, kanske du redan har stött på Server Side Rendering (SSR) som ett av begreppen. Varför välja Server Side Rendering (SSR) istället för rendering på klientsidan?

I den här guiden kommer jag att introducera konceptet Server Side Rendering (SSR), dess betydelse i modern webbutveckling, och skilja mellan Server Side Rendering och Client Side Rendering. Vi kommer också att introducera ramverk och bibliotek som stöder rendering på serversidan och hur de gör det.

Vad är Server Side Rendering (SSR)?

Server Side Rendering (SSR) är en webbutvecklingsteknik där innehåll på en webbsida renderas på servern istället för klientens webbläsare.

För att detta ska hända genererar servern en fullt renderad HTML-sida som den skickar till klientens webbläsare, vilket betyder att det är servern som gör det tunga lyftet. Webbläsaren får en sida som är redo att visas, vilket påskyndar den initiala laddningstiden.

Hur fungerar rendering på serversidan?

Närhelst en användare begär en webbsida, sätter servern ihop all JavaScript-, HTML- och CSS-kod som behövs och skickar sedan en fullständigt utformad sida till användarens webbläsare.

Som sådan behöver webbläsaren inte skapa en sida från början, som det händer med rendering på klientsidan. SSR leder till en snabb initial laddningssida och är också bra för SEO.

Rendering på serversidan använder webbramverk som Vue.js och Gatsby.js bakom kulisserna för att dynamiskt generera en fullt fungerande HTML-sida.

Dessa ramverk hämtar data från API:er eller databaser och använder sedan komponenter eller mallar för att bygga funktionella HTML-dokument. När servern är klar med att skapa sidan skickar den den till klientens webbläsare utan ytterligare bearbetning.


Bildkredit: reactpwa

Så här fungerar rendering på serversidan:

  • Klienten skickar en HTTP-förfrågan: En användare anger en adress i adressfältet på webbläsaren. Webbläsaren upprättar en HTTP-anslutning och skickar en begäran till servern.
  • Datahämtning: Servern hämtar data från API:er eller databasen.
  • Förrendering: Servern kompilerar alla nödvändiga JavaScript-komponenter till statisk HTML och skickar denna HTML till klientens webbläsare.
  • Sidan laddas och renderas: Klienten laddar ner och visar HTML från servern.
  • Hydration: Klienten laddar äntligen ner all JavaScript-kod för att lägga till interaktivitet på HTML-sidan.

Rendering på serversidan kontra klientsidans rendering

Rendering på klientsidan är motsatsen till rendering på serversidan. I grund och botten genererar webbläsaren ett HTML-dokument som den visar för användarna. Det här är skillnaderna mellan dessa två tillvägagångssätt:

FunktionServer-side Rendering (SSR) Client-side Rendering (CSR) Initial laddningstid Snabb initial laddningstidDet kan vara långsam eftersom det är beroende av klientsidans laddning Användarupplevelse Förbättrad och förbättrad användarupplevelse vid första besöket.Det kan ibland resultera i en långsammare användarupplevelsen i den första interaktionen men ökar vid de efterföljande besöken. Tillgänglighet Allt väsentligt innehåll laddas med det initiala HTML-dokumentet som återges på servern. Tillgänglighet kan vara ett problem, särskilt där användare har inaktiverat JavaScriptSEO performanceSSR markerar alla rätt rutor för SEOVissa sökmotorer kan hitta det svårt att indexera några dynamiskt genererade sidor på klientsidan SkalbarhetDet är lätt att skala webbplatser med hög trafik som använder rendering på serversidan. Utvecklare måste komma på ett väl genomtänkt tillvägagångssätt för att skala webbplatser som övar rendering på klientsidan SäkerhetDet är lätt att minska servern -sårbarheter när sidor laddas på servern. Benägna för attacker som cross-site scripting (XSS) och andra sårbarheter i samband med rendering på klientsidan.

Fördelar med rendering på serversidan för SEO

  • Snabb initial laddningstid: Hur lång tid det tar för en sida att ladda är en av faktorerna som besökarna på din webbplats överväger. SSR låter webbplatsanvändare se en fulladdad HTML-sida nästan omedelbart. Den omedelbara laddningen minskar den tid användaren väntar innan de interagerar med en webbsida.
  • Snabb prestanda på långsamma enheter/nätverk: Nätverket som användarna använder för att komma åt dina webbsidor kan vara långsamt, eller så använder de enheter som körs på operativsystem som inte är så snabba. Server-side rendering innebär att användarenheterna inte behöver köra så mycket JavaScript, vilket ökar deras prestanda. Sådana nätverk eller enheter behöver inte längre mycket bandbredd eller processorkraft för att visa de laddade HTML-sidorna.
  • Konsekvent användarupplevelse: SSR låter dig skapa ett bra första intryck genom Time to First Paint (TTFP). Sådana användare kommer att uppfatta din webbplats som först när HTML-sidor laddas snabbt, tack vare rendering på serversidan.
  • Förbättrad SEO: Sökmotorer som Google, Bing och YouTube tar hänsyn till många saker när de rankar webbsidor. Till exempel kommer de att kontrollera användarupplevelsen, hur länge folk spenderar på dina sidor och laddningshastigheten. SSR förbättrar alla dessa områden, vilket innebär att din app sannolikt kommer att rankas högre på sökmotorerna.
  • Lätthanterligt dynamiskt innehåll: Sökmotorer älskar dynamiskt innehåll. Med SSR kan utvecklare nu enkelt hantera dynamiskt innehåll och även personifiera/skräddarsy innehåll baserat på användarnas input och preferenser.
  • Skalbarhet och cachning: I SSR gör servern den initiala laddningen, vilket minskar mängden bearbetning som klienten ska hantera och gör den mer skalbar. SSR kan också använda cachelagring på servernivå och innehållsleveransnätverk (CDN) för att minska serverbelastningen och förbättra prestanda.

Vissa olika verktyg och ramverk implementerar SSR. Vissa är endast utformade för att stödja rendering på serversidan, medan andra är byggda för att stödja rendering på klientsidan och serversidan. Det här är några av de vanligaste du sannolikt kommer att interagera med inom webbutvecklingsvärlden:

Vue.js

Vue.js är ett JavaScript-ramverk för att bygga användargränssnitt och är byggt på standard JavaScript, HTML och CSS. Med detta ramverk kan du bygga enkla och komplexa användargränssnitt med hjälp av dess komponentbaserade och deklarativa programmeringsmodell.

Vue-komponenter producerar och manipulerar som standard Document Object Model (DOM) i webbläsaren som utdata. Men detta ramverk använder också SSR för att rendera sådana komponenter till HTML-strängar på servern och skicka dem direkt till webbläsaren. En server-renderad Vue-app anses vara ”universell” eftersom det mesta av koden körs på servern och klienten.

React.js

Reagera är ett JavaScript-bibliotek för att bygga användargränssnitt. Det här biblioteket använder en komponentbaserad programmeringsmodell där du kan dela upp din applikation i små återanvändbara komponenter. React är också deklarativt, vilket gör koden lätt att förutsäga och felsöka.

React är designat för att implementera rendering på både klientsidan och serversidan som standard. Om du behöver implementera rendering på serversidan på en React-app måste du ställa in den med ett Node.js-appramverk som Express.js. Du måste också uppdatera dina skript i filen package.json för att säkerställa att appen ”startar” från Express-servern.

Gatsby

Gatsby är ett React-baserat ramverk för att bygga webbplatser. Detta ramverk med öppen källkod är utformat för att hjälpa utvecklare att bygga snabba webbapplikationer. Gatsby integreras med olika innehållshanteringssystem som Drupal och WordPress, vilket gör det enkelt att hämta data.

Du behöver en Node.js-server för att ställa in rendering på serversidan på Gatsby. SSR körs på Gatsby Cloud, där varje begäran skickas till en arbetsprocess i getServerData-funktionen. All data från arbetsprocessen skickas till React-komponenten som returnerar ett HTML-dokument.

Vinkel

Vinkel är en utvecklingsplattform byggd med TypeScript. Denna plattform har ett komponentbaserat ramverk som du kan använda för att bygga webbapplikationer. Du kan använda Angular för att bygga små applikationer och applikationer på företagsnivå.

Precis som React implementerar Angular inte SSR som standard. Du kan dock ställa in din Angular-applikation för att implementera server-side rendering genom att kombinera den med Express.js, ett node.js backend-ramverk. Angular Universal låter dig rendera Angular-komponenter på servern och minska den initiala laddningstiden.

Hur man kontrollerar om en webbplats använder SSR eller CSR

Om du är en utvecklare eller marknadsförare är det svårt att avgöra om en webbplats använder server- eller klientsidans rendering när du besöker den. Lyckligtvis kan du inspektera en webbplats för att avgöra vilken renderingsmetod den använder. Vi kan inspektera vår webbplats adminvista.com för att demonstrera. Jag högerklickar på valfri sida och väljer sedan ”Visa sidkälla”.

Om du kan se taggar som ,

  • och
      , är du säker på att de körs på serversidan.

      Begränsningar för rendering på serversidan

      • Ökad kodkomplexitet: Implementering av rendering på serversidan kan kräva ytterligare konfiguration på serversidan. Ett sådant tillvägagångssätt kan leda till en ökad kodbas på serversidan, vilket gör det svårt att underhålla.
      • Ökad serverbelastning: Även om vi har lyft fram att SSR kan förbättra laddningstider, kan det också vara en prestandaflaskhals i tider med hög trafik. Servern ansvarar för att rendera HTML-innehåll, vilket ibland kan överbelasta servern eller till och med leda till att den kraschar.

      Är Server-Side Rendering detsamma som server-side tagging?

      Nej. Rendering på serversidan är en webbutvecklingsmetod där servern skickar en fulladdad HTML-sida till webbläsaren. SSR är tänkt att öka den snabba initiala laddningstiden och förbättra SEO.

      Taggning på klientsidan är där all analys och spårning görs på serversidan. När taggar hanteras på servern behöver klientens webbläsare inte längre hantera sådana processer, vilket ökar säkerheten och ökar prestandan. Lär dig mer om taggning på serversidan för att förstå det bättre.

      Slutsats

      Server-side rendering är ett bra val för alla webbutvecklare som vill öka sin app prestanda genom ökade laddningstider och förbättrad användarupplevelse.

      Å andra sidan, om den inte är väl implementerad, kan SSR vara utmanande eftersom det blir svårt att underhålla koden. Men fördelarna med SSR överväger i hög grad utmaningarna, vilket är anledningen till att många organisationer anammar det.

      Därefter kan du också läsa om anledningar till att använda taggning på serversidan framför taggning på klientsidan.