Lovable prerenderen — gratis (Vite + Cloudflare) vs betaald (Prerender.io)

Prerender.io kost €9-€90 per maand. LovableHTML zit in dezelfde prijsrange. Maar je kunt hetzelfde resultaat krijgen met een Cloudflare Worker voor €0. Hier zijn vier routes om je Lovable-site pre-renderbaar te maken, met echte kosten en wanneer welke route slim is.

Pre-rendering is voor Lovable-sites geen luxe. Zonder pre-render rendert Googlebot je site soms wel, soms niet, en AI-crawlers helemaal nooit. Sinds mei 2026 lost Lovable’s TanStack Start-default dit op voor nieuwe builds — maar als je build van vóór mei is, of je gebruikt nog Vite-CSR, dan staat deze beslissing voor je. Vier routes, met cijfers.

De vier routes, in één tabel

“Pages that don’t exist in Lovable — no route, no code, never built manually — but live on the customer’s own domain and fully indexed by Google.”

— NoTraffic9367 op r/lovable, 95 upvotes, over zijn PageGap-methode met Cloudflare R2 + Worker (bron)

Route A — Vite pre-render plugin (gratis, statisch)

Werkt voor sites met een vast aantal pagina’s. Bij elke npm run build krijg je per route een statisch HTML-bestand. Setup:

npm install --save-dev vite-plugin-prerender

// vite.config.ts
import { defineConfig } from 'vite';
import Prerender from 'vite-plugin-prerender';

export default defineConfig({
  plugins: [
    Prerender({
      routes: [
        '/',
        '/over',
        '/diensten',
        '/contact',
        '/blog',
        '/blog/eerste-post',
        '/blog/tweede-post',
      ],
      staticDir: 'dist',
      renderer: '@prerenderer/renderer-puppeteer',
    }),
  ],
});

Voordelen: Gratis, geen runtime nodig, statische bestanden zijn snel. Nadelen: Dynamic content (zoals een productfeed van 500 items) moet je handmatig in routes opnemen of via een script genereren. Schaalt tot ~5K pagina’s.

Route B — Cloudflare Worker als prerender-proxy (gratis tier)

Werkt slim: de Worker zit voor je site, detecteert of de bezoeker een bot is (Googlebot, OAI-SearchBot, PerplexityBot), rendert dan via Puppeteer-as-a-service en cached het resultaat 24 uur. Echte gebruikers krijgen normale CSR.

// worker.ts (simplified)
const BOT_AGENTS = [
  'googlebot', 'bingbot', 'oai-searchbot',
  'perplexitybot', 'twitterbot', 'facebookexternalhit',
  'linkedinbot', 'whatsapp', 'discordbot',
];

export default {
  async fetch(request, env) {
    const ua = request.headers.get('user-agent')?.toLowerCase() ?? '';
    const isBot = BOT_AGENTS.some(b => ua.includes(b));

    if (!isBot) {
      return fetch(request); // gewone gebruiker = CSR
    }

    // Bot: render via headless browser
    const cached = await env.CACHE.get(request.url);
    if (cached) return new Response(cached, {
      headers: { 'content-type': 'text/html' },
    });

    const html = await renderWithBrowser(request.url);
    await env.CACHE.put(request.url, html, { expirationTtl: 86400 });
    return new Response(html, {
      headers: { 'content-type': 'text/html' },
    });
  },
};

Voordelen: €0 op Cloudflare’s free tier (100K requests/dag). Schaalt naar 100K+ pagina’s. Werkt voor dynamic content. Nadelen: Browser-rendering kost CPU-tijd; bij hoge bot-traffic moet je naar een paid plan (€5/maand). Setup vereist Cloudflare-account en kennis van Workers.

Route C — LovableHTML (Reddit-consensus, free tier)

In r/lovable wordt LovableHTML in 4 verschillende threads als #1-aanbeveling genoemd voor builders die binnen 30 minuten een fix willen zonder dev-tijd. Free tier dekt typische MKB-sites (tot enkele duizenden pre-renders per maand); daarboven pay-as-you-go. Setup: één DNS-record + een script-tag toevoegen, klaar. Werkt voor static én dynamic routes.

Voordelen: Reddit-validated als snelste werkende oplossing voor niet-tech-builders. Free tier is écht gratis (geen creditcard). Goede support op Discord. Nadelen: Eén dienst extra in je stack. Voor > ~50K pre-renders per maand zijn alternatieven (Route B Cloudflare Worker) goedkoper. Tool-specifiek voor Lovable — minder geschikt voor multi-platform agencies.

Route D — Prerender.io (zero-config, betaald)

