Hvis du har samhandlet med SEO i årevis, har du kanskje allerede kommet over Server Side Rendering (SSR) som et av konseptene. Hvorfor velge serversidegjengivelse (SSR) i stedet for gjengivelse på klientsiden?
I denne guiden vil jeg introdusere konseptet Server Side Rendering (SSR), dets betydning i moderne webutvikling, og skille mellom Server Side Rendering og Client Side Rendering. Vi vil også introdusere rammeverk og biblioteker som støtter gjengivelse på serversiden og hvordan de gjør det.
Innholdsfortegnelse
Hva er Server Side Rendering (SSR)?
Server Side Rendering (SSR) er en nettutviklingsteknikk der innhold på en nettside gjengis på serveren i stedet for klientens nettleser.
For at dette skal skje, genererer serveren en fullstendig gjengitt HTML-side som den sender til klientnettleseren, noe som betyr at det er serveren som gjør det tunge løftet. Nettleseren mottar en side som er klar til visning, noe som øker hastigheten på den første lastetiden.
Hvordan fungerer gjengivelse på serversiden?
Når en bruker ber om en nettside, setter serveren sammen all JavaScript-, HTML- og CSS-koden som trengs, og sender deretter en fullstendig utformet side til brukerens nettleser.
Som sådan trenger ikke nettleseren å danne en side fra bunnen av, slik det skjer med gjengivelse på klientsiden. SSR fører til en rask første innlastingsside og er også bra for SEO.
Gjengivelse på serversiden bruker nettrammeverk som Vue.js og Gatsby.js bak kulissene for å dynamisk generere en fullt funksjonell HTML-side.
Disse rammeverkene henter data fra APIer eller databaser og bruker deretter komponenter eller maler for å bygge funksjonelle HTML-dokumenter. Når serveren er ferdig med å opprette siden, sender den den til klientnettleseren uten ytterligere behandling.
Bildekreditt: reactpwa
Slik fungerer gjengivelse på serversiden:
- Klienten sender en HTTP-forespørsel: En bruker skriver inn en adresse i adressefeltet på nettleseren. Nettleseren oppretter en HTTP-forbindelse og sender en forespørsel til serveren.
- Datahenting: Serveren henter data fra APIer eller databasen.
- Forhåndsgjengivelse: Serveren kompilerer alle nødvendige JavaScript-komponenter til statisk HTML og sender denne HTML-en til klientnettleseren.
- Siden laster og gjengir: 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.
Gjengivelse på serversiden kontra klientsiden
Gjengivelse på klientsiden er det motsatte av gjengivelse på serversiden. I utgangspunktet genererer nettleseren et HTML-dokument som den viser til brukerne. Dette er forskjellene mellom disse to tilnærmingene:
Funksjon Gjengivelse på tjenersiden (SSR) Gjengivelse på klientsiden (CSR) Innledende innlastingstid Rask innledende innlastingstidDet kan være tregt da det er avhengig av lasting på klientsiden Brukeropplevelse Forbedret og forbedret brukeropplevelse ved første besøkDet kan til tider resultere i en langsommere brukeropplevelse i den første interaksjonen, men øker ved de påfølgende besøkene Tilgjengelighet Alt essensielt innhold er lastet med det innledende HTML-dokumentet gjengis på serveren Tilgjengelighet kan være et problem, spesielt der brukere har deaktivert JavaScriptSEO ytelseSSR krysser av i alle de riktige boksene for SEONoen søkemotorer kan finne det vanskelig å indeksere noen dynamisk genererte sider på klientsiden Skalerbarhet Det er enkelt å skalere nettsteder med høy trafikk som bruker gjengivelse på serversiden. Utviklere må komme opp med en gjennomtenkt tilnærming for å skalere nettsteder som praktiserer gjengivelse på klientsidenSikkerhetDet er enkelt å redusere serveren -sidesårbarheter når sider lastes inn på serveren. Utsatt for angrep som cross-site scripting (XSS) og andre sårbarheter knyttet til klient-side rendering.
Fordeler med gjengivelse på serversiden for SEO
- Rask innledende lastetid: Hvor lang tid det tar for en side å laste er en av faktorene som besøkende på nettstedet ditt vurderer. SSR lar nettstedbrukere se en fulllastet HTML-side nesten umiddelbart. Umiddelbar lasting reduserer tiden brukeren venter før han samhandler med en nettside.
- Rask ytelse på trege enheter/nettverk: Nettverket brukerne bruker for å få tilgang til nettsidene dine kan være tregt, eller de bruker enheter som kjører på operativsystemer som ikke er så raske. Gjengivelse på serversiden betyr at brukerenhetene ikke trenger å kjøre så mye JavaScript, noe som øker ytelsen. Slike nettverk eller enheter trenger ikke lenger 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). Slike brukere vil oppfatte nettstedet ditt som det første når HTML-sider lastes raskt, takket være gjengivelse på serversiden.
- Forbedret SEO: Søkemotorer som Google, Bing og YouTube vurderer mange ting når de rangerer nettsider. For eksempel vil de sjekke brukeropplevelsen, hvor lang tid folk bruker på sidene dine og lastehastigheten. SSR forbedrer alle disse områdene, noe som betyr at appen din sannsynligvis vil rangere høyere på søkemotorer.
- Enkelt å håndtere dynamisk innhold: Søkemotorer elsker dynamisk innhold. Med SSR kan utviklere nå enkelt håndtere dynamisk innhold og også tilpasse/skreddersy innhold basert på brukerinndata og preferanser.
- Skalerbarhet og caching: I SSR utfører serveren den første lastingen, noe som reduserer mengden prosessering som klienten skal håndtere og gjør den mer skalerbar. SSR kan også bruke caching på servernivå og innholdsleveringsnettverk (CDN) for å redusere serverbelastningen og forbedre ytelsen.
Noen ulike verktøy og rammeverk implementerer SSR. Noen er designet kun for å støtte gjengivelse på serversiden, mens andre er bygget for å støtte gjengivelse på klientsiden og på serversiden. Dette er noen av de vanligste du sannsynligvis vil samhandle med i nettutviklingsverdenen:
Vue.js
Vue.js er et JavaScript-rammeverk for å bygge brukergrensesnitt og er bygget på standard JavaScript, HTML og CSS. Med dette rammeverket kan du bygge enkle og komplekse brukergrensesnitt ved å bruke dens komponentbaserte og deklarative programmeringsmodell.
Vue-komponenter produserer og manipulerer som standard Document Object Model (DOM) i nettleseren som utdata. Dette rammeverket bruker imidlertid også SSR til å gjengi slike komponenter til HTML-strenger på serveren og sende dem direkte til nettleseren. En server-gjengert Vue-app anses som «universell» ettersom det meste av koden kjører på serveren og klienten.
React.js
Reagere er et JavaScript-bibliotek for å bygge brukergrensesnitt. Dette biblioteket bruker en komponentbasert programmeringsmodell der du kan dele opp applikasjonen din i små gjenbrukbare komponenter. React er også deklarativ, noe som gjør koden enkel å forutsi og feilsøke.
React er designet for å implementere både klient- og server-side gjengivelse som standard. Hvis du trenger å implementere gjengivelse på serversiden på en React-app, må du sette den opp ved hjelp av et Node.js-apprammeverk som Express.js. Du må også oppdatere skriptene dine i package.json-filen for å sikre at appen «starter» fra Express-serveren.
Gatsby
Gatsby er et React-basert rammeverk for å bygge nettsider. Dette rammeverket med åpen kildekode er utviklet for å hjelpe utviklere med å bygge raske nettapplikasjoner. 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 gjengivelse på serversiden på Gatsby. SSR kjører på Gatsby Cloud, hvor hver forespørsel sendes til en arbeidsprosess i getServerData-funksjonen. Alle dataene fra arbeidsprosessen sendes til React-komponenten som returnerer et HTML-dokument.
Kantete
Kantete er en utviklingsplattform bygget ved hjelp av TypeScript. Denne plattformen har et komponentbasert rammeverk som du kan bruke til å bygge webapplikasjoner. Du kan bruke Angular til å bygge små applikasjoner og applikasjoner på bedriftsnivå.
I likhet med React implementerer ikke Angular SSR som standard. Du kan imidlertid sette opp Angular-applikasjonen din til å implementere gjengivelse på serversiden ved å kombinere den med Express.js, et node.js backend-rammeverk. Angular Universal lar deg gjengi Angular-komponenter på serveren og redusere innledende lastetid.
Hvordan sjekke om et nettsted bruker SSR eller CSR
Hvis du er en utvikler eller markedsfører, er det vanskelig å avgjøre om et nettsted bruker server- eller klientsidegjengivelse når du besøker det. Heldigvis kan du inspisere et nettsted for å bestemme gjengivelsesmetoden det bruker. Vi kan inspisere nettstedet vårt tipsbilk.net for å demonstrere. Jeg vil høyreklikke på en hvilken som helst side og deretter velge «Vis sidekilde».
Hvis du kan se tagger som ,
- , er du sikker på at de kjører på serversiden.
- Økt kodekompleksitet: Implementering av gjengivelse på serversiden kan kreve ytterligere konfigurasjon på serversiden. En slik tilnærming kan føre til en økt kodebase på serversiden, noe som gjør det vanskelig å vedlikeholde.
- Økt serverbelastning: Selv om vi har fremhevet at SSR kan forbedre lastetidene, kan det også være en ytelsesflaskehals i tider med høy trafikk. Serveren er ansvarlig for å gjengi HTML-innhold, som til tider kan overbelaste serveren eller til og med føre til krasj.
Begrensninger for gjengivelse på tjenersiden
Er server-side-gjengivelse det samme som server-side-tagging?
Nei. Gjengivelse på serversiden er en nettutviklingstilnærming der serveren sender en fulllastet HTML-side til nettleseren. SSR er ment å øke den raske innledende lastetiden og forbedre SEO.
Tagging på klientsiden er der all analyse og sporing gjøres på serversiden. Når tagger håndteres på serveren, trenger ikke klientens nettleser lenger å håndtere slike prosesser, noe som øker sikkerheten og øker ytelsen. Lær om tagging på serversiden for å forstå det bedre.
Konklusjon
Gjengivelse på serversiden er et godt valg for alle nettutviklere som ønsker å øke appens ytelse gjennom økte lastetider og forbedret brukeropplevelse.
På den annen side, hvis den ikke er godt implementert, kan SSR være utfordrende ettersom det blir vanskelig å vedlikeholde koden. Men fordelene med SSR er langt større enn utfordringene, og det er grunnen til at mange organisasjoner tar det i bruk.
Deretter kan du også lese om grunner til å bruke tagging på serversiden fremfor tagging på klientsiden.