Yhden sivun applikaation optimointi palvelinpuolen renderöinnillä

Abstract

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ä.

This bachelor’s thesis studied server-side rendered React and examined if it can be used to improve the performance and search engine optimization of a single page application.

Two single page applications were designed and developed. The first was implemented using only client-side rendering, and in the second also server-side rendering and static exporting of pages were used. The framework used for server-side rendering and static exports was Next. The performance of the developed applications was audited using Google’s Lighthouse tool.

Server-side rendering and static export of React pages sped up the initial load of the SPA. Instead of the client receiving an empty page from the server, they received a page that already had content which resulted in the user seeing the page sooner. It was noted that when the complexity of the app grew, the performance gains from using server-side rendering was also increased.

Search engine optimization was concluded to probably be easier to handle using server-side rendering, however, it could not be verified in the present study due to it being difficult to do so. Showing a preview of the page in external services was noticed to work better with server-side rendered pages.

Next was concluded to be a good tool for developing server-side rendered React applications. However, it can be somewhat restricting and opinionated, and there could be issues with some libraries when it comes to server-side rendering. As an alternative for server-side rendering using Next, one could use React’s built-in support for SSR. It will require more work for developing the server but it could be easier to take into use in existing projects instead of porting the application to Next.