Plug-and-play voor multi-platform agencies. Onder 250K renders/maand: $0 (gratis tier). 250K-1M: $9-$90. Daarboven: enterprise-pricing. Voegt middleware toe aan je server (of een Cloudflare Worker template).

Voordelen: Werkt op elke stack (niet alleen Lovable). Stabiele service, goed support. Nadelen: Betaalde dienst boven free tier. Kosten schalen met traffic. Voor één klant per maand kost €9 minder dan 1 uur dev-tijd. Voor 10 klanten of meer is DIY (Route B) goedkoper.

Route E — TanStack Start migratie (lange termijn)

De fundamentele oplossing. Geen pre-render-laag erbovenop, maar SSR ingebakken. Per request krijgt Googlebot meteen geldige HTML met content. Lovable’s nieuwe default sinds mei 2026.

Voordelen: Geen middleware, geen tweede dienst, sneller voor gebruikers (kleinere bundle). Werkt out-of-the-box met AI-crawlers. Nadelen: Migratie kost tijd. Voor bestaande Vite-projecten: 4-8 uur voor een 20-pagina build. Voor grotere projecten: planning-werk.

Onze gids over TanStack Start migratie heeft een 3-route migratie-checklist.

Welke route past bij jouw situatie?

“You really have 3 options: Basic SEO 101 and hope it works / Move to Next.js (high tech bar) / Enable SSR (quick setup, monthly $$).”

— Jmacduff op r/lovable, 20 upvotes (bron)

• Solo founder, <100 pagina’s, geen dev-tijd: Route C (LovableHTML). €0, 30 min, klaar.
• Solo founder, <100 pagina’s, wel dev-tijd: Route A (Vite plugin). €0, 2 uur, volle controle.
• Solo founder, dynamic content (blog/shop): Route B (Cloudflare Worker). €0, 3 uur.
• Agency met 5+ klant-sites: Route D (Prerender.io). De €9-€90/maand verdeeld over klanten = goedkoper dan dev-tijd per migratie. Of LovableHTML als al je klanten op Lovable zitten.
• Nieuw project > mei 2026: Niets doen. TanStack Start is al de default.
• Bestaand project, lange termijn focus: Route E (migratie). Eenmalige investering, geen recurring kosten of middleware.

Wat je deze week kunt doen

• Test of je site al pre-rendered is: curl -A "Googlebot" https://jouw-site.nl/ | wc -l. Resultaat >100 = waarschijnlijk pre-rendered. <20 = klantcase voor één van de routes hierboven.
• Kies een route op basis van je situatie + tijd-budget.
• Implementeer in je test-omgeving voor je live gaat.
• Verifieer in Google Search Console URL Inspection na 1 week.

Onze audit-tool kan in 5 seconden zien of je site pre-rendered is — geen account, plak je URL. Voor de complete fundament-checklist: gratis PDF.

Wat prerenderen doet, in gewone taal

Je site bouwt zijn inhoud normaal pas op in de browser van de bezoeker. Prerenderen betekent dat er ergens een kopie klaarligt waarin dat al gebeurd is, zodat een crawler meteen volledige HTML krijgt in plaats van een leeg omhulsel.

Er zijn twee smaken die vaak door elkaar gehaald worden:

• Prerendering — je bouwt vooraf of op aanvraag een statische kopie en serveert die aan bots. De bezoeker krijgt gewoon de normale site.
• Server-side rendering — de server bouwt de pagina bij elk verzoek op, voor iedereen. Sinds Lovable op TanStack Start draait is dit de standaard voor nieuwe projecten; zie wat die omslag betekent.

Heb je een project van vóór die omslag, dan draait het waarschijnlijk nog op de oude opzet en moet je zelf kiezen.

Welke route bij welke situatie past

De verleiding is om meteen de betaalde route te nemen omdat die het snelst klaar is. Dat is soms terecht, maar controleer eerst of je het probleem überhaupt nog hebt. Bij een project van na mei 2026 is dat vaak niet zo.

Controleren of het werkt, ook na livegang

Prerendering is een laag die stil kan omvallen. Een verlopen abonnement, een gewijzigde route, een cache die niet ververst: in alle drie de gevallen krijgt de bezoeker gewoon zijn pagina en de crawler niets.

1. Haal je pagina op met een crawler-user-agent en kijk of de inhoud er staat.
2. Doe dat op je homepage én op een diepere pagina; die gedragen zich vaak verschillend.
3. Zet er een terugkerende controle op, bijvoorbeeld maandelijks. Dit is precies het soort fout dat je pas ontdekt als je verkeer al weg is.

De snelste manier om het verschil te zien is de bot vision inspector: die zet de browserversie en de crawlerversie naast elkaar.