Next.js-verkkosivujen kehittämiseen
Paukkunen, Petri (2022)
2022
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2022101321197
https://urn.fi/URN:NBN:fi:amk-2022101321197
Tiivistelmä
Opinnäytetyön tarkoituksena oli selvittää, kuinka Next.js-sovelluskehys sopii verkkokehitykseen. Tässä tutkittiin, miltä sen kehittäjäkokemus näyttää, mitä se tarjoaa Reactin lisäksi ja miten sillä tuotettujen verkkosivujen tiedonhakutavat eroavat toisistaan.
Opinnäytetyön tietopohja perustuu verkkosivujen perustekniikoihin, sekä niiden renderöintitapoihin. Tämän lisäksi käytiin läpi, mitä React tarjoaa verkkokehitykseen, sekä mitä Next.js tarjoaa sen päälle. Projektissa kehitettiin samanlainen sovellus käyttäen kolmea Next.js:n tarjoamaa renderöintitekniikkaa (SSR, CSR ja SSG). Sovelluksena toimi blogisivusto, ja testaustyökaluna käytettiin Googlen kehittämää Lighthouse-työkalua, jossa keskityttiin sen antamiin suorituskykyarvoihin.
Tutkimuksessa havaittiin, kuinka nämä eri tekniikat eroavat toisistaan. Vaikka SSR ja SSG eivät eronneet suuresti tuloksissa, on SSG-tekniikkaa käyttäen mahdollista nopeuttaa verkkosivua muilla tavoilla. Isompi ero oli kuitenkin CSR-tekniikassa, koska sen tiedonhaku tapahtuu sivun lataamisen jälkeen. Tämä vaikuttaa varsinkin jos tämä tieto on sivun pääaineisto, sekä jos käytössä on mobiililaite. Sen lisäksi todettiin, kuinka helppoa samassa projektissa on käyttää kaikkia näitä eri tekniikoita käyttäen Next.js:sää, valiten parhaiten sopiva tekniikka oikeaan tarkoitukseen.
Opinnäytetyön tietopohja perustuu verkkosivujen perustekniikoihin, sekä niiden renderöintitapoihin. Tämän lisäksi käytiin läpi, mitä React tarjoaa verkkokehitykseen, sekä mitä Next.js tarjoaa sen päälle. Projektissa kehitettiin samanlainen sovellus käyttäen kolmea Next.js:n tarjoamaa renderöintitekniikkaa (SSR, CSR ja SSG). Sovelluksena toimi blogisivusto, ja testaustyökaluna käytettiin Googlen kehittämää Lighthouse-työkalua, jossa keskityttiin sen antamiin suorituskykyarvoihin.
Tutkimuksessa havaittiin, kuinka nämä eri tekniikat eroavat toisistaan. Vaikka SSR ja SSG eivät eronneet suuresti tuloksissa, on SSG-tekniikkaa käyttäen mahdollista nopeuttaa verkkosivua muilla tavoilla. Isompi ero oli kuitenkin CSR-tekniikassa, koska sen tiedonhaku tapahtuu sivun lataamisen jälkeen. Tämä vaikuttaa varsinkin jos tämä tieto on sivun pääaineisto, sekä jos käytössä on mobiililaite. Sen lisäksi todettiin, kuinka helppoa samassa projektissa on käyttää kaikkia näitä eri tekniikoita käyttäen Next.js:sää, valiten parhaiten sopiva tekniikka oikeaan tarkoitukseen.