Change search
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • apa.csl
  • Other style
More styles
Language
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf
Client-side rendering och Server-side rendering: En komparativ studie ur ett prestanda-, SEO- och tillgänglighetsperspektiv
Karlstad University, Faculty of Arts and Social Sciences (starting 2013), Karlstad Business School (from 2013).
2023 (Swedish)Independent thesis Basic level (degree of Bachelor), 10 credits / 15 HE creditsStudent thesisAlternative title
Client-side rendering and Server-side rendering : A comparative study from a performance, SEO and accessibility perspective (English)
Abstract [sv]

Valet mellan client-side rendering och server-side rendering har varit en stor fråga de senasteåren. Server-side rendering har alltid varit den man lutar sig åt för snabba initialaladdningstider och SEO-optimering, men utvecklingen av webbsidor går snabbt och merinteraktiva webbsidor önskas av användare, där kommer client-side rendering in i valet och dåmåste man ta ett beslut.

Denna komparativa studie genomfördes i syfte med att jämföra server-side rendering ochclient-side rendering. Jämförelsen gjordes på fyra testobjekt ur ett prestanda, SEO ochtillgänglighetsperspektiv. Prestandakriterierna som användes är first contentful paint, largestcontentful paint, speed index, total blocking time och cumulative layout shift. SEO-optimering mätte man igenom hur korrekt implementerad den var och samma förtillgängligheten.

Fyra testobjekt valdes ut med liknande interaktivitet och funktionalitet för att få en sånoggrann jämförelse som möjligt. För att samla in data så användes verktyget Google Lighthouse som ett tillägg i webbläsaren Google Chrome. En sekvens följdes för att samla indata medan man interagerar med webbsidan för att se hur bra prestanda testobjekten har underinteraktivitet.

Resultaten visade att båda renderingsteknikerna har både fördelar och nackdelar. Server-siderendering visade bättre prestandaresultat och SEO-optimering medan client-side hade bättreresultat på tillgänglighet och användbarhet.

Sammanfattningsvis så rekommenderas en teknik beroende på vad för krav som ställs i början av projektet. Vill man ha en användarvänlig webbsida med mycket interaktivitet så rekommenderas client-side rendering och vill man ha en webbsida som har snabba laddningstider och bra SEO-optimering så rekommenderas server-side rendering.

Place, publisher, year, edition, pages
2023. , p. 28
Keywords [sv]
Client-side rendering, server-side rendering, informatik, datavetenskap, webbutveckling, sökmotorsoptimering, tillgänglighet, prestanda
National Category
Information Systems
Identifiers
URN: urn:nbn:se:kau:diva-96472Local ID: 1085OAI: oai:DiVA.org:kau-96472DiVA, id: diva2:1791653
Subject / course
Information Systems
Educational program
Web Developer
Supervisors
Examiners
Available from: 2023-08-31 Created: 2023-08-25 Last updated: 2023-08-31Bibliographically approved

Open Access in DiVA

fulltext(767 kB)41 downloads
File information
File name FULLTEXT01.pdfFile size 767 kBChecksum SHA-512
a4810702e4aba876177a2f6fe2d8923bf0ec8c116f2c5354d92d13caaaf18da666747cc449902937b23fa675cf909fdae164c8234f957af03e69a96d253c6537
Type fulltextMimetype application/pdf

By organisation
Karlstad Business School (from 2013)
Information Systems

Search outside of DiVA

GoogleGoogle Scholar
Total: 41 downloads
The number of downloads is the sum of all downloads of full texts. It may include eg previous versions that are now no longer available

urn-nbn

Altmetric score

urn-nbn
Total: 180 hits
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • apa.csl
  • Other style
More styles
Language
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf