Da vi begyndte at bygge Dreamwall i 2024 stod vi med et klassisk valg: standard WooCommerce eller full headless? Begge havde alvorlige problemer. WooCommerce alene kunne ikke levere den UX-kompleksitet vi ville bygge (AI-billedgenerator integreret i købsflow, lifestyle-mockups i real-time, custom konfigurator). Full headless ville koste 500K+ og kræve at vi byggede checkout, kundekontoer, og ordre-håndtering fra bunden.
Løsningen blev en hybrid: vi beholdt WooCommerce som backend (database, checkout, ordrer, kunde-konti) og byggede en custom Next.js-frontend kun til de sider hvor det skabte kompetitiv fordel.
I dag driver vi den samme stack på 10.000+ produkter, 6 lande, 50.000+ AI-mockups om året. Her er hvad vi har lært, og hvordan vi anbefaler andre at bygge det.
Stacken
Frontend: Next.js 16 (App Router) + React 19 + Tailwind CSS v4 Backend: WordPress + WooCommerce + 8 custom plugins Database: MySQL (WooCommerce-standard) + PostgreSQL (Next.js side) Hosting: LiteSpeed VPS for WordPress + Vercel for Next.js AI-services: Replicate (Stable Diffusion) + OpenAI (prompt-optimering) CDN: Cloudflare for billeder + Vercel Edge Network Auth: WooCommerce session-cookies bridged til Next.js
Det er meget. Men hver komponent har et specifikt formål — der er ingen overlap, og der er ingen "vi bruger det fordi det var nyt".
Hvorfor hybrid og ikke full headless
Tre konkrete grunde:
1. WooCommerce checkout er løst — vi behøver ikke bygge det
WooCommerce har 15+ års modning på checkout-flow. Det understøtter alle danske betalings-gateways (Stripe, MobilePay via Reepay, Klarna), kompleks moms-logik, multi-currency, fragt-zoner, og kupon-systemer ud af boksen. At bygge alt det fra bunden i Next.js: minimum 200-300K og 6-12 måneders bug-jagt. Det er ikke værd.
2. Vi vil eje de visuelle oplevelser
WooCommerce-temaer kan ikke rumme det vi vil bygge. Imaginator-flowet (kunde skriver prompt → ser real-time preview på lifestyle-mockup → vælger størrelse → tilføjer til kurv) krævede komplet kontrol over UI, animations, og state-management. Det er en native Next.js-app som taler med WooCommerce via REST.
3. SEO + performance kræver moderne frontend
10.000+ produkter med multi-language og kompleks faceted search kræver SSR/SSG-strategi der WooCommerce ikke kan levere out of the box. Next.js giver os pre-rendered HTML, edge-cached varianter per locale, perfect Core Web Vitals, og kontrol over schema-markup. Vores LCP er nu 0.8s globalt — på WooCommerce alene var det 3.5s+.
Den kritiske infrastruktur — REST API mellem dem
Hjertet af hybrid headless er hvordan frontend og backend taler sammen. Vi bruger:
- →WooCommerce REST API v3 for produkt-data, varianter, lager, og priser
- →Custom REST endpoints (skrevet som WordPress-plugin) for ting WC ikke understøtter native: AI-prompt-history, custom kollektioner, mockup-cache
- →Webhooks fra WC → Next.js for cache-invalidering når produkter opdateres
- →Server-side fetch i Next.js for SSR/SSG, så frontend aldrig kalder WC client-side
Den ene ting der har sparet os mest tid: en aggressiv cache-strategi.
WC API er ikke designet til høj-trafik. Hvis Next.js kaldte WC for hver besøgendes side-load, ville WC's MySQL bryde sammen ved 1.000+ samtidige brugere. Vores løsning:
- →ISR (Incremental Static Regeneration) på alle produkt-sider med 60-sekunders revalidate
- →Edge-cache på Vercel for produkt-lister (5 min TTL, manuelt invalideres ved produkt-opdatering)
- →Redis-cache foran WooCommerce for almindelige queries
- →Webhook-invalidering når en produkt-ændring sker — så vi ikke venter på TTL
Resultatet: WC's MySQL ser ~50 reads/sekund i stedet for ~5.000. Det betyder vi kan køre WordPress på en almindelig LiteSpeed-VPS for 800 kr/md, mens Vercel håndterer 95% af request-volumen.
De 8 custom plugins der gør resten muligt
Vi har skrevet 8 custom WooCommerce-plugins for at få det vi har brug for. De er ikke open-source, men deres funktion er værd at kende:
- →Dreamwall Imaginator — AI-billedgenerator med Stable Diffusion + custom prompt-engine
- →Tapet — Custom mockup-renderer der placerer kundens billede på lifestyle-baggrunde
- →Photoprint — Pixel-perfect ordre-flow til print-on-demand med fysiske leverandører
- →Kollektioner — Custom taxonomi for kuraterede plakat-kollektioner med editorial content
- →Split Canvas — Konfigurator til triptych-plakater (3 plakater der tilsammen danner ét billede)
- →Bulk Variations — Admin-tool til at oprette 1.000+ varianter af et produkt på én gang
- →DAWA-Postcode — Validering af danske postnumre + auto-udfyldning ved checkout
- →Hard Routing No-Guess — Sikrer at Next.js og WP ikke krydser hinanden i URL-routing
Alle plugins er bygget med samme principper: ren PHP (ingen frameworks oven i WordPress), aktiv vedligeholdelse, fuld test-coverage på kritisk logik, og dokumenteret API. Vi kan opdatere dem hver uge uden at brække produktionsmiljøet.
Performance-tal
Konkrete tal fra Dreamwall i produktion (april 2026):
| Metric | Værdi | Mål |
|---|---|---|
| LCP (Largest Contentful Paint) | 0.8s | <2.5s |
| FID/INP | 38ms | <200ms |
| CLS | 0 | <0.1 |
| TTFB | 180ms | <600ms |
| Lighthouse Performance | 96 | >90 |
| Server-side render-tid | 45ms (cold), 12ms (warm) | <100ms |
| Backend MySQL queries/page | 0-5 (afhænger af cache-state) | <20 |
Til sammenligning: standard WooCommerce-shops med samme produkt-volumen har typisk LCP 3-5s, Lighthouse 50-70, og 50-200 MySQL queries per page-load.
Hvad du skal kigge efter hvis du vil bygge lignende
Hvis du står med et lignende behov:
- →Vurder først om standard er nok — hybrid headless er overkill for de fleste. Læs vores guide om hvornår headless giver mening.
- →Start med klar afgrænsning — beslut hvilke sider/features der skal være Next.js (custom UX) vs. WC (standard flow). Lav ikke alt på én gang.
- →Invester i cache-strategien fra dag 1 — uden den vil WC bryde sammen.
- →Build for incremental migration — vi flyttede sider til Next.js én ad gangen over 6 måneder, ikke alle på en gang.
- →Hav klar plan for vedligeholdelse — to systemer = mere drift. Budget 30-50K/år til løbende drift.
Total cost (Dreamwall som reference)
Hvis du vil bygge en lignende stack, regn med dette:
| Fase | Tidshorizont | Pris |
|---|---|---|
| Initial arkitektur + WC backend | 4-6 uger | 80-120K |
| Next.js frontend (basis sider + cache) | 6-10 uger | 100-180K |
| Custom features (AI, konfigurator, etc.) | 4-12 uger | 80-300K (afhænger af kompleksitet) |
| Performance + SEO-tuning | 2-4 uger | 30-60K |
| Total initial build | 4-8 mdr | 290-660K |
| Løbende drift | per år | 50-100K |
Det er en alvorlig investering. ROI'en kommer fra: - Højere conversion-rate (custom UX konverterer 20-40% bedre) - Bedre SEO (=> mere organisk trafik) - Skalerbarhed uden re-build (sytemet kan håndtere 10x trafikvækst) - Konkurrencefordel (kompetitorer kan ikke kopiere det hurtigt)
For Dreamwall har den investering tjent sig hjem 4x på 18 måneder. For en standard webshop ville det være penge ud ad vinduet.
Min anbefaling
Hvis du står med: - Eksisterende webshop der ikke kan skalere - Custom UX-behov standard-temaer ikke kan rumme - Trafik-volumen høj nok til at performance-fordel betyder noget - Budget til 290K+ initial + 50-100K/år drift
Så er hybrid headless værd at evaluere. Hvis ikke: bliv på standard, og brug pengene på marketing.
Book en uforpligtende scope-snak hvis du vil tale om om det giver mening for jer.
Læs videre
- →Hvornår giver headless webshop mening
- →WooCommerce vs. Shopify i 2026
- →AI i e-commerce — fra PoC til produktion
- →Dreamwall-casen
Få nye artikler direkte i indbakken
1-2 mails om måneden. Ingen spam. Frameld dig når som helst.