Hur vi bygger blixtsnabb, server-renderad e-handel med Next.js

Jag heter Magnus Öhrström, är frontendutvecklare på Cloud Nine, och arbetar just nu med ett av våra nystartade e-handelsprojekt.

En snabb applikation med korta laddningstider är ett måste för varje modern webbplats, och är särskilt viktigt för alla dagens e-handlare, inte minst för den e-handel som jag arbetar med just nu. Cloud Nine har stor erfarenhet av att skapa snabba och responsiva gränssnitt med hjälp av javascript-ramverket React. Med en React-applikation behöver inte hela sidan uppdateras vid till exempel ett knappklick, utan bara berörda delar som behöver ändras. Hur det fungerar i en så kallad “Single Page Application” berättar en annan av våra frontend-utvecklare Alexander, mer om i inlägget.

I arbetet med vårt e-handelsprojekt använder vi oss också av ett ramverk som heter Next.js, vilket är extra spännande att jobba med, eftersom det möjliggör så kallad “server-side rendering”. Det innebär att javascript-applikationen kan renderas på server-sidan istället för hos klienten. Detta ger ett antal fördelar. Webbplatserna får kortare laddningstider och då speciellt vid första rendering av sidan. Det här gör stor skillnad för till exempel mobilanvändare med långsam internetuppkoppling, eftersom webbplatsen fortare blir interaktiv.

Vissa sökmotorer och andra typer av botar klarar inte av att rendera javascript men däremot kan de hantera en server-renderad applikation. På så vis har webbplatsen bättre förutsättningar för att hamna högre upp i SEO-hierarkin. Utöver fördelen med SEO:n, hanterar applikationen dataöverföringar snabbare än en klient-renderad applikation.

Att ha en webbplats med en hög prestanda blir viktigare och viktigare. Vi på Cloud Nine använder Next.js i ett par nystartade e-handelsprojekt för att utnyttja fördelarna med server-renderade React-applikationer, för att kunna skapa mycket högpresterande webbplatser.