Hvad er præ-rendering?
Pre-rendering er en teknik, der skaber statiske, fuldt renderede versioner af websider på forhånd, så de kan vises med det samme til brugere og søgemaskiner.
Den bruges primært til JavaScript-tunge hjemmesider, så søgemaskinernes crawlere kan se det komplette HTML-indhold uden at vente på, at JavaScript bliver udført.
Pre-rendering bygger bro mellem Client-Side Rendering (CSR) og Server-Side Rendering (SSR ) - og leverer SEO-fordelene ved SSR uden komplekse serveropsætninger.
Sådan fungerer præ-rendering
Når der kommer en anmodning, genererer og cacher en pre-rendering-tjeneste en fuldt renderet version af siden i stedet for at udføre JavaScript i realtid.
Når en crawler eller bruger anmoder om den pågældende side, vises den cachelagrede HTML-version med det samme.
Typisk arbejdsgang
- En crawler anmoder om en URL.
- Pre-rendereren indlæser siden, udfører JavaScript og fanger det fuldt renderede output.
- Den gengivne HTML gemmes og genbruges til fremtidige anmodninger.
- Almindelige besøgende får stadig den dynamiske version, mens crawlere får præ-renderet HTML.
Hvorfor pre-rendering er vigtig for SEO
Søgemaskiner som Google og Bing kan behandle JavaScript, men det bruger ressourcer og tid på rendering.
Hvis din hjemmeside er meget afhængig af JavaScript, kan vigtigt indhold blive forsinket eller sprunget over i indekseringen.
Pre-rendering sikrer, at dit vigtigste indhold er tilgængeligt med det samme i HTML-form - hvilket forbedrer synligheden, indekseringen og ydeevnen.
SEO-fordele
- Øjeblikkelig crawlbarhed: Crawlere modtager læsbar HTML uden at køre scripts.
- Forbedret indeksering: Garanterer, at alt indhold, metadata og links er synlige.
- Hurtigere LCP og FID: Sider renderes hurtigere, hvilket forbedrer Core Web Vitals-score.
- Reducerede renderingskøer: Aflaster tung JavaScript fra Googlebots renderingspipeline.
Pre-rendering vs SSR vs CSR
| Funktion | Før-rendering | SSR | CSR |
|---|---|---|---|
| Tidspunkt for rendering | På forhånd | På anmodning | I browseren |
| SEO-understøttelse | Fremragende | Fremragende | Begrænset |
| Ydeevne | Hurtig (cachelagret) | Moderat | Langsommere indledende belastning |
| Kompleksitet | Lav | Medium-høj | Lav |
| Bedst til | Statisk eller semi-statisk indhold | Dynamiske sider | Interaktive apps |
Almindelige værktøjer til præ-rendering
- Rendertron - Open source-renderingsløsning fra Google.
- Prerender.io - Kommerciel tjeneste til servering af præ-renderede sider til bots.
- Netlify Prerendering - Indbygget statisk rendering til Netlify-websteder.
- Cloudflare Workers - Kan servere præ-renderet indhold på kanten.
Eksempel på implementering
For en JavaScript SPA hostet på Node.js:
const express = require('express'); const prerender = require('prerender-node'); const app = express(); app.use(prerender.set('prerenderToken', 'YOUR_TOKEN')); app.use(express.static(__dirname + '/public')); app.listen(3000);Dette sikrer, at når crawlere som Googlebot eller Bingbot anmoder om en side, får de automatisk serveret en pre-rendered version.
Bedste praksis
1. Pre-render kun vigtige sider
Fokuser på vigtige sider som f.eks. start-, kategori- og produktsider, der skaber mest trafik og synlighed.
2. Indstil udløb af cache
Genopbyg prærenderet indhold med jævne mellemrum for at holde data friske og forhindre, at forældede oplysninger vises.
3. Inkluder strukturerede data
Integrer schema.org-markup direkte i din præ-renderede HTML for at forbedre muligheden for rige resultater og forbedre den semantiske klarhed.
4. Valider output
Sammenlign "View Page Source" og "Inspect Element" for at bekræfte, at begge viser konsekvent, komplet indhold, der er synligt for crawlere.
5. Overvåg med Ranktracker
Brug Ranktracker's Web Audit Tool til at sikre, at prærenderet indhold indekseres korrekt og klarer sig godt i SERP'erne.
Test af præ-rendering
Brug disse værktøjer til at verificere implementering og SEO-effekt:
-
Google Search Console → URL-inspektionsværktøj
Tjek "Rendered HTML" for fuld synlighed af indhold og fuldstændighed af rendering. -
Lighthouse / PageSpeed Insights
Sammenlign præstationsmålinger før og efter pre-rendering for at måle forbedringer i Core Web Vitals. -
Hent som Google (ældre værktøj)
Bekræft, hvilken version af din side (renderet eller kilde) der er synlig for Googlebot.
Opsummering
Pre-rendering sikrer, at både brugere og crawlere ser komplette, SEO-venlige versioner af dine sider.
Ved at servere fuldt renderet HTML på forhånd forbedrer det crawlbarheden, indekseringshastigheden og Core Web Vitals - især for JavaScript-tunge websites.
Det er stadig en af de mest effektive tekniske SEO-strategier til at afbalancere hjemmesidens ydeevne, synlighed og skalerbarhed i moderne webarkitekturer.
