Dynaamisten web-sovellusten toteutus ja vertailu asiakaspään renderoinnilla, palvelinpään renderoinnilla ja staattisen sivuston generaattorin avulla

Abstract

Dynaamisen web-sovelluksen toteutustavalla on iso merkitys sovelluksen suorituskykyyn ensilatauksessa ja sovelluksen sisäisessä navigoinnissa. Googlen tekemän tutkimuksen mukaan yli puolet käyttäjistä hylkää sivun, jos sen lataus kestää yli 3 sekuntia. Google myös antaa paremman sijoituksen hakutuloksissa latausnopeuden mukaan. Jos web-sovellus toteutetaan epäoptimaalisella tavalla käyttötarkoitukseensa nähden, voidaan menettää potentiaalisia käyttäjiä huonon käyttökokemuksen ja huonomman näkyvyyden takia. Web-sovellusten toteutukseen on tällä hetkellä kolme varteenotettavaa vaihtoehtoa: asiakaspään renderointi (CSR), palvelinpään renderointi (SSR) sekä staattisen sivuston generaattori (SSG).

Tässä työssä tutkittiin asiakaspään renderoinnin, palvelinpään renderoinnin sekä staattisen sivuston generaattorin avulla toteutettujen dynaamisten web-sovellusten toimintaa ja miten ne eroavat toisistaan. Työssä myös arvioidaan toteutustapojen heikkouksia ja vahvuuksia. Työ suoritettiin konstruktiivisen tutkimuksen menetelmällä toteuttamalla prototyyppisovellus kullakin edellä mainitulla toteutustavalla. Toteutustekniikkoina oli React, Next.js ja Gatsby. Toteutustapojen suorituskykyä mitattiin käyttäen Google Chrome -selaimen tarjoamaa Lighthouse-työkalua sekä suorituskykytyökalua. Näillä työkaluilla mitattiin sekä ensilatauksen suorituskykyä, että sovelluksen sisäisen navigoinnin suorituskykyä. Mitattavia suorituskyvyn avainarvoja oli neljä. Näiden avainarvojen avulla voitiin arvioida, kuinka käyttäjät kokevat sovelluksen suorituskyvyn. Toteutustapojen mittaustulosten vertailulla voitiin arvioida kunkin toteutustavan soveltuvuus eri käyttötarkoituksiin.

Mittausten tulokset osoittivat, että SSG-ratkaisulla oli paras suorituskyky ensilatauksessa, kun taas CSR-ratkaisun suorituskyky oli huonoin. CSR-ratkaisulla saatiin kuitenkin paras suorituskyky sovelluksen sisäisessä navigoinnissa. SSR-ratkaisu oli suorituskyvyltään paras tilanteessa, missä sovelluksen sisällön tulee olla ajantasalla.

The implementation method of Dynamic web application has a big impact on page load speed and performance. According to a research done by Google, 53\% of users abandon site if the page load takes more than 3 seconds. Page load speed is also a ranking factor for searches. If web application is implemented using a nonoptimal method considering the use, users may be lost as resultant to the bad user experience. There are considerable implementation methods: Client-side rendering, Server-side rendering and Static site generator.

This master's thesis evaluates different implementation methods implementing dynamic web application. These methods are Client-side rendering, Server-side rendering and Static site generator. Main goal is to find out differences between the methods and their strengths and weaknesses. This study was done using constructive research method by implementing prototype application using each previously mentioned implementation method. React, Next.js and Gatsby were the implementation technologies chosen. Performance was measured using Lighthouse tool and performance tool provided by Google Chrome browser. With these tools the initial page load performance and performance during navigation inside the application were measured. There were four key values to measure. With these key values the perceived performance could be evaluated. Using the measurement results the suitability for different uses could be evaluated as well.

The measurement results showed that Static site generator's performance was the best in initial page load, while the Client-side rendering's performance was worst. Client-side rendering had the best performance after initial page load. Server-side rendering was overall the best in a situation where the full content of the page had to be up to date.