Server-side rendering

Server-side rendering är ett sätt att generera en webbsida där HTML byggs av en server i det ögonblick sidan efterfrågas. Servern hämtar datan sidan behöver, renderar ett komplett HTML-dokument och skickar det till webbläsaren. Webbläsaren kan börja visa innehåll direkt. JavaScript hydrerar sedan sidan för att göra den interaktiv. ## SSR vs client-side rendering Alternativet till SSR är client-side rendering (CSR). I CSR skickar servern ett nästan tomt HTML-skal plus ett JavaScript-paket. Webbläsaren laddar ner och kör JavaScript, som sedan hämtar data och renderar sidan. Inget syns förrän JavaScript exekverar. SSR byter lite serverarbete mot snabbare initial paint och bättre crawlbarhet. CSR byter långsammare initial paint mot lägre serverkostnad och en mer app-lik upplevelse. Moderna ramverk som Nuxt och Next.js stödjer båda och låter varje sida välja modellen som passar. ## SSR vs statisk generering SSR är inte samma sak som statisk sajtgenerering. Statisk generering bygger HTML vid bygge-tid och serverar samma fil till varje request. SSR bygger HTML på begäran och kan inkludera per-request-data som den inloggade användaren, regionsspecifik prisssättning eller personaliserade rekommendationer. För e-handel spelar den här skillnaden roll. Produktsidor, kundvagn och checkout kan oftast inte vara helt statiska eftersom priser, lager och kundvagnstillstånd ändras hela tiden. SSR hanterar de. Marknadssidor, bloggposter och kategoriskal kan ofta vara statiska. En modern frontend mixar båda. ## Varför SSR spelar roll för e-handel Snabb first-paint förbättrar konvertering. Google använder sidhastighet som en rankingfaktor, och Core Web Vitals mäter hur snabbt användare ser och kan interagera med innehåll. SSR hjälper eftersom den första byte webbläsaren tar emot redan är användbar HTML istället för ett tomt skal. SSR hjälper också crawlers. Sökmotorer och sociala medier läser den initiala HTML-responsen. När produktsidor server-renderas ligger strukturerad data, metataggar och Open Graph-taggar alla i den initiala payloaden. När de client-renderas kan crawlers missa innehåll om de inte kör JavaScript, och många gör det oberoende. ## Avvägningarna SSR är inte gratis. Varje request kostar servertid, vilket betyder att hosting är dyrare vid skala än att servera statiska filer från ett CDN. Caching hjälper men lägger till komplexitet. Att få SSR att fungera bra på en tungt trafikerad storefront kräver uppmärksamhet på cache-strategi, databasbelastning och felhantering. Ramverk abstraherar det mesta, men det underliggande arbetet är verkligt. ## Hur Frntkey passar in Frntkey är en Nuxt.js-frontend som använder server-side rendering som standard. Sidor renderas på Vercels edge och cachas där det är möjligt. Produktlistningar och produktsidor server-renderas så att first paint innehåller riktigt innehåll, riktiga priser och riktig tillgänglighet. Marknadssidor skrivna i Storyblok cachas och revalideras. Kundvagn och checkout är dynamiska och hämtar färsk data vid varje interaktion. Mixen håller first paint snabb, crawlers nöjda och e-handelsdata aktuell. ## Relaterade termer Statisk sajtgenerering · Core Web Vitals · Jamstack · Ecommerce frontend