Vad är JAMStack?

Headless CMS är ett begrepp som har funnits några år nu. I korthet betyder det att innehållet hanteras i ett CMS, exponeras via ett API och presenteras i en helt separat webbapplikation. Den här webbapplikationen kan bygga på olika tekniker. När vi började med Headless CMS för åtta år sedan använde vi gärna ett PHP-ramverk som heter Laravel.

JAMStack är en (ganska) ny teknikstack för headless-webbplatser. Med JAMStack genereras statistiska sidor baserat på den kod och det innehåll som webbplatsen eller tjänsten består av. Dynamiskt innehåll – sök, formulär och interaktiva funktioner – laddas in med hjälp av JavaScript direkt i besökarens webbläsare.

Välj rätt ramverk för webbplatsen

Du kan bygga upp hela frontenddelen (eller presentationslagret) för webbplatsen från grunden, eller så kan du använda ett ramverk för JAMStack-webbplatser. Vi brukar jobba med två olika typer av ramverk:

• Ramverk som bygger på Server Side Rendering (SSR). SSR betyder att applikationen använder till exempel Node.JS för att rendera en webbsida på servern innan den skickas till besökaren. Att sidan byggs upp på servern innebär mindre JavaScript-beroende, och avgjort bättre SEO och tillgänglighet än om du har en sida som byggs upp av JavaScript hos användaren (eller sökmotorn…).
• Ramverk som genererar hela webbplatsen som statiska sidor. Den här typen av ramverk brukar kallas Static Site Generators. Vi har valt att jobba med Next.js, Gatsby och Gridsome. Om du jobbar med en Static Site Generator är det värt att tänka på att innehållsförändringar i CMS-verktyget innebär att hela webbplatsen kan behöva genereras om. För en webbplats med tusentals sidor kan det ta tid. Det här är ett känt problem, och med tiden tror jag att det kommer bli möjligt med inkrementella innehållsuppdateringar.

De ramverk som vi jobbar med har färdiga kopplingar till vanliga datakällor, temahantering med mera. Det vill säga funktioner som ofta finns i ett konventionellt CMS-verktyg – förutom själva innehållet då.

Med tanke på JAMStack-marknaden är i sin linda så är det värt att kolla att det verktyg du väljer används av många andra, bygger på en populär basteknik (exemplen här ovanför bygger på React respektive Vue) och så klart har de funktioner som du behöver.

Fördelar med JAMStack

Här är några av fördelarna med JAMStack:

1. En JAMStack-webbplats gör avgjort färre databasanrop jämfört med en traditionell webbplats. Det betyder att den kan hantera många gånger fler besökare än en traditionell webbplats med samma resurser (minne, lagringsutrymme, processorkraft). Det här gör webbplatsen mycket mindre känslig för överbelastningsattacker.
2. En snabbare upplevelse för besökare. Snabba sidladdningar är en kritisk ingrediens i en bra användarupplevelse, och leder bland annat till bättre konvertering.
3. Nya hostingalternativ som underlättar för utvecklare. Om jag använder en Static Site Generator kan JAMStack-webben drivas på ett CDN (Content Delivery Network) som historiskt sett har använts för att leverera bilder och dokument. Nu när JAMStack-trenden är i full sving har det också poppat upp leverantörer som abstraherar bort allt som har med servrar och operativsystem att göra. Istället kopplar jag ihop vårt verktyg för källkodshantering (GitHub i Whitespaces fall) direkt med hostingmiljön. Jag kan alltså uppdatera funktioner på kundens webbplats och testmiljöer på någon minut bara genom att pusha ny kod.

Fredrik Johansson är fullstackutvecklare och byråchef på Whitespace i Malmö.