Frameworkit, Osa 2: Next.js – Nopeutta verkkosivuilla navigointiin

Next.js on Vercelin kehittämä, pääasiassa verkkokehitykseen suunniteltu framework eli kirjasto (tai ohjelmistokehys), jonka avulla kehitetään React-pohjaisia verkkosovelluksia. Next.js:n avainsana on verkkosivuston sisällön laajat renderöintimahdollisuudet: siinä missä React-sovellukset renderöivät sisältönsä yleensä ainoastaan käyttäjän selaimessa, Next.js kattaa laajemmin myös palvelinpuolella renderöidyt sovellukset. 

Kirjasto tarjoaa myös kattavan arsenaalin työkaluja sujuvaan ja vaivattomampaan verkkokehitykseen. Sen lisäksi, että ohjelmisto koodataan ja otetaan käyttöön, Next.js käsittelee kaikkea verkkosovellukseen sisältyvää dataliikennettä. Kirjasto määrittelee, miten paljon dataa liikkuu käyttäjän päähän tämän siirtyessä sivuston osoitteeseen, optimoi esimerkiksi verkkosivustolle laitettavien kuvien kokoa sekä helpottaa lokalisointia, analytiikkaa ja konfigurointia eri ympäristöihin.

Next.js siis mahdollistaa verkkokehittäjille useiden eri ominaisuuksien hyödyntämisen perinteisen sovelluksen ohjelmoimisen lisäksi. Kirjasto onkin kehitetty ikään kuin hoitamaan kyseisiä toimenpiteitä ohjelmoijan puolesta. Koodarin ei tarvitse kuin kehittää itse sovellus ja julkaista se, ja kirjaston on tarkoitus hoitaa loput: ohjelmistokehys päättelee, mitä koodissa on tehty ja miten dataa pitää käsitellä valitussa ympäristössä. 

  • Next.js-kirjaston kantavana ajatuksena on sisällön renderöintimahdollisuudet sovelluksen palvelinpuolella
  • Kirjasto mahdollistaa ohjelmiston julkaisun lisäksi sen sisältämän dataliikenteen monipuolisen käsittelyn
  • Reactiin pohjautuva Next.js keventää ja nopeuttaa ohjelmistokehittäjän manuaalista työtä

Palvelinpuolen renderöinti sekä staattinen sivuston luominen 

Next.js:n pääominaisuus on palvelinpuolen renderöinti (server-side rendering). Tässä etenkin verkkokehitykseen käytetyssä tekniikassa palvelin tuottaa räätälöidyn vastauksen sovelluksen käyttäjän esittämään pyyntöön. Kirjasto ei sinänsä luota siihen, että kaikki koodi lähetetään kerrallaan käyttäjälle, vaan koodia ladataan käytettäväksi käyttäjän navigoiman polun eli verkkosivustolla liikkumisen perusteella. Kaikkea koodia ei siis ladata kokonaan vaan ainoastaan sen verran, mitä valittu route eli polku osoitteessa tarvitsee.

Palvelinpuolen renderöintiä voidaan tehdä koko sovellukselle tai mille tahansa sen osalle – sivuston käytön tehostamiseksi ja käyttäjäkokemuksen parantamiseksi renderöinnin kohteeksi voidaan valita vain kaikista sisältörikkaimmat sivut. Tämän lisäksi renderöintiä voidaan tehdä myös esimerkiksi ainoastaan ensi kertaa sivustolla vieraileville käyttäjille, jotka eivät ole vielä ladanneet itselleen sivuston sisältöä. Kaikkiaan renderöinti vähentää verkkoselaimien rasitusta ja parantaa samalla käyttäjien turvallisuutta.

Toinen Next.js:n keskeisistä ominaisuuksista on staattinen sivuston luominen (static site generation eli SSG). Perinteisesti sivut toimivat siten, että käyttäjän pyytämän verkkosivun rakenne muodostetaan aina niin sanotusti “lennosta” tämän siirtyessä sivustolla uudelle sivulle. Staattisen sivuston luominen taas toimii siten, että sivuston jokaisen sivun rakenne on jo valmiiksi rakennettu sovelluksen käyttöön sen käyttöönoton yhteydessä. Täten käyttäjän siirtyessä jollekin sivuston sivulle on palvelimella aina tarvittava vastaus valmiina. Staattisen sivuston luominen tarkoittaa siis, että rakennetta ei muodosteta haluttaessa tuoda sivun sisältöä valitusta polusta, vaan ennalta valmisteltu rakenne lähetetään suoraan käyttäjälle.

Ja mitä tämä kaikki tarkoittaa maallikon kielellä? Mikäli generointi tehdään oikein, sivu latautuu käyttäjälleen huomattavasti nopeammin. Tämä johtuu siis siitä, että koko applikaatiokoodin lähettämisen sijaan siitä tarvitaan vain pieni osa, eli siirrettävän datan määrä ei ole niin suuri. Jos mahdollista, koodin rakennetta generoidaan jo palvelimen käyttöönoton aikana mahdollisimman paljon, minkä ansiosta käyttäjän oma päätelaite toimii suorituskykyisemmin ja voi vastaanottaa valmiin sivurakenteen nopeammin. 

  • Palvelinpuolen renderöinnissä koodia lähetetään käyttäjän polkuun pohjautuen
  • Suuria datakokonaisuuksia ei siis lähetetä kerralla vaan ainoastaan se osa, jota navigoinnissa tarvitaan – verkkoselaimen rasitus vähenee
  • Staattisen sivun luomisessa palvelin valmistelee käyttäjälle lähetettävän HTML-rakenteen ennalta – näin sivu latautuu käyttäjälleen nopeammin

Työkalut mahdollistavat verkkosivuston helpon optimoinnin

Next.js tarjoaa runsaan määrän verkkokehitystä helpottavia työkaluja. Esimerkiksi kuvien käsittely on vaivattomampaa, kun sivuston kehittäjän ei tarvitse miettiä kuvan kokoa ja sovittamista, vaan alusta hakee kuvan suoraan ja nopeasti itse sekä optimoi sen laadullisesti siihen kokoon, mihin kohtaan se halutaan loppukäyttäjän näkyville. 

Kirjasto tarjoaa kehittäjille sekä kehittämistyötä helpottavia että verkkosivun toimintaa nopeuttavia ominaisuuksia. Next.js mahdollistaa esimerkiksi lokalisointia varten monipuoliset rajapinnat eri toiminnallisuuksien rakentamista varten, ja sen osat on suunniteltu toimiviksi hyvin yhteen. Kaiken tämän voisi toki tehdä hyvin myös Reactilla, mutta rakentaminen edellyttäisi huomattavasti enemmän manuaalista työtä sekä useiden eri kirjastojen hyödyntämistä. 

Next.js on aidosti varteenotettava vaihtoehto verkkokehitystä helpottavaksi kirjastoksi, ja sitä käytetäänkin jo varsin laajalti. Mittava kirjo markkinoiden suuria toimijoita, kuten esimerkiksi Github, Tencent, Netflix, Twitch, Hulu, Uber ja Ticketmaster käyttää Next.js:ää, eli sen tulevaisuus vaikuttaa tällä hetkellä varsin lupaavalta.

  • Next.js:n laaja kattaus työkaluja helpottaa huomattavasti verkkokehitysprosessia
  • Monipuoliset ominaisuudet toimivat keskenään hyvin yhteen ja useissa eri rajapinnoissa
  • Next.js on jo nyt käytössä varsin laajalla mittakaavalla, eli sen tulevaisuus vaikuttaa varsin lupaavalta