React-pohjaisen verkkosivun optimointi NextJS-viitekehyksellä

Abstract

Erilaisten verkkosivujen merkitys on jatkuvasti kasvava tiedonlähteenä sekä kommunikaatiokeinona digitalisaation edetessä. Verkkosivujen käyttäminen on monelle jokapäiväistä ja niiden olemassaolo otetaan jopa itsestäänselvyytenä. Käyttäjät ovat tottuneet nopeisiin latausaikoihin. Yksisivuisten asiakaspuolella renderöityjen sivujen kehittäminen on yleistynyt, mutta samalla niiden monimutkaisuus on kasvanut, mikä aiheuttaa tehokkuuden kanssa ongelmia. Käyttäjät eivät jaksa odottaa pitkiä aikoja verkkosivujen latautumista, vaan etsivät tarpeensa muualta. Työssä tarkastellaan NextJS-viitekehyksen tarjoamien optimointikeinojen hyödyntämistä verkkosivukehityksessä. Työn tarkoitus on selvittää, miten optimointikeinojen käyttöönotto vaikuttaa erityisesti ensimmäisen sisällöllisen kuvan sekä suurimman sisällöllisen kuvan ruudulle piirtymiseen kuluvaan aikaan. Työssä käytetyt menetelmät olivat osa NextJS-kehyksen oleellisimmista menetelmistä. Työssä kokeiltiin NextJS-kehyksen käyttöönoton välitöntä vaikutusta suorituskykyyn sekä suorituskyvyn skaalautuvuuteen. Käyttöönoton lisäksi työssä tutkittiin asteittaisen staattisen uudelleengeneroinnin sekä dynaamisten komponenttien vaikutusta ensimmäisen latauksen nopeuteen. Tutkimuksessa huomattiin, että pelkästään NextJS-kehyksen käyttöönotto toi merkittävästi suorituskykyä verkkosivulle. Palvelinpuolella renderöidyt komponentit ja tiivis palvelimen ja asiakkaan yhteistyö palvelinfunktioiden avulla antoivat minimaaliselle toteutukselle suorituskykyetua. NextJS skaalautui paremmin kuin tavallinen Reactsovellus NexJS-kehyksen tarjoaman automaattisen polkuun perustuvan koodinjaon avulla. Asteittainen staattinen uudelleengenerointi ja dynaamiset komponentit eivät vaikuttaneet työssä toteutetun kokoisen sovelluksen ensimmäisen latauksen suorituskykyyn. Pienessäkin sovelluksessa NextJS-kehyksen käyttöönotto parantaa suorituskykyä, mutta valinnaisten optimointikeinojen hyödyntäminen on tarpeellista vasta merkittävästi monimutkaisemmissa tuotanto-ohjelmistoissa.

The importance of websites as tools of communication and information sources is con-tinuously increasing as a result of digitalization. Using websites is very common for al-most everyone and fast loading time has become the expectation. Initial loading time of single page applications increases with complexity and introduces a problem with the expected loading time as users get discouraged to follow through with accessing the website. This thesis examines the optimization methods provided by the NextJS framework. The goal of the thesis is to find out how using the optimization methods provided by the NextJS framework affect initial loading time of a website. Especially the first contentful paint and largest contentful paint are interesting metrics. The methods used in this project were the majority of core features provided by the NextJS framework. The focus was on examining the immediate effect of adopting NextJS on performance and scalability. In addition to the initial integration, the project also ex-plored how incremental static regeneration and dynamic components affect the speed of the initial page load. The study found that just adopting the NextJS framework significantly improved website performance. Server-side rendering and the close interaction between server and client with server functions provided a performance advantage, even in a basic implementa-tion. Compared to a traditional React application, NextJS demonstrated better scalability thanks to its built-in automatic route-based code splitting. Incremental static regeneration and dynamic components had no notable impact on initial page load performance for an application of the implemented size. While NextJS boosts performance even on smaller applications, additional optimization techniques only become necessary in more com-plex, production-sized applications.