Hej, mitt namn är Nils och jag är mjukvaruansvarig på Radio AF i skrivande stund. Jag är väldigt glad över att äntligen kunna sätta nya radioaf.se i drift efter nästan ett års utvecklingsarbete. I detta första inlägg tänkte jag berätta lite om hur hemsidan byggdes och ge en övergripande förklaring av hur den fungerar.
Tidigt i år beslutade jag, tillsammans med andra ansvariga på radion, att det bästa vore att bygga en ny hemsida från grunden. Detta beslut togs på grund av den gamla hemsidans många brister som jag försökt sammanfatta i följande lista:
Dessa problem gjorde det till en dålig investering att fortsätta arbeta på den gamla webbplatsen, då den hade hög teknisk skuld samtidigt som den inte fungerade som önskat. Efter att vi beslutat oss för att bygga en ny webbplats började vi med att ta fram krav för den. Baserat på dessa valde vi en teknikstack och påbörjade utvecklingen.
Själva programmeringen blev det som tog längst tid, främst för att jag var den enda utvecklaren och bara programmerade under min fritid. Under hela processen fick jag både hjälp och uppmuntran från medlemmar på radion, något jag är väldigt tacksam för. Deras engagemang och intresse var avgörande för att hemsidan skulle bli klar. Hela utvecklingsprocessen har även varit väldigt lärorik för mig. Projektet gav mig möjligheten att fatta stora tekniska beslut, och att lära mig om modern webbutveckling, mycket tack vare fantastiska open source communities bakom bland annat Next.js och Payload CMS. I nästa avsnitt kommer jag att berätta mer om hemsidans teknik, så fortsätt läsa om du vill veta hur den fungerar.
Hemsidan är byggd i Next.js-ramverket med TypeScript som programmeringsspråk och modulär CSS för styling. TypeScript har varit ett utmärkt val för ett så stort projekt, men om jag skulle börja om utvecklingen hade jag troligen valt SCSS för CSS-hantering. Hemsidan har en front- och backend som båda körs från samma webbserver med hjälp av Coolify. Hemsidan hostas på en VPS istället för Vercel eftersom vår backend är för krävande för att köras på Vercels serverless-funktioner och det blir mycket billigare att självhosta. Webbservern kommunicerar med två databaser som lagrar allt innehåll på hemsidan. MongoDB används för textinnehåll och Supabase S3 storage för tyngre filer som ljudfiler och bilder.
En viktig del av webbplatsen är dess backend, eller Content Management System (CMS), där allt innehåll som visas på webbplatsen kan skapas och redigeras. Detta innehåll lagras sedan i våra databaser och visas automatiskt på hemsidans frontend. Till exempel skriver jag detta inlägg i textredigeraren på vårt CMS. Webbplatsens CMS heter Payload 3.0, och valdes på grund av dess integration med Next.js samt flexibiliteten som erbjuds. Särskilt för en Next.js-app är fördelarna med att använda Payload istället för ett annat CMS som WordPress många. I denna video diskuteras några fördelar med att använda Payload istället för WordPress.
Webbplatsen genererar optimerade statiska sidor med innehåll från databaserna, förutom för backend- och söksidorna som är för dynamiska för att genereras i förväg. Detta sker genom en process som kallas Incremental Static Regeneration (ISR). Den kombinerar fördelarna med Static Site Generation (SSG) och Server-Side Rendering (SSR). ISR genererar statiska sidor under byggprocessen, likt SSG. Dock tillåter det även dynamiska uppdateringar av dessa sidor utan att kräva en fullständig ombyggnad av alla sidor. Detta ger en låg serverbelastning och snabba svarstider (SSG-fördelar), samtidigt som det kan hantera dynamiska uppdateringar av sidorna (SSR-fördelar).
Slutligen vill jag tacka alla som visat sitt förtroende under den långa utvecklingsprocessen. Alla ansvariga under denna och föregående termin förtjänar en extra shoutout för tålamodet och förtroendet de visat, särskilt stationscheferna och driftgruppen, som fått höra många invecklade förklaringar av ISR. Jag vill även tacka alla som bidragit med bilder och text till hemsidan vilket har varit en stor hjälp. Ett sista tack går till radions alla medlemmar som både röstat in mig som mjukvaruansvarig och tålmodigt väntat nästan ett år på denna hemsida.
Klicka på alla saker, lyssna live, lyssna på våra program och läs allt som verkar intressant – ha helt enkelt en mysig stund och koppla av på Radio AF:s nya hemsida :)
P.S. Sändningen är just nu nere i och med att vi håller på att flytta. Den kommer vara igång igen 10 feb.
