Verkkosovelluksen siirtäminen toiseen sovelluskehykseen
Pirinen, Jyri (2025)
Pirinen, Jyri
2025
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-2025050810052
https://urn.fi/URN:NBN:fi:amk-2025050810052
Tiivistelmä
Opinnäytetyön tarkoituksena oli tutkia vaihtoehtoisia staattisten sivujen generointiin tarkoitettuja web-sovelluskehyksiä, nykyisin verkkosivuilla käytössä olevan Gatsbyn tilalle. Verkkosivut ovat pääosin staattista sisältöä, joten staattisten sivujen generaattorit ovat sille paras vaihtoehto sivujen renderöintiin, jotta sivut saataisiin ladattua käyttäjän selaimella mahdollisimman nopeasti. Gatsbyn ongelmana oli se, että verkkosivujen sisällön päivittäminen vaati koko sovelluksen uudelleen koontia ja julkaisua, ennen kuin päivitetty sisältö näkyi verkkosivuilla. Projektin sivumäärän kasvaessa ja koontiprosessin monimutkaistuessa, tämä koontiprosessi kävi liian hitaaksi. Parhaimmaksi vaihtoehdoksi nähtiin etsiä toinen sovelluskehys, jolla saataisiin sisällön päivittäminen toteutettua nopeammin, ilman että menetetään staattisten sivujen tuomia hyötyjä suorituskykyyn ja hakukoneoptimointiin.
Työ toteutettiin kahdessa osassa, joista ensimmäisenä oli tutkimus, jossa tarkasteltiin useampia eri sovelluskehyksiä. Tutkimuksessa selvitettiin esimerkiksi, kuinka ne generoivat staattisia sivuja, minkälaisia tekniikoita ne sisältävät tämän koontiprosessin nopeuttamiseen ja kuinka suuri työ olisi nykyisen sovelluksen migraatio tähän uuteen vaihtoehtoon. Toisessa osassa toteutettiin Proof of Concept (PoC), jossa testattiin valittua sovelluskehystä, ja varmistettiin sen soveltuvuus korvaamaan nykyisin käytössä oleva Gatsby.
Lopputuloksena selvitettiin, että Gatsbyn korvaajaksi näihin verkkosivuihin sopii parhaiten Next.Js, ja sen hyödyntämä Incremental Static Regeneration (ISR) tekniikka. Tämä tekniikka mahdollisti sen, että sisällön päivittämistä varten staattisesti generoituja sivuja ei tarvinnut kokonaan koota uudestaan, vaan ISR tekniikka pystyi taustalla käydä uudelleenvalidoimassa yksittäisten sivujen sisältöä ja näin päivittämään sivuja. Näin koonnin kesto ei enää vaikuttanut sisällön päivittämisen kestoon, ja uudelleenvalidointi ajan pystyi itse määrittämään. Sivut pysyivät edelleen staattisina, eikä niiden suorituskyky kärsinyt sovelluskehyksen vaihdosta.
Työ toteutettiin kahdessa osassa, joista ensimmäisenä oli tutkimus, jossa tarkasteltiin useampia eri sovelluskehyksiä. Tutkimuksessa selvitettiin esimerkiksi, kuinka ne generoivat staattisia sivuja, minkälaisia tekniikoita ne sisältävät tämän koontiprosessin nopeuttamiseen ja kuinka suuri työ olisi nykyisen sovelluksen migraatio tähän uuteen vaihtoehtoon. Toisessa osassa toteutettiin Proof of Concept (PoC), jossa testattiin valittua sovelluskehystä, ja varmistettiin sen soveltuvuus korvaamaan nykyisin käytössä oleva Gatsby.
Lopputuloksena selvitettiin, että Gatsbyn korvaajaksi näihin verkkosivuihin sopii parhaiten Next.Js, ja sen hyödyntämä Incremental Static Regeneration (ISR) tekniikka. Tämä tekniikka mahdollisti sen, että sisällön päivittämistä varten staattisesti generoituja sivuja ei tarvinnut kokonaan koota uudestaan, vaan ISR tekniikka pystyi taustalla käydä uudelleenvalidoimassa yksittäisten sivujen sisältöä ja näin päivittämään sivuja. Näin koonnin kesto ei enää vaikuttanut sisällön päivittämisen kestoon, ja uudelleenvalidointi ajan pystyi itse määrittämään. Sivut pysyivät edelleen staattisina, eikä niiden suorituskyky kärsinyt sovelluskehyksen vaihdosta.
