– Det har innenfor moderne web-rammeverk blitt så mye fokus på serveren at vi nesten har glemt bort klienten, sier utvikleren og gründeren Tanner Linsley.
Linsley er kanskje mest kjent for å ha laget TanStack Query (tidligere kalt React Query), samt andre verktøy og biblioteker som TanStack Router og TanStack Table.
I en ny video som du kan se i bunnen av saken presenterer han sitt nyeste prosjekt: React-rammeverket TanStack Start.
Linsley forteller at den senere tids "besettelse" av serveren har ført til at det har blitt vanskeligere for utviklere å forstå hva som skjer "under panseret". Det vil ha nå gjøre noe med.
Tanner may be the most cracked/underrated frontend engineer alive. The most refreshing React talk I’ve seen all year*. Tanstack Start is a funny name though I guess I take a bit of the blame, but hits 99% of what I feel has been missing from the React metaframework landscape for… https://t.co/zV6ZkKttfM pic.twitter.com/xDRhdS7YVJ
— swyx io (@swyx) October 20, 2024
TanStack Start er foreløpig i alfaversjon og har fått mye oppmerksomhet i utviklermiljøer i det siste. Noen mener til og med at TanStack Start kan bli en seriøs utfordrer til Next.js – mye på grunn av at det er "selveste" Tanner Linsley som står bak.
Dette er TanStack Start
TanStack Start bygger på toppen av TanStack Router, som gir deg blant annet TypeScript-støtte med typesikkerhet, autofullføring og typehint overalt.
Ifølge Linsley skal TanStack Start gi den beste utvikleropplevelsen – samtidig som rammeverket også skal være best på alt som har med ruting, caching og typesikkerhet å gjøre. Disse punktene har ifølge Linsley historisk sett vært underprioritert av andre rammeverk, selv om de etter hans mening er avgjørende for en god utvikleropplevelse.
I tillegg til alt du får med TanStack Router, skal TanStack Start gi deg dette:
- Full-document SSR
- Streaming
- Server Functions / RPCs
- Bundling
- Deployment
- Full-Stack Type Safety
Svelte 5 er ferdig! Nye runer, nettsider, CLI-verktøy
Desperat etter mellomting
Server Functions brukes for eksempel for å spesifisere funksjoner som kun skal kjøre på serveren, og utføre oppgaver som aldri skal eksponeres på klienten.
De kan defineres hvor som helst i applikasjonen, så lenge det er øverst i en fil – ved hjelp av createServerFn():
// getServerTime.ts
import { createServerFn } from '@tanstack/start'
export const getServerTime = createServerFn('GET', async () => {
// Wait for 1 second
await new Promise((resolve) => setTimeout(resolve, 1000))
// Return the current time
return new Date().toISOString()
})– Jeg har desperat lett etter en mellomting. Noe som er pragmatisk, har fleksible abstraksjoner, kraftige "primitives" – og kontroll når jeg trenger det. Derfor har jeg brukt de siste åtte månedene på å bygge TanStack Start, sier Linsley i videoen.
Trenger du bare klient-side-ruting, vil du klare deg med TanStack Router – mens TanStack Start gir deg "fullstack-ruting" og dermed er litt mer beslektet med rammeverk som Next.js.
Next.js 15 er klar: React 19 og mye raskere dev-server
Bygger på det samme som Solid
TanStack Start bruker verktøyet Vinxi for å bundle og deploye applikasjonen. Dette er samme verktøy som også brukes i et annet rammeverk, SolidStart. Derfor er det ifølge Linsley enkelte likheter mellom rammeverkene. Vinxi er for øvrig basert på Nitro, som igjen er basert på Vite.
På nettsidene til TanStack Start står det at rammeverket ikke er beregnet på dem som bare trenger en 100 prosent statisk nettside, eller om du lager en nettside som er nesten utelukkende serverside-rendret og ikke har behov for særlig med interaktivitet på klientsiden.
TanStack Start har heller ikke støtte for React Server Components, men det vil komme.
Vil du imidlertid lage en fullstack React-applikasjon med serverside-rendring og hydrering, streaming, server functions og masse klientside-interaktivitet, da skal TanStack Start være midt i blinken for deg, skal vi tro dokumentasjonen.
En del manuelt oppsett
I skrivende stund ser det ut til at det er en del manuelt oppsett for å få TanStack Start opp å kjøre – men du kan prøve følgende:
- Sette opp TanStack Router med npm install @tanstack/react-router
- Installere avhengigheter for TanStack Start og annet oppsett ut fra oppskriften på denne siden
Dokumentasjonen for TanStack Start er foreløpig litt "halvveis" og bærer etter min mening litt preg av å være "work in progress". Men du finner blant annet noen fungerende eksempelprosjekter du kan bruke som utgangspunkt.
Rammeverket har med seg selskaper som Vercel, Clerk og Sentry på partnersiden. Målet er å ha klar en betaversjon snart.
Tanner Linsley snakket på Netlify Compose-konferansen nylig om TanStack Start – her kan du se han gå gjennom det nye rammeverket: