Website maken met React wat is de beste stack?

Wanneer je met React een website wilt maken dan kom je voor een aantal keuzes te staan: ga je voor Next.js of ga je voor Astro, of misschien toch voor Gatsby of Eleventy.

Of bouw je misschien toch een webapp? Wat is eigenlijk het verschil tussen webapp en website?

Het verschil is HTML! Je wilt bij een website zo veel mogelijk HTML over de lijn sturen! Dit is goed voor Search Engine Optimization.

Waarom een SPA afvalt

Een Single Page Application is niet geschikt voor het maken van websites. De reden hiervoor is de volgende: Google en andere zoekmachines indexeren het beste rauwe HTML.

Een SPA geeft als initiële HTML een skelet terug, vervolgens bouwt JavaScript de UI op. Staat JavaScript uit dan zie je een blanco pagina!

Google heeft twee soorten crawlers:

• De "originele" crawler die pagina's bezoekt en de initiële HTML analyseert en indexeert. Van deze crawler heeft Google er legio.

• Een "premium" crawler die JavaScript aankan en in een soort headless browser runt.

  Deze crawler gedraagt zich dus meer als een echte browser, en is daarom ook duurder om te draaien.

  Van dit soort zijn veel minder crawlers, en de toekomst van deze crawler is wat onzeker.

Omdat een SPA een blanco pagina is voor de eerste crawler, indexeert Google deze dus minder snel / en volgens sommige ook minder goed.

Dit betekent dat een vite gebaseerde stack dus afvalt. Maar wat blijft er dan over?

Next.js is goed in dynamische content

Next.js is een react meta framework. En is geschikt voor het maken van websites, omdat het HTML over de lijn stuurt.

Je kan Next.js in twee modussen draaien:

• De export mode: in deze modus maakt Next.js van jouw website een complete statische build. Je hebt dan geen JavaScript runtime nodig om de pagina te serveren.

  De export mode is vooral geschikt als:

  • Je content niet verschilt per gebruiker.

  • Je content erg statisch is, en dus niet vaak wijzigt.

  Het outputten van een complete statische build noemt met ook wel Static Site Generation (SSG). Je genereert je website niet runtime maar buildtime.

• De normal mode: in deze modus kan Next.js per request een response genereren. Je hebt dan wel een JavaScript runtime nodig zoals Node.js.

  De normal mode is vooral geschikt als:

  • Je website per ingelogde gebruiker verschilt. Denk aan winkelmandjes of vriendenlijsten.

  • Je website per moment van de dag verschilt. Denk comment section.

  Next.js heeft caching mechanismes in normal mode, zodat je zo veel mogelijk data / pagina's / delen van pagina's kunt cachen.

  In de normal modus is eigenlijk een vorm van Server Side Rendering (SSR).

  Next.js support ook Incremental Static Regeneration (ISR) hiermee kan je delen van je website / applicatie opnieuw server-side renderen / cachen.

Zie "Next.js Modussen" op de Next.js pagina van deze kennisbank voor meer informatie over Next.js modi.

Voor een website beteken de modussen het volgende: laten we zeggen dat we een CMS hebben in de vorm van WordPress, als we in WordPress een pagina aanpassen:

• Gebruik je de export mode dan moet je een build draaien na elke wijziging in WordPress. Dit kunnen we natuurlijk automatiseren met een build pipeline.

• Gebruik je de normal mode, dan moeten we de cache van die pagina invalideren. We kunnen Next.js dan de pagina laten renderen en cachen, of pas iets in de cache zetten als de pagina wordt bekeken.

  We moeten dan wel een bericht vanuit WordPress sturen naar Next.js als een pagina wordt gewijzigd, en welke pagina dat is.

Wanneer kies je normal of export? Het hangt af van twee dingen:

• Hoe erg is het als een wijziging later verschijnt anders dan gelijk? Mag een comment van een gebruiker van de website even duren voordat het online staat.

  Wil je de wijzigingen zo snel mogelijk zien dan is export niet de juiste keuze. Het is wel afhankelijk van de snelheid van de build, maar hoe groter de website hoe langer het duurt!

• Hoe snel wil je je website hebben? Een complete statische build via is snel. Je kan alles maximaal cachen, op CDNs gooien, serveren dicht bij de gebruiker, je verliest geen tijd in de database / server side code.

Astro is goed in statische content

Astro is een web framework voor content driven websites. Astro is framework agnostisch, je kan het in combinatie met React, Vue Svelte etc gebruiken, en zelfs door elkaar heen.

Astro draait dan een speciaal sausje over react heen zodat het via .astro files te gebruiken is. Je kan dan React componenten definieren en ze gebruiken zoals altijd.

Je kan dan met react de dynamische onderdelen van je website maken, waar je net iets meer gebruikers interactie wilt.

Maar je kan ook react compleet statische componenten schrijven. Astro zal dan zorgen dat het react component vertaalt wordt naar HTML.

Astro support ook Server Side Rendering (SSR) via wat zij noemen On-demand rendering. Astro noemt dit islands, in het Nederlands eilanden dit zijn dan delen van website die server side gerenderd worden.

Astro support ook Incremental Static Regeneration (ISR) om zo delen van je applicatie opnieuw server-side te renderen.

@tanstack/start focust zich op de TypeScript developer

@tanstack/start wil het maken van een website zo developer vriendelijk maken. In hun ogen betekent dit een grote integratie met TypeScript.

In "start" is het mogelijk om met Incremental Static Regeneration (ISR) te werken. Wat inhoud dat je periodiek je cache update / een pagina opnieuw laat bouwen.

Tanstack Start support ook standaard Server Side Rendering (SSR) om zo dynamische delen van je applicatie on demand / ad-hoc te renderen.

@tanstack/start support zowel react als solid en daardoor dus framework agnostisch.

@tanstack/start is nog aan het koken, en op dit moment heeft het een Release Candidate (RC). De API kan dus nog veranderen. Dit maakt @tanstack/start wel iets voor de avonturier!

Astro vs Next.js vs Tanstack

Overview

Uitleg

• Next.js is in de normal mode afhankelijk van een klein stuk JavaScript om de content die gestreamed worden via React Server Components (RSC) op de juiste plek te zetten. Het resultaat is dat de pagina wel voor SEO doeleinden werkt, maar niet voor een eind gebruiker.

• Astro heeft een sterke focus om pas naar JavaScript terug te grijpen wanneer dat echt nodig is.

• Vercel het hosting bedrijf achter Next.js wil graag dat je bij hun komt hosten. Next.js beloofd overigens op dit gebied verbeteringen via de adapter API maar eerst zien dan geloven.

• Astro heeft een pagina met allerlei deploy / hosting opties.

• Next.js documenteert i18n maar het zit niet verweven in het framework.

• Tanstack.js documenteert i18n maar het zit niet verweven in het framework.