Yhden sivun applikaation optimointi palvelinpuolen renderöinnillä
Nuutinen, Juha (2020)
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202005067532
https://urn.fi/URN:NBN:fi:amk-202005067532
Tiivistelmä
Insinöörityössä tutkittiin palvelimen puolella tapahtuvaa React-applikaation renderöintiä ja selvitettiin, voidaanko sen avulla parannella yhden sivun applikaation suorituskykyä ja hakukoneoptimointia.
Työssä suunniteltiin ja toteutettiin kaksi SPA:ta, joista toinen toteutettiin täysin selaimessa renderöitynä ja toisessa käytettiin lisäksi palvelinpuolen renderöintiä sekä staattisia sivuja.
Palvelinpuolen renderöintiin käytettiin Next-sovelluskehystä. Sovellusten suorityskykyä auditoitiin Googlen Lighthouse-työkalulla.
Palvelinpuolen renderöinti ja Reactin vieminen staattiseksi sivuksi nopeuttivat SPA-sivun ensimmäistä latautumista. Tällöin tyhjän sivun sijasta selain saikin palvelimelta sisällöllisen sivun, mikä nopeutti sivun näyttämistä käyttäjälle. Työssä huomattiin, että sivun kompleksisuuden kasvaessa palvelinrenderöinnistä saatavat suorituskykyhyödyt kasvoivat.
Hakukoneoptimoinnin todettiin olevan todennäköisesti helpompaa palvelinrenderöintiä käyttäen, joskin sitä ei työssä päästy todentamaan käytännössä hankaluutensa takia. Huomattiin, että sivun esikatselun näyttäminen ulkopuolisissa palveluissa on toimivampaa palvelinrenderöinnin kanssa.
Next todettiin toimivaksi työkaluksi palvelinrenderöityjen tai staattisten React-sivujen toteuttamiseen. Se on kuitenkin jokseenkin rajoittava työkalu, ja ongelmia voi mahdollisesti esiintyä joidenkin kirjastojen käytössä. Vaihtoehtoisesti palvelinrenderöintiin voi käyttää Reactin sisäänrakennettua tukea sille, mutta tällöin palvelimen toteuttaminen vaatii enemmän työtä.
Työssä suunniteltiin ja toteutettiin kaksi SPA:ta, joista toinen toteutettiin täysin selaimessa renderöitynä ja toisessa käytettiin lisäksi palvelinpuolen renderöintiä sekä staattisia sivuja.
Palvelinpuolen renderöintiin käytettiin Next-sovelluskehystä. Sovellusten suorityskykyä auditoitiin Googlen Lighthouse-työkalulla.
Palvelinpuolen renderöinti ja Reactin vieminen staattiseksi sivuksi nopeuttivat SPA-sivun ensimmäistä latautumista. Tällöin tyhjän sivun sijasta selain saikin palvelimelta sisällöllisen sivun, mikä nopeutti sivun näyttämistä käyttäjälle. Työssä huomattiin, että sivun kompleksisuuden kasvaessa palvelinrenderöinnistä saatavat suorituskykyhyödyt kasvoivat.
Hakukoneoptimoinnin todettiin olevan todennäköisesti helpompaa palvelinrenderöintiä käyttäen, joskin sitä ei työssä päästy todentamaan käytännössä hankaluutensa takia. Huomattiin, että sivun esikatselun näyttäminen ulkopuolisissa palveluissa on toimivampaa palvelinrenderöinnin kanssa.
Next todettiin toimivaksi työkaluksi palvelinrenderöityjen tai staattisten React-sivujen toteuttamiseen. Se on kuitenkin jokseenkin rajoittava työkalu, ja ongelmia voi mahdollisesti esiintyä joidenkin kirjastojen käytössä. Vaihtoehtoisesti palvelinrenderöintiin voi käyttää Reactin sisäänrakennettua tukea sille, mutta tällöin palvelimen toteuttaminen vaatii enemmän työtä.