Webapp maken met React wat is de beste stack?

Je wilt een webapp maken die de gebruiker de beste UX geeft en waar je het maximale uit de mogelijkheden van JavaScript wilt halen. Wat gebruik je dan als stack in combinatie met react?

Ga je voor de maximale vrijheid met vite, wil je de sublieme support voor TypeScript van @tanstack/start of kies je toch voor Next.js

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

Een MPA of SPA bij het maken van een webapp?

Een Multi Page Application (MPA) zal bij elke navigatie naar een andere pagina de server worden aangeroepen. De server kan dan per gebruiker / per situatie reageren met een andere HTML output.

Een Single Page Application (SPA) laadt een klein skelet aan HTML van de server, en bouwt de UI vervolgens op via JavaScript. Zonder JavaScript is de pagina compleet blanco.

Het feit dat een SPA dus geen complete HTML over de lijn terugstuurt maakt het minder geschikt om websites mee te maken. Heb je dus toch ook content die gevonden moet worden door zoekmachines dan is een SPA niet geschikt.

Een ander belangrijkste verschil tussen een SPA en een MPA bij een webapp is hoe je het deployed / host. Bij een MPA heb je een server nodig met een JavaScript runtime.

Het hosten van een SPA simpeler, want een SPA bestaat uit puur statische content zoals HTML, JavaScript en CSS. Dit kan je op elk CDN laten hosten, of zelf serveren via apache of nginx. Wil je de meest simpele opzet qua hosting kies dan voor een SPA.

Een moderne MPA kan een MPA echter doen voelen als een SPA. Een moderne SPA implementatie zal strategisch JavaScript gebruiken om content client side te wisselen. Dit wordt ondersteund door Next.js en Tanstack.

Vite is geboren voor de SPA

vite is heel erg sterk in het maken van een pure SPA. De @vitejs/plugin-react gaat er namelijk standaard van uit dat er geen JavaScript runtime is. Het is dan onmogelijk om toch code te schrijven die een front-end server verwacht.

Een ander voordeel van vite is dat je react echt kan gebruiken zoals jij dat wilt. Je moet namelijk zelf alles toevoegen: een router, een back-end communicatie laag, etc etc. vite geeft je maximale vrijheid!

Het nadeel is dat @vitejs/plugin-react dan geen enkele mogelijkheid tot MPA geeft. Ook heeft het geen support voor React Server Components.

Je zult ook zelf een router moeten regelen, en andere poes pas, maar dit geeft ook lekker veel vrijheid.

@tanstack/start geeft je een boost

@tanstack/start is een react meta framework dat heel erg inzet op TypeScript. Zo krijg je van @tanstack/start via @tanstack/router een TypeScript bewuste file based router. Gebruik je dan ook gelijk @tanstack/form dan zit je qua formulieren ook lekker geïntegreerd.

Standaard runt @tanstack/start op de server via Server Side Rendering(SSR). Je hebt dan wel een JavaScript runtime nodig op je server zoals Bun, Node.js of Deno. Standaard is TanStack dus op het MPA model!

@tanstack/start is ook bezig met support voor React Server Components (RSC). maar dit zit nog in de pijplijn.

Ook bestaat er een SPA modus in deze modus worden alle features uitgeschakeld waarvoor je geen JavaScript server nodig hebt.

Next.js is een populaire keuze

Next.js is een populair React meta framework, met een focus om React naar de server brengen via React Server Components (RSC). Standaard brengt Next.js je een MPA model!

Ook bestaat er een export mode gebruik je deze mode dan heb je geen JavaScript runtime nodig op je server. Next bouwt dan een compleet statische build via het SPA model. Met één belangrijke toevoeging alles wat statische HTML kan zijn is dat dan ook.

Verder krijg je via Next.js allerlei features zoals een file based router, image compression, caching etc etc

Vite vs Next.js vs @tanstack/start