TanStack Start en Lovable: wat verandert er?

TanStack Start is een full-stack React-framework: het combineert de zichtbare website met routing, dataloading en functies die op de server draaien. Lovable gebruikt het standaard voor nieuwe projecten sinds 13 mei 2026. Het belangrijkste verschil met de oudere React + Vite-basis is dat een pagina al als leesbare HTML kan aankomen, voordat de browser het JavaScript uitvoert.

Dat is een bruikbare verbetering voor openbare websites. Maar SSR maakt een site niet automatisch sneller, veiliger of beter vindbaar. De inhoud, instellingen en uitvoering blijven bepalend. Deze pagina legt uit wat er verandert en wat je nog moet controleren.

Wat is Server-Side Rendering (SSR)?

Server-Side Rendering betekent dat de server de eerste weergave van een pagina opbouwt en als HTML naar de browser stuurt. De bezoeker hoeft dan niet eerst het JavaScript van de app uit te voeren om de server-gerenderde tekst te kunnen zien.

Bij een klassieke React-app met Client-Side Rendering (CSR) bevat de eerste HTML meestal vooral een basisdocument en een plek waarin React de pagina opbouwt. De browser downloadt JavaScript, voert het uit en haalt zo nodig gegevens op. Pas daarna verschijnt de inhoud.

Bij SSR gebeurt een deel van dat werk vóór de HTML de browser bereikt. De browser ontvangt bijvoorbeeld al de kop, uitleg en navigatie van een artikel. Stijlbestanden en afbeeldingen zijn nog steeds nodig voor de volledige vormgeving. Ook kan bepaalde inhoud later worden geladen.

Belangrijke nuance: React en Vite zijn niet hetzelfde als CSR. React kan ook op de server renderen en Vite is een ontwikkel- en bouwtool. Het gaat om de manier waarop een app is ingericht, niet om een beperking van React zelf.

Wat gebeurt er na de eerste weergave?

Na ontvangst van de HTML neemt React de bestaande pagina over en maakt die interactief. Dat heet hydration: knoppen, formulieren en andere onderdelen krijgen hun gedrag.

SSR betekent dus niet dat JavaScript verdwijnt. Een bezoeker kan tekst al lezen, terwijl een interactieve rekentool nog niet klaar is. Bij volgende navigaties kan TanStack Router pagina's vervolgens in de browser bijwerken zonder een volledige herlaadbeurt.

Een hydration-mismatch ontstaat als de eerste browserweergave afwijkt van de HTML van de server. Denk aan een lokaal opgeslagen voorkeur die meteen een andere tekst oplevert. Stabiele beginwaarden en browserinformatie die pas na hydration wordt gelezen, helpen dat voorkomen.

Wat is TanStack Start?

TanStack Start is een React-framework voor zowel browser- als serverwerk. Het bouwt voort op TanStack Router en gebruikt Vite. Routing, eerste paginaweergave, dataloading en serverfuncties passen daardoor binnen dezelfde applicatie.

TanStack Start is geen CMS en geen AI-model. Lovable is het platform waarmee je de app beschrijft en bouwt; TanStack Start is een deel van de technische basis van de app die daaruit komt.

Wat veranderde er bij Lovable?

Lovable maakte de overstap naar TanStack Start bekend op 1 juni 2026. Volgens die aankondiging gebruiken nieuwe projecten vanaf 13 mei 2026 standaard TanStack Start en SSR. Oudere projecten zijn daarmee niet automatisch naar hetzelfde framework omgezet.

De oudere basis bestond uit React + Vite met de paginaweergave hoofdzakelijk in de browser. Lovable beschrijft ook pre-rendering voor bestaande projecten: HTML vooraf maken, zodat een bezoeker of crawler niet uitsluitend van browser-JavaScript afhankelijk is. Pre-rendering en een volledige overstap naar TanStack Start zijn verschillende dingen.

Voor oudere projecten is inmiddels een upgradefunctie beschikbaar. De geschiktheid hangt van het project af. Controleer de officiële upgradehandleiding en de beschikbare projectacties voordat je een overstap plant.

Je hoeft niet anders te gaan bouwen of elk technisch onderdeel zelf te beheren. Je kunt binnen Lovable blijven beschrijven wat je wilt. Achter de schermen verandert wel hoe de pagina's worden geleverd en hoe serverwerk wordt ingericht.

Waarom kan SSR helpen bij SEO en AI-vindbaarheid?

SSR kan openbare tekst en structuur meteen in de HTML aanbieden. Dat maakt de pagina minder afhankelijk van de vraag of een zoekmachine of AI-crawler JavaScript kan en wil uitvoeren.

Google kan JavaScript renderen, maar dat is een extra verwerkingsstap. Andere crawlers voeren niet altijd dezelfde scripts uit. Als je uitleg al in de eerste HTML staat, is die inhoud eenvoudiger direct op te halen.

Dat betekent niet dat iedere crawler de volledige pagina ziet. Tekst die pas na een klik of een browseraanroep verschijnt, kan nog steeds ontbreken. Inhoud achter een login hoort niet openbaar beschikbaar te zijn.

Voor vindbaarheid blijven deze punten nodig:

• Een eigen titel en omschrijving per pagina.
• Een correcte canonical: het voorkeursadres van die pagina.
• Wederzijdse taalkoppelingen als je Nederlands en Engels aanbiedt.
• Logische koppen, beschrijvende links en nuttige, controleerbare inhoud.
• Een sitemap en juiste statuscodes, waaronder een echte 404 voor onbekende adressen.
• Gestructureerde gegevens die overeenkomen met wat zichtbaar op de pagina staat.

Een framework levert geen hogere positie in Google of vermelding in een AI-antwoord op zichzelf. Lees verder over SEO-advies als je wilt weten welke controles naast de techniek meetellen.

Worden linkvoorbeelden op WhatsApp en LinkedIn betrouwbaarder?

SSR helpt doordat de titel, omschrijving en Open Graph-tags al in de HTML kunnen staan wanneer een dienst de link ophaalt. Veel diensten die een linkvoorbeeld maken, voeren geen volledige React-app uit.

Een goed voorbeeld blijft afhankelijk van de juiste instellingen. Elke deelbare pagina heeft eigen tags nodig. Een afbeelding moet via een bereikbaar, absoluut HTTPS-adres beschikbaar zijn. De dienst moet de pagina mogen ophalen.

WhatsApp, LinkedIn en Slack kunnen oude voorbeelden bewaren. Een gewijzigde titel of afbeelding verschijnt daardoor niet altijd meteen. Ook kan een privépagina geen openbaar linkvoorbeeld krijgen. “Altijd direct goed” is dus geen belofte die SSR waarmaakt.

Is een TanStack Start-site sneller?

SSR kan de eerste zichtbare inhoud eerder tonen, omdat de browser niet eerst alle appcode hoeft uit te voeren. Daar staat tegenover dat de server tijd nodig heeft om de pagina op te bouwen en eventueel gegevens op te halen.

Een trage gegevensbron kan de eerste reactie vertragen. Grote afbeeldingen, zware scripts en veel JavaScript blijven ook bij SSR een probleem. Streaming, waarbij delen van de pagina stapsgewijs worden verstuurd, en caching kunnen helpen, maar moeten passend worden ingericht.

Meet daarom verschillende dingen: de reactietijd van de server, wanneer de belangrijkste inhoud zichtbaar wordt, hoe snel de pagina reageert en of onderdelen verspringen. Core Web Vitals vatten een deel daarvan samen. Vergelijk dezelfde pagina vóór en na een wijziging, onder vergelijkbare omstandigheden.

Wat verandert er aan de beveiliging?

Serverfuncties bieden een duidelijke plek voor gevoelige handelingen en geheime API-sleutels. Die kunnen op de server blijven, in plaats van in de JavaScript-bestanden die je bezoeker downloadt.

Dat voordeel geldt alleen bij de juiste inrichting. Niet elke functie of route-loader draait uitsluitend op de server. Ook in TanStack Start moet je gevoelige code bewust binnen een servergrens plaatsen. Een instelling die voor de browser is bedoeld, zoals een VITE_-variabele, is geen veilige plek voor een geheim.

Een serverfunctie blijft bovendien aanroepbaar. Controleer daarom bij iedere gevoelige handeling wie de aanvrager is, welke gegevens die mag zien of aanpassen, en of de invoer geldig is. Voor openbare functies zijn misbruikbeperking en kostenbewaking relevant. SSR vervangt geen toegangscontrole of beveiligde databaseregels.

Cache ook geen persoonlijke pagina alsof die openbaar is. Een gedeelde cache met gegevens van de vorige bezoeker kan informatie lekken, ook als de pagina snel laadt.

Wat betekent dit voor extern hosten?

Een app die pagina's bij ieder verzoek op de server rendert, heeft een geschikte serveromgeving nodig. Alleen de browserbestanden in een statische hostingbucket plaatsen is daarvoor niet genoeg.

Bij een klassieke CSR-app kon je de gebouwde HTML-, CSS- en JavaScript-bestanden vaak op statische hosting zetten. Losse backenddiensten bleven daarbij wel nodig voor bijvoorbeeld accounts of gegevensopslag.

Bij TanStack Start hangt extern hosten af van de gekozen deploymentconfiguratie. Dat kan bijvoorbeeld een Node.js-server of een ondersteunde edgeomgeving zijn. Lovable regelt zijn eigen publicatieomgeving; dit Brandable-project draait daar op Cloudflare Workers. Dat is geen algemene eis dat elk TanStack Start-project op Cloudflare moet draaien.

Er is een uitzondering: TanStack Start ondersteunt ook pre-rendering, waarbij bepaalde pagina's tijdens het bouwen als HTML worden gemaakt, en een SPA-modus. Voor uitsluitend statische pagina's kan statische hosting passen. Maar serverfuncties, dynamische SSR en andere serveronderdelen hebben nog steeds een runtime nodig. Je export is niet automatisch een map die op iedere host werkt.

Bij een verhuizing moet je ook omgevingsvariabelen, redirects, accounts, database, bestanden, e-mail en monitoring nalopen. Bekijk de officiële handleiding voor extern hosten en onze uitleg over managed hosting.

Moet je een oudere Lovable-site omzetten?

Niet alleen omdat er een nieuwer framework is. Een overstap is vooral zinvol als die een concreet probleem oplost of de verdere ontwikkeling helpt. Een goed werkende oudere site hoeft niet automatisch opnieuw opgebouwd te worden.

Leg vóór de upgrade vast wat er nu werkt: belangrijke pagina's, formulieren, accounts, metadata en prestaties. Test diezelfde onderdelen na de upgrade in de preview. Controleer ook directe bezoeken aan een diepere URL, niet alleen navigatie vanaf de homepage.

Volgens Lovable blijft de bestaande gepubliceerde versie actief totdat je de upgrade publiceert. De upgrade kan via de versiegeschiedenis worden teruggedraaid. Dat maakt testen mogelijk, maar vervangt geen controle van gegevens en externe koppelingen.

Een praktische les van onze eigen site: een Nederlandse en een Engelse pagina kunnen er goed uitzien, terwijl hun taalkoppelingen de verkeerde adressen aanwijzen. SSR levert die verkeerde tags dan alleen sneller aan. Controleer dus de HTML en de werking, niet alleen het uiterlijk.

Checklist voor je TanStack Start-site

Een goede basis is pas bruikbaar als de belangrijke pagina's en handelingen kloppen. Controleer in ieder geval:

• Staat de openbare hoofdtekst in de HTML zonder JavaScript uit te voeren?
• Heeft iedere pagina eigen metadata en een canonical naar zichzelf?
• Verwijzen Nederlandse en Engelse versies correct naar elkaar?
• Werken gedeelde links en hun afbeeldingen zonder inloggen?
• Blijven geheime sleutels buiten de browserbestanden?
• Controleren serverfuncties toegang en invoer?
• Blijven persoonlijke gegevens buiten gedeelde caches?
• Werken formulieren, accounts en directe pagina-adressen na de upgrade?
• Zijn prestaties gemeten in plaats van aangenomen?
• Ondersteunt een eventuele externe host alle gebruikte serveronderdelen?

Veelgestelde vragen over TanStack Start en Lovable

Gebruikt Lovable TanStack Start voor alle projecten?

Nieuwe projecten gebruiken het volgens Lovable standaard vanaf 13 mei 2026. Oudere projecten zijn niet automatisch omgezet. Controleer de projectinstellingen en upgradehandleiding voor je eigen project.

Vervangt TanStack Start React of Vite?

Nee. TanStack Start gebruikt React en Vite en voegt onder meer SSR, routing-integratie en serverfuncties toe. Het is een framework rondom die basis, geen vervanging van React.

Wat is het verschil tussen SSR en pre-rendering?

Bij dynamische SSR wordt de HTML tijdens een verzoek opgebouwd. Bij pre-rendering wordt HTML vooraf gemaakt, bijvoorbeeld tijdens het bouwen. Beide kunnen leesbare HTML leveren zonder eerst browser-JavaScript uit te voeren.

Is mijn site met SSR automatisch beter vindbaar?

Nee. SSR maakt openbare inhoud gemakkelijker direct op te halen, maar nuttige tekst, correcte metadata, interne links en toegankelijkheid voor crawlers blijven nodig. Een betere positie is niet gegarandeerd.

Heb je met SSR nog JavaScript nodig?

Voor de interactieve onderdelen meestal wel. De server kan de eerste HTML leveren; React gebruikt daarna JavaScript om die pagina interactief te maken. Dat proces heet hydration.

Zijn API-sleutels automatisch veilig in TanStack Start?

Nee. Geheime sleutels moeten binnen server-only code worden gebruikt en mogen niet in browserbestanden of publieke instellingen terechtkomen. Serverfuncties hebben daarnaast toegangscontrole en invoercontrole nodig.

Kan ik TanStack Start buiten Lovable hosten?

Ja, met een passende deploymentconfiguratie. Dynamische SSR en serverfuncties vereisen een ondersteunde runtime. Alleen vooraf gemaakte statische pagina's kunnen zonder die serveronderdelen op statische hosting draaien.

Kost een upgrade tijd en credits?

De Lovable-upgrade gebruikt credits en vraagt controle van de uitkomst. Hoeveel werk nodig is, hangt af van je project en koppelingen. Controleer de actuele upgrade-informatie voordat je begint.

Bronnen en verder lezen

De platforminformatie is gecontroleerd op 30 oktober 2026. Functies en upgradevoorwaarden kunnen veranderen.

• Lovable: Building apps using TanStack Start, aankondiging van 1 juni 2026.
• Lovable: upgraden naar TanStack Start.
• TanStack Start: SEO en rendering.
• TanStack Start: serverfuncties.
• TanStack Start: execution model.
• TanStack Start: SPA-modus.
• Lovable: extern publiceren en hosten.

Wil je de bredere mogelijkheden kennen? Bekijk onze Lovable-gids en Lovable voor bedrijven. Wil je weten wat deze techniek betekent voor jouw website? Stel ons je vraag.

De links naar lovable.dev bevatten onze partnercode. We zijn Lovable-partner; die relatie verandert niets aan de beperkingen en aandachtspunten die we hier beschrijven.