Next.js ja muut isomorfiset sovelluskehykset

Abstract

Insinöörityön tavoitteena oli tutustua isomorfiseen Next.js-sovelluskehykseen ja kartoittaa sen hyödyllisyyttä verkkosivujen tuotannossa. Hyödyllisyyteen sisältyvät kehittäjäkokemus, verkkosivuston nopeus ja tuetut ominaisuudet.

Työtä varten toteutettiin esimerkkiprojekti, jossa kehitettiin vertailusovellus erikseen kolmea sovellusmallia käyttäen (SSR, SPA ja isomorfinen Next.js). Vertailusovelluksen ulkoasu ja toiminnallisuus olivat identtisiä eri sovellusmallien välillä. Työssä kehitettyä sovellusta käytettiin vertailussa eri mallien välillä. Vertailutyökaluna toimi Googlen Lighthouse-työkalu, jonka avulla verkkosivuja voidaan analysoida. Google käyttää tätä työkalua sisäisesti hakuvaihtoehtojen järjestelyyn.

Tutkimustulosten avulla selvisi, että Next.js-kehys todella yhdistää SSR- ja SPA-mallien hyvät puolet ja onnistuu päihittämään ne molemmat tärkeimmissä pisteytyksissä. Ominaisuuskartoituksessa tosin huomattiin, että Next.js ei välttämättä tarjoa kaikkia isojen verkkosivujen vaatimia ominaisuuksia ilman yhteisön kehittämien pakettien asennusta. Näistä puutteista suurimpina ilmenivät huono monikielisyyden tuki ja sivukarttojen rakentamisen puuttuminen.

Työ tehtiin Next.js-kehyksen version 11.1.2 perusteella.

The aim of this thesis was to get acquainted with the isomorphic Next.js application framework and to assess its usefulness in modern website development. Usefulness includes developer experience, website speed, and supported features.

An example website was developed, which implemented the same site with three popular application models (SSR, SPA and isomorphic Next.js). The layout and functionality of the three sites are identical. This website was then used to compare metrics between the different models. The comparison tool used was Google's Lighthouse, which can be used to analyse different metrics on a web page. Google uses this tool internally to organize search results.

The results showed that the Next.js framework really combines the strengths of the SSR, and SPA models and manages to beat them both in all key metrics. However, analysis of available features revealed that Next.js may not provide everything required by large websites without installing community-developed packages. Two of the largest lacking features being poor support for multilingual content and the lack of sitemap generation.

Next.js version 11.1.2 was used when developing the project.