Hvis du har jobbet med søkemotoroptimalisering (SEO) i mange år, har du sannsynligvis støtt på begrepet Server Side Rendering (SSR). Men hvorfor skulle man velge server-side rendering fremfor rendering på klientsiden?
I denne veiledningen skal vi utforske konseptet Server Side Rendering (SSR), se på betydningen av dette i moderne webutvikling, og forklare forskjellene mellom SSR og Client Side Rendering (CSR). Vi vil også se på hvilke rammeverk og biblioteker som støtter server-side rendering, og hvordan de fungerer.
Hva er Server Side Rendering (SSR)?
Server Side Rendering (SSR) er en teknikk innen webutvikling der innholdet på en nettside blir generert på serveren, i stedet for i nettleseren til brukeren.
Dette skjer ved at serveren produserer en fullstendig HTML-side som deretter sendes til nettleseren. Det er altså serveren som gjør den tyngste jobben. Nettleseren mottar en ferdig side som er klar til visning, noe som gir raskere sideinnlasting ved første besøk.
Hvordan fungerer server-side rendering?
Når en bruker ber om en nettside, setter serveren sammen all den nødvendige JavaScript-, HTML- og CSS-koden. Deretter sendes en komplett side til brukerens nettleser.
Nettleseren trenger dermed ikke å bygge siden fra bunnen av, som er tilfellet ved rendering på klientsiden. SSR gir raskere sideinnlasting og er også gunstig for SEO (søkemotoroptimalisering).
Server-side rendering bruker webrammeverk som Vue.js og Gatsby.js i bakgrunnen for å dynamisk generere en fullt funksjonell HTML-side.
Disse rammeverkene henter data fra API-er eller databaser, og bruker deretter komponenter eller maler for å bygge komplette HTML-dokumenter. Når serveren er ferdig med å generere siden, sender den den til nettleseren uten ytterligere behandling.
Bildekreditt: reactpwa
Slik fungerer server-side rendering:
- Klienten sender en HTTP-forespørsel: En bruker skriver inn en adresse i nettleseren. Nettleseren oppretter en HTTP-forbindelse og sender en forespørsel til serveren.
- Datahenting: Serveren henter data fra API-er eller databasen.
- Forhåndsgjengivelse: Serveren kompilerer alle nødvendige JavaScript-komponenter til statisk HTML og sender denne HTML-en til klientnettleseren.
- Siden lastes og vises: Klienten laster ned og viser HTML-en fra serveren.
- Hydration: Klienten laster til slutt ned all JavaScript-kode for å legge til interaktivitet på HTML-siden.
Server-side rendering kontra klient-side rendering
Klient-side rendering (CSR) er det motsatte av server-side rendering. Her er det nettleseren som genererer HTML-dokumentet som vises til brukeren. Her er en oversikt over forskjellene mellom de to tilnærmingene:
| Funksjon | Server-side rendering (SSR) | Klient-side rendering (CSR) |
| Innledende innlastingstid | Rask innledende innlastingstid | Kan være tregt da det er avhengig av lasting på klientsiden |
| Brukeropplevelse | Forbedret brukeropplevelse ved første besøk | Kan gi tregere brukeropplevelse ved første besøk, men øker ved påfølgende besøk |
| Tilgjengelighet | Alt essensielt innhold lastes inn med HTML-dokumentet som genereres på serveren | Tilgjengelighet kan være et problem, spesielt for brukere som har deaktivert JavaScript |
| SEO-ytelse | SSR er godt egnet for SEO | Noen søkemotorer kan ha problemer med å indeksere dynamisk genererte sider på klientsiden |
| Skalerbarhet | Det er enkelt å skalere nettsteder med høy trafikk som bruker server-side rendering | Utviklere må ha en god plan for å skalere nettsteder som bruker klient-side rendering |
| Sikkerhet | Det er enkelt å redusere server-side sårbarheter ettersom sidene lastes inn på serveren | Mer utsatt for angrep som cross-site scripting (XSS) og andre sårbarheter knyttet til klient-side rendering |
Fordeler med server-side rendering for SEO
- Rask innledende lastetid: Hvor raskt en side laster er viktig for brukeropplevelsen. SSR gir brukere en fullstendig lastet HTML-side nesten umiddelbart. Rask lasting reduserer tiden brukeren venter før han samhandler med siden.
- Rask ytelse på trege enheter/nettverk: Brukere kan ha tregt nettverk eller enheter med begrenset prosessorkraft. SSR betyr at enhetene ikke trenger å kjøre så mye JavaScript, noe som øker ytelsen. Enheter med dårligere nettverk eller prosessorkraft trenger ikke lenger like mye båndbredde eller prosessorkraft for å vise de lastede HTML-sidene.
- Konsekvent brukeropplevelse: SSR lar deg skape et godt førsteinntrykk gjennom Time to First Paint (TTFP). Rask lasting av HTML-sider gir et positivt inntrykk.
- Forbedret SEO: Søkemotorer som Google, Bing og YouTube vurderer mange faktorer når de rangerer nettsider. De ser blant annet på brukeropplevelse, hvor lang tid folk bruker på sidene dine og sidehastighet. SSR forbedrer alle disse områdene, noe som øker sjansen for at appen din rangerer høyere i søkemotorer.
- Enkel håndtering av dynamisk innhold: Søkemotorer liker dynamisk innhold. Med SSR kan utviklere enkelt håndtere dynamisk innhold og tilpasse innholdet basert på brukerinndata og preferanser.
- Skalerbarhet og caching: I SSR tar serveren seg av den første lastingen, noe som reduserer belastningen på klienten og gjør applikasjonen mer skalerbar. SSR kan også bruke caching på servernivå og Content Delivery Networks (CDN) for å redusere serverbelastningen og forbedre ytelsen.
Det finnes flere verktøy og rammeverk for å implementere SSR. Noen er laget spesielt for server-side rendering, mens andre støtter både klient- og server-side rendering. Her er noen av de vanligste:
Vue.js
Vue.js er et JavaScript-rammeverk for å bygge brukergrensesnitt, basert på standard JavaScript, HTML og CSS. Med Vue.js kan du bygge både enkle og komplekse brukergrensesnitt ved hjelp av en komponentbasert og deklarativ programmeringsmodell.
Som standard genererer og manipulerer Vue-komponenter Document Object Model (DOM) i nettleseren. Rammeverket kan imidlertid også bruke SSR for å generere HTML-strenger på serveren og sende dem direkte til nettleseren. En server-rendret Vue-app kalles ofte en «universell» app, ettersom mye av koden kjører på både serveren og klienten.
React.js
React er et JavaScript-bibliotek for å bygge brukergrensesnitt. Biblioteket bruker en komponentbasert programmeringsmodell der du deler applikasjonen inn i små, gjenbrukbare komponenter. React er også deklarativt, noe som gjør koden enklere å forstå og feilsøke.
React er designet for å støtte både klient- og server-side rendering. For å implementere server-side rendering i en React-app, må du konfigurere den med et Node.js-rammeverk som Express.js. Du må også oppdatere skriptene i package.json-filen for å sikre at appen «starter» fra Express-serveren.
Gatsby
Gatsby er et React-basert rammeverk for å bygge nettsider. Dette rammeverket er utviklet for å hjelpe utviklere med å bygge raske webapplikasjoner. Gatsby integreres med ulike innholdsstyringssystemer som Drupal og WordPress, noe som gjør det enkelt å hente data.
Du trenger en Node.js-server for å sette opp server-side rendering i Gatsby. SSR kjører på Gatsby Cloud, der hver forespørsel sendes til en arbeidsprosess i `getServerData`-funksjonen. Dataene fra denne prosessen sendes til React-komponenten, som returnerer et HTML-dokument.
Angular
Angular er en utviklingsplattform bygget med TypeScript. Plattformen har et komponentbasert rammeverk som du kan bruke til å bygge webapplikasjoner. Du kan bruke Angular til å bygge både små og store bedriftsapplikasjoner.
I likhet med React implementerer ikke Angular SSR som standard. Du kan imidlertid sette opp Angular-applikasjonen din for å implementere server-side rendering ved å kombinere den med Express.js, et Node.js backend-rammeverk. Angular Universal lar deg rendre Angular-komponenter på serveren, noe som reduserer den innledende lastetiden.
Hvordan sjekke om et nettsted bruker SSR eller CSR
Hvis du er utvikler eller markedsfører, kan det være vanskelig å avgjøre om et nettsted bruker server- eller klient-side rendering bare ved å besøke det. Heldigvis kan du inspisere et nettsted for å finne ut hvilken metode som brukes. La oss inspisere nettstedet tipsbilk.net som et eksempel. Jeg høyreklikker på en side og velger «Vis sidekilde».
Hvis du ser HTML-tagger som ``, `
- ` i kildekoden, er det stor sannsynlighet for at nettstedet bruker server-side rendering.
Begrensninger med server-side rendering
- Økt kodekompleksitet: Implementering av server-side rendering kan kreve ytterligere konfigurasjon på serveren. Dette kan føre til økt kodebase på serversiden, noe som kan gjøre vedlikehold vanskeligere.
- Økt serverbelastning: Selv om SSR kan forbedre lastetidene, kan det også føre til flaskehalser ved høy trafikk. Serveren er ansvarlig for å generere HTML-innholdet, noe som kan overbelaste den og i verste fall føre til krasj.
Er server-side rendering det samme som server-side tagging?
Nei. Server-side rendering er en webutviklingsteknikk der serveren sender en komplett HTML-side til nettleseren. SSR er ment å øke hastigheten på innledende lasting og forbedre SEO.
Tagging på serversiden innebærer at all analyse og sporing gjøres på serveren. Når tagger håndteres på serveren, trenger ikke klientens nettleser å utføre disse prosessene, noe som øker sikkerheten og ytelsen. For å få en bedre forståelse av dette, kan du lese mer om tagging på serversiden.
Konklusjon
Server-side rendering er et godt valg for webutviklere som ønsker å forbedre applikasjonenes ytelse gjennom raskere lastetider og bedre brukeropplevelse.
Dårlig implementert SSR kan derimot være utfordrende å vedlikeholde. Men fordelene med SSR er ofte større enn utfordringene, og det er derfor mange organisasjoner velger å bruke det.
Du kan også lese mer om hvorfor man bør velge tagging på serversiden fremfor tagging på klientsiden.