Att bygga snabba hemsidor har aldrig varit viktigare. De nya ramverken såsom React, Vue eller Svelte, skapades för att bygga mer interaktiva hemsidor, men det visade sig vara ett komplext - men inte omöjligt - problem att förena detta med snabba laddtider.
I denna artikel beskriver vi hur Next.js, ett ramverk som baseras på React, erbjuder en mängd verktyg som gör att hemsidorna blir blixtsnabba utan att kompromissa med användarupplevelsen. De flesta av dessa funktioner aktiveras automatiskt, och det krävs minimalt jobb från utvecklaren.
Vad är Next.js?
Next.js är ett React-baserat ramverk. I React används JavaScript för att skapa i princip allt innehåll på hemsidan. JavaScript är bra eftersom det gör att hemsidorna blir maximalt interaktiva, till skillnad från ren HTML där hemsidan är mer statisk. React lämpar sig för att skapa element som kunden kan interagera med och att koppla dessa till en databas eller ett externt system.
Men React i sig är inget fulländat system - man behöver också en server eller ett ramverk som kapslar in React. Och hur det ramverket är designat kan påverka både hur enkelt det är för utvecklaren och även hur snabb hemsidan blir. Next.js är ett sådant ramverk, och lägger på en mängd funktioner ovanpå React.
Enligt Stack Overflow Developer Survey 2024 använder ca 40% av svarande React, och ca 18% Next.js.
Funktioner för att snabba upp hemsidan
Här är en översikt av de funktioner i Next.js som vi diskuterar i artikeln. Scrolla vidare för att läsa mer!
- Navigering och prefetching - Sidor laddas innan användaren ens klickat på knappen
- Server-side rendering (SSR) - JavaScript-koden körs först i servern för att skapa snabb HTML, och skickas sedan till webbläsaren
- Bildoptimering - Bilder laddas i bakgrunden, och optimeras för olika storlekar
- Koddelning (code splitting) - Bara den nödvändiga JavaScript-koden skickas till webbläsaren
- Server-komponenter - JavaScript kör enbart i servern, inte i webbläsaren
- Static site generation (SSG) - Om en sida inte är interaktiv genereras HTML-koden en gång och kan då visas ännu snabbare, utan att köra JavaScript
Navigering och prefetching
I Next.js så är länkar mer än bara länkar. När en länk till en annan sida visas på skärmen så laddas den sidan automatiskt in i bakgrunden, så att om användaren skulle klicka på länken så är innehållet redo att visas direkt! Detta kallas för prefetching.
En annan fördel med länkar i Next.js, vilket även är sant för många andra JavaScript-baserade ramverk, är att hemsidan inte laddar om när man klickar på en länk. Bara det innehållet som faktiskt ändras behöver laddas (om det inte redan prefetchats) och sedan kan innehållet ändras. Ingen mer laddindikator!
Server-side rendering
Server-side rendering (SSR) minskar tiden det tar innan hemsidan syns, och är automatiskt aktiverat i Next.js för de sidor där det är lämpligt. SSR innebär att JavaScript-koden först kör i servern, och genererar då HTML-kod. När HTML-koden skickats till webbläsaren syns innehållet för användaren. Till sist skickas även JavaScript-koden, vilket då gör hemsidan interaktiv. Eftersom HTML-kod i många fall kan laddas snabbt jämfört med JavaScript så löser denna metod ett av de stora problemen med JavaScript-baserade ramverk.
Eftersom HTML-kod inte ger alla fördelarna med JavaScript, såsom att man kan interagera med element, så skickas sedan även JavaScript-koden till webbläsaren. Först skickas alltså HTML-kod, som användaren kan se men inte interagera med, och sedan skickas JavaScript-koden, och när den laddas kan användaren även interagera med element.
Det finns två stora fördelar med SSR:
- Hemsidans innehåll syns blixtsnabbt
- Data som kommer från ett externt system, såsom en databas eller ett CMS-system, kan också synas direkt utan att behöva laddas. Inga fler laddningsindikatorer!
Det är som sagt först när JavaScript-koden skickats som användaren kan börja interagera med element. Men utan SSR behöver användaren vänta på JavaScript-koden innan någonting syns överhuvudtaget, och dessutom på att allt externt innehåll ska laddas!
Bildoptimering
Next.js optimerar automatiskt bilder som används på hemsidan för att de ska ladda så snabbt som möjligt. På små skärmar kan en mindre version av bilden laddas, medan på större skärmar laddas bilden i full upplösning.
Det har länge varit ett problem att när bilden eller andra element laddas så hoppar innehållet. Detta kallas för content layout shift (CLS). Med Next.js så är detta inte längre ett problem eftersom bildens mått är inkluderade i den genererade HTML-koden, tillsammans med allt annat innehåll såsom texter.
Koddelning (code splitting)
Koddelning, eller code splitting, gör att JavaScript-koden laddas snabbare.
Next.js är ett JavaScript-baserat ramverk, och för att göra hemsidan interaktiv så skickas koden till webbläsaren. Koddelning, eller code splitting, delar upp JavaScript-koden i små bitar, och ser till att bara de bitarna som behövs skickas till webbläsaren. När användaren navigerar till en ny sida, till exempel genom att klicka på en länk, så kanske ny kod behövs. Då laddas bara den lilla bit kod som faktiskt behövs för den nya sidan. Med prefetching så har det i många fall skett redan innan användaren klickar på länken.
Server-komponenter
Server-komponenter minskar mängden JavaScript som skickas till webbläsaren, och snabbar därför upp laddningstiden.
Server-komponenter är JavaScript som bara kör i servern, och aldrig i webbläsaren. När komponenterna kör i servern så skapar de HTML-kod på samma sätt som med server-side rendering (SSR), men eftersom JavaScript-koden inte skickas till webbläsaren så kan man inte interagera med dessa element. Fördelen är alltså att mängden JavaScript-kod som skickas till webbläsaren minskar, men denna metod kan bara användas för element som inte är interaktiva.
En mycket bra funktion i React är att man kan blanda server-komponenter och vanliga komponenter (som även kallas klient-komponenter). De delar av hemsidan som är interaktiva kan göras med klient-komponenter, och då skickas den JavaScript-koden till webbläsaren. Men de delar som inte är interaktiva kan göras som server-komponenter och då skickas inte JavaScript-koden till klienten.
Static site generation (SSG)
Static site generation (SSG) gör att HTML-koden som skapas i servern laddas ännu snabbare. När det är möjligt att använda denna funktionen aktiveras det automatiskt i Next.js.
SSG kan bara användas om en hel sida inte är interaktiv. Eftersom ingenting på sidan är interaktivt så behöver ingen JavaScript-kod skickas till webbläsaren. Det öppnar upp för en optimering - JavaScript-koden som skapar HTML-koden körs bara en gång, och sedan kan samma HTML-kod återanvändas. När en användare besöker sidan är alltså HTML-koden redan färdig och kan direkt skickas till webbläsaren, utan att behöva bearbetas av JavaScript-koden i servern. Snabbt!
Det finns en relaterad funktion som heter incremental static regeneration (ISG) som kan användas om innehållet på en sida ibland ändras, till exempel för en blogg där artiklar ibland läggs till. Då kan man skapa HTML-koden i vissa intervall - kanske en gång var tionde minut. När användare besöker sidan får de flesta en för-bearbetad HTML-kod som är redo direkt. Var tionde minut uppdateras HTML-koden så att nytt innehåll syns.
Sammanfattning
För att snabba upp hemsidor som byggds med JavaScript-baserade ramverk finns en mängd metoder som används. Funktionerna gör att hemsidan blir supersnabb men ändå maximalt interaktiv. För utvecklaren är det enkelt att jobba trots att problemet är ganska komplext, och detta beror till stor del på att Next.js automatiskt aktiverar funktionerna.
Hur vi använder oss av Next.js
På Pal1 använder vi de senaste teknikerna och skapar skräddarsydda hemsida utifrån kundens behov. Next.js låter oss utveckla snabbt, koppla samman avancerad funktionalitet från olika system (e-commerce, CMS, databas, API:er) och skapa verktyg som användaren kan interagera med.
Är du intresserad av att höra mer? Kontakta oss.