Jamstack-arkkitehtuuri

Haluaisitko huippunopeasti latautuvan sivuston aukottomalla tietoturvalla ja ilman huolta palvelinkapasiteetista? Olemme rakentaneet useita sivustoja ns. Jamstack-arkkitehtuurilla, jolla saavutetaan edellä mainitut edut ja paljon muuta.

Mikä ihmeen Jamstack?

Jamstack on nimitys tietynlaista headless-arkkitehtuuria noudattavasta sivustosta. JAM-lyhenne ei viittaa hillopurkkiin vaan tulee termeistä JavaScript, API ja Markup. Sivujen valmistus tapahtuu JavaScriptillä, sisältö haetaan uudelleenkäytettävistä rajapinnoista ja tästä muodostuu staattisia HTML-tiedostoja. Käytännössä sivusto on siis iso kasa HTML-tiedostoja.

Arkkitehtuurilla on mahdollista saavuttaa merkittäviä etuja esimerkiksi sivuston nopeuden, tietoturvan, skaalautuvuuden sekä kehittäjäkokemuksen ja työkalujen suhteen.

Miten Jamstack eroaa perinteisistä ratkaisuista?

Ero Jamstack-arkkitehtuurilla toteutetun ja perinteisen monoliittisen julkaisujärjestelmän päälle rakennetun sivuston nopeudessa voi olla huima. Koska Jamstackissa sivuston sivut on jo etukäteen luotu, latautuvat ne lähes silmänräpäyksessä. Käyttäjät ovat tänä päivänä tottuneita huippunopeisiin mobiilisovelluksiiin ja samaa odotetaan myös verkkopalveluilta. Käyttäjäkokemuksen parannuksen lisäksi nopeampi verkkopalvelu tarkoittaa myös parempia sijoituksia Googlen hakutuloksissa, win-win tilanne siis.

Jamstack-ratkaisussa tietoa voidaan edelleen hallita julkaisujärjestelmän (esimerkiksi WordPressin) kautta, mutta julkaisujärjestelmän rooli on rajattu vain tiedon hallintaan ja tarjoiluun rajapintojen kautta – ei siihen miten tieto palvelussa esitetään käyttäjälle. Näkyvä sivusto (eli front-end) rakentuu omalla, irrallisella ohjelmistollaan.

Miten Jamstack toimii?

Kun ylläpitäjä muokkaa sivua, tämä käynnistää automaattisesti julkaisuprosessin, jossa julkaisujärjestelmästä haettava tieto luodaan Gatsby tai Next.js-sovelluskehyksellä sivuiksi, kun itse sivut rakentuvat täysin React-komponenteista. Julkaisuprosessi tapahtuu Netlify tai Vercel -palveluissa, jotka on optimoitu erittäin vauhdikkaaseen ja osittaisena tapahtuvaan julkaisuun.

Vaikka tämä staattisuus saattaa kuulostaa tylsälle ja epäinteraktiiviselle, React-komponentteja käyttämällä mihin tahansa toiminnallisuuteen voidaan luoda interaktiivisuutta ja käyttäjän vieraillessa sivulla ne herätetään henkiin.

Komponentit voivat myös käyttää ulkoisia palveluita, vaikkapa listaamaan tekoälypohjaisesti käyttäjälle räätälöityä suositeltua sisältöä.

Koska sivustosta muodostetaan Gatsbyn avulla käytännössä staattinen, voidaan se helposti ladata eri CDN-palveluiden kautta ympäri maailmaa, mikä mahdollistaa palvelun helpon skaalattavuuden suurille käyttäjämäärille.

Nopea ja mukautuva

Nopeuden lisäksi Jamstack-sivustossa suuri etu on mukautuvuus eri tarpeisiin. Koska järjestelmä muodostetaan useista toisistaan riippumattomista osista, on niiden korvaaminen helpompaa kuin koko järjestelmän uusiminen. Esimerkiksi julkaisujärjestelmän vaihtaminen sujuu kivuttomasti, koska käyttäjälle front-end ohjelmisto ei ole sidoksissa julkaisujärjestelmään. Samoin uusien palveluiden liittäminen Jamstack-ratkaisuun on yleensä paljon helpompaa kuin integrointi monoliittiseen järjestelmään. Markkinoilta löytyy erittäin paljon huippuluokan rajapintavetoisia ratkaisuja, joita on helppo kokeilla.

Jamstack-sivustojen iso etu on myös se, että ne kuluttavat lähtökohtaisesti huomattavasti vähemmän energiaa verrattuna monoliittisen järjestelmän päälle rakennettuun sivustoon. Tämä johtuu siitä, että Jamstack-arkkitehtuurissa yksittäinen sivu rakennetaan vain kerran ja se voidaan tarjoilla vaikka miljoonille käyttäjille sen sijaan että sivu rakennetaan jokaiselle käyttäjälle erikseen.

Lisää Jamstackista

Olemme käyttäneet Jamstack-arkkitehtuuria esimerkiksi Technopoliksen, eQ Haun ja Alma Talentin sivustouudistuksissa menestyksekkäästi. Käy testaamassa kuinka nopeasti sivustot latautuvat. Googlen PageSpeed Insights antaa desktopilla Technopoliksen sivustolle arvosanan 92/100 ja Alma Talentille 90/100 ja eQ Haku -sivustolle 87/100.

Jos aihe kiinnostaa laajemmin, suosittelemme lukemaan blogistamme COO Marko Paanasen kattavan kuvauksen headless- ja Jamstack-arkkitehtuurin hyödyistä liiketoiminnalle. Samoin case-kuvaukset edellä mainituista Jamstack-projekteista löytyvät sivuiltamme.