Tämä ei ehkä tule sinulle uutisena, mutta me Wunderilla teemme paljon decoupled-toteutuksia ja suosimme mikropalveluarkkitehtuuria. Näissä ratkaisuissa tukeudumme useimmiten Reactin ja Drupalin lyömättömään duoon. Muuan avoimen lähdekoodin frontend-sovelluskehys kuitenkin auttaa tuomaan näiden teknologioiden parhaat puolet esille – saanemme esitellä: Next.js.
Frontend- eli käyttöliittymäkehityksen maailma muuttuu niin valtavan nopealla tahdilla, että välillä voi olla vaikea pysyä eri rintamilla julkaistavien uusien teknologioiden ja ominaisuuksien perässä. Ei kovin kauaa sitten suurin osa meidänkin tekemistä käyttöliittymistä rakennettiin toisella Reactiin pohjautuvalla sovelluskehyksellä (framework), GatsbyllaAvautuu uuteen välilehteen. Asiat kuitenkin kehittyvät vikkelästi ja lähihistoriassa on tapahtunut paljon. Etenkin viimeisimpien versiopäivitysten tuomien toiminnallisuuksien myötä, yhä useammat projektimme hyödyntävät Next.js:ää.
Next.jsAvautuu uuteen välilehteen on Reactiin pohjautuva avoimen lähdekoodin web application framework eli vapaasti suomennettuna verkkosovelluskehys. Next.js:n on rakentanut Vercel, joka jatkuvasti kehittää sitä yhdessä Googlen, Facebookin ja maailmanlaajuisen avoimen lähdekoodin yhteisön kanssa. Viime vuosina Next.js:n suosio kasvanut räjähdysmäisesti ja nyt jättiyritykset kuten TikTok, Ticketmaster, Docker, Netflix, GitHub, Uber, Starbucks, Twitch ja moni muu käyttävät sitä luodakseen interaktiivisia, nopeita, tietoturvallisia ja hakukoneoptimoituja verkkosovelluksia.
Miksi Next.js puhuttaa?
Se, mikä Next.js:ssä on erityistä, on tapa miten se mahdollistaa hakukoneoptimoitujen React-sovellusten rakentamisen täysin ilman konfigurointia. Tämä on seurausta siitä, että Next.js huomattavasti yksinkertaistaa tapaa renderöidä sovelluksen sisältö palvelimella (server-side rendering, SSRAvautuu uuteen välilehteen) eli muodostaa grafiikka valmiiksi esitettäväksi etukäteen palvelimella jo ennen verkkopalvelulla vierailua. Tämä ratkaisee perinteisistä React-sovelluksista tutun ongelman, joiden sisältö renderöidään vasta suoraan käyttäjän selaimessa (client-side rendering). Tällöin ensimmäinen sivu, jonka käyttäjä tai esimerkiksi hakurobotti (web crawler) kohtaa on käytännössä tyhjä HTML-sivu, jossa ei ole lainkaan valmista sisältöä, ennen kuin selain hakee React-koodin sisältävän javascript-tiedoston, renderöi (eli ikään kuin rakentaa verkkopalvelun sisällön näkyväksi) ja tuottaa sen interaktiiviseksi. Kun sisältö renderöidään vasta selaimessa, aika niin sanotulle first contentful paintilleAvautuu uuteen välilehteen (eli kuinka nopeasti sisältö renderöidään) kasvaa.
Koska verkkosovellus renderöidään täysin etukäteen Next.js-toteutuksissa, ensimmäinen asia, jonka käyttäjä tai hakurobotti sovelluksessa kohtaa, on täysin renderöity HTML-dokumentti. Vasta tämän jälkeen renderöinti siirtyy selaimen tehtäväksi, jolloin verkkosovellus toimii kuten perinteinen, täysin interaktiivinen React-sovellus. Käytännössä tämä tarkoittaa siis nopeampia verkkopalveluita, parempaa käyttäjäkokemusta ja parempia mahdollisuuksia hakukonenäkyvyydelle. Esimerkiksi Googlen hakurobotit arvostavat nopeita sivustoja, joissa sisältö latautuu nopeasti eli aika first contentful paintille on mahdollisimman pieni.
Vuonna 2020 Next.js:ään lisättiin uusia toiminnallisuuksia, jotka ovat vaikuttaneet sen laajaan käyttöönottoon ja suosioon sisällönhallintajärjestelmien (CMS) tukemissa decoupled-sovelluksissa. Etenkin uudella tekniikalla, Incremental Static Regenerationilla (ISR) on ollut osansa tässä.
Käytettäessä yhdessä sisällönhallintajärjestelmän kanssa ISR:n avulla on mahdollista saada staattisten sivujen hyödyt yhdessä rakennettujen sivujen automaattisen luonnin kanssa. Tähän tekniikkaan voit tutustua englanniksi Next.js:n dokumentaatiossaAvautuu uuteen välilehteen.
Miksi ja miten me käytämme Next.js:ää
Me Wunderilla olemme ottaneet Next.js:n Drupalin rinnalle kaikissa niissä tapauksissa, kun haluamme hyödyntää decoupled-arkkitehtuuria antaen loppukäyttäjille parhaan ja nopeimman mahdollisen käyttökokemuksen sekä sisältöeditoreille ja admineille täyden hallinnan verkkosovelluksen sisällöstä.
Next.js on erittäin joustava ja niin sanotusti “backend-agnostic” eli riippumaton siitä, mitä teknologiaa taustajärjestelmä käyttää. Tällöin käyttöliittymä ja taustajärjestelmä voidaan yhdistää toisiinsa useilla eri tavoilla, kuten esimerkiksi GraphQL:llä, JSON:API:lla tai REST:llä. Tämä mahdolllistaa myös muiden datalähteiden liittämisen Drupalin lisäksi, jolloin arkkitehtuurista voidaan tehdä juuri niin kompleksinen tai yksinkertainen kun on tarve.
Next.js on kasvattanut suosiotaan viime vuosien aikana, ja nyt noin joka kymmenes sivusto 10 000 suosituimmasta verkkosivustaAvautuu uuteen välilehteen ja joka viides React-sivu top 10 000 verkkosivun joukossa käyttää Next.js:ääAvautuu uuteen välilehteen (02/2022).
Next.js:n kasvava suosio tuo myös jatkuvasti lisää uusia etuja sen kehittäjäyhteisölle. Sillä se on käyttäjiensä kehittämä avoimen lähdekoodin sovelluskehys, mitä enemmän sillä on käyttäjiä, sitä paremmaksi tulee sen tuki ja sitä helpommaksi käy esimerkkien ja yhteensopivien kirjastojen löytäminen.
Next.js on selkeästi ottamassa paikkaansa standardi-sovelluskehyksenä SSR:n tekemiselle Reactissa useista syistä, kuten sen
- Helposti omaksuttavasta, yksinkertaisesta ja samalla tehokkaasta APIsta
- Helposta integraatiosta käytännössä mihin tahansa taustajärjestelmään
- Innovatiivisuudesta, sillä kokeellisetkin ominaisuudet löytävät nopeasti tiensä Next.js:ään
- Helpoista päivityksistä, joissa uudet versiot ovat yhteensopivia aiempien versioiden toiminnallisuuksien kanssa (backwards compatibility)
- Keskittymisestä suorituskykyyn ja kehittäjäkokemukseen (developer experience)
Oletko valmis ottamaan seuraavan askeleen kohti menestystä digimaailmassa?
Lähetä viesti asiantuntijallemme tai täytä lomake ja otamme sinuun yhteyttä!
