Change search
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • 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
Hur rendering påverkar prestanda och sökmotoroptimering: – NextJS vs React
University West, School of Business, Economics and IT, Division of Media and Design.
University West, School of Business, Economics and IT, Division of Media and Design.
2021 (Swedish)Independent thesis Basic level (degree of Bachelor), 5 credits / 7,5 HE creditsStudent thesisAlternative title
How rendering affects performance and search engine optimization (English)
Abstract [en]

Frameworks have had a big influence on how websites are structured. They give developers an opportunity to create websites which previously were seen as too complex. React is the most popular framework and will be compared to NextJS which is based on React but with extra features. The biggest difference between the frameworks is how the websites are rendered, NextJS uses server-side rendering while React uses client-side rendering. In the test, loading time and SEO will be compared between the two frameworks. Three tools are used to test the websites, Chrome Developers Tools, Lighthouse and Apache Bench. Two applications are created, one in each framework and contains a navigation, text, data from an API and a footer. The results show that React is faster in most of the tests and just as good as NextJS at SEO. In the first page load, NextJS has a shorter average loading time per resource but needs to load additional resources, which is why React is faster. The results do not match the previous academic studies which can be because of the applications we created not being big enough. Our conclusion is that React has a better performance and equally good search engine optimization asNextJS. Continuation of the report can be done by cooperation with companies that have websites which use either NextJS or React.

Abstract [sv]

Ramverk har haft ett stort inflytande på hur webbsidor är strukturerade. De ger utvecklare en möjlighet att skapa webbsidor som tidigare setts som för komplexa. React är det mest populära ramverket och kommer jämföras med NextJS som är baserat på React med extra tillägg. Största skillnaden mellan ramverken är hur webbsidorna renderas, NextJS använder serverside rendering och React använder klientside rendering. I testerna ska laddningstid och SEO jämföras mellan ramverken. Tre verktyg används för att testa applikationerna, Chrome Developers Tools, Lighthouse och Apache Bench. Två applikationer skapas, en i vardera ramverk och innehåller en navigation, text, data från ett API och en footer. Resultaten visade att React är snabbare i de flesta tester och är lika bra som NextJS i SEO. I den första sidladdningen så har NextJS en kortare genomsnittlig laddningstid per resurs men NextJS behöver ladda in fler resurser, därför är React fortfarande snabbare. Resultaten stämmer inte överens med tidigare akademiska artiklar vilket kan bero på att applikationerna vi skapade inte är tillräckligt stora. Vår slutsats är att React har en bättre prestanda och lika bra sökmotoroptimering som NextJS. Fortsättning av arbetet kan ske genom arbete med företag som har webbsidor med NextJS eller React.

Place, publisher, year, edition, pages
2021. , p. 37
Keywords [en]
Framework, NextJS, React, rendering, SEO, search engine optimization, Ramverk, NextJS, React, rendering, SEO, sökmotoroptimering
National Category
Information Systems
Identifiers
URN: urn:nbn:se:hv:diva-17387Local ID: EXB340OAI: oai:DiVA.org:hv-17387DiVA, id: diva2:1588242
Subject / course
Informatics
Educational program
Webmaster
Supervisors
Examiners
Available from: 2021-08-27 Created: 2021-08-26 Last updated: 2021-08-27Bibliographically approved

Open Access in DiVA

No full text in DiVA

By organisation
Division of Media and Design
Information Systems

Search outside of DiVA

GoogleGoogle Scholar

urn-nbn

Altmetric score

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

Direct link
Cite
Citation style
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • 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