TanStack Start

TanStack Start — co to jest i jak różni się od Next.js?

TanStack Start: full-stack React framework. Tanner Linsley (TanStack). Oparty na: TanStack Router (type-safe routing). Vinxi (bundler — Nitro + Vite). React. Server Functions (jak Server Actions). Beta (2024). Filozofia: full-stack-first. Type-safe end-to-end. File-based routing. Isomorphic functions. Funkcje: SSR (Server Side Rendering). SSG (Static Site Generation). Streaming. Islands. Client-side navigation. TanStack Router integracja: type-safe params. Nested layouts. Pending states. Search params validation. Tworzone projekty: npx create-tsrouter-app@latest. Lub create-start-app. Vinxi: meta-framework dla JS frameworks. Nitro pod spodem. Różne rendery: client, server, edge. Modularne. Podobny do Astro pod spodem. Porównanie Next.js vs TanStack Start: Next.js — dojrzały, wielki ekosystem. TanStack Start — nowszy, lepsze typing. Next.js — App Router (RSC). TanStack Start — Server Functions. Next.js — Vercel-optimized. TanStack Start — deployment agnostic. Next.js — file-based routing (konwencjonalny). TanStack Start — TanStack Router (type-safe). Kiedy TanStack Start: nowe projekty chcące type-safe. Istniejące TanStack Router SPA -> full-stack. Nie na Vercel lock-in. Małe/średnie projekty.

TanStack Router — type-safe routing i file-based routes?

TanStack Router: type-safe router dla React. Lepszy niż React Router v6 pod kątem TypeScript. Dwa tryby: Code-based (ręczne tworzenie routes). File-based (automatyczne z plików). File-based routing: src/routes/ folder. __root.tsx — root layout. index.tsx — strona główna. about.tsx — /about. blog/ — folder = segment. blog/index.tsx — /blog. blog/$postId.tsx — /blog/:postId. Typy automatyczne. Params typowane: const {postId} = Route.useParams() — postId: string. Bez rzutowania. Compile-time check. Search params: const {page, filter} = Route.useSearch(). validateSearch: z.object({page: z.number().default(1)}). Type-safe query strings. Loader (data fetching): export const Route = createFileRoute('/blog/$postId')({loader: ({params}) => getPost(params.postId), component: BlogPost}). Dane w komponencie: const {post} = Route.useLoaderData(). Pending component: pendingComponent: () => div Loading.../div. Stale-while-revalidate. Error boundary: errorComponent. Retry. Nested layouts: routes/__root.tsx — wszystkie strony. routes/_auth.tsx — layout z auth. routes/_auth/profile.tsx — chroniony. Path-less layouts: _layout.tsx. Link: import {Link} from '@tanstack/react-router'. Link to='/blog/$postId' params={{postId: post.id}}. Type-safe params. useNavigate: navigate({to: '/blog', search: {page: 2}}). Devtools: @tanstack/router-devtools.

TanStack Start Server Functions — pełny stack w TypeScript?

Server Functions: isomorphic functions. Działają na serwerze. Wywoływane z klienta. Jak Server Actions Next.js ale nieco inne. createServerFn: import {createServerFn} from '@tanstack/start'. const getUser = createServerFn({method: 'GET'}).handler(async ({data: userId}) => { return await db.user.findUnique({where: {id: userId}}) }). Wywołanie z klienta: const user = await getUser({data: userId}). Lub: const user = useServerFn(getUser). RPC-like call. Walidacja input: .validator(z.object({id: z.string()})). Zod schema. Type-safe. POST Server Function (mutacja): const createPost = createServerFn({method: 'POST'}).validator(z.object({title: z.string(), content: z.string()})).handler(async ({data}) => { return await db.post.create({data}) }). Loader z Server Function: export const Route = createFileRoute('/posts')({loader: () => getPosts()}). Automatyczne fetch. Dehydrate/Hydrate: dane z SSR do klienta. React Query integration: @tanstack/query-start. queryOptions z Router loader. useQuery na kliencie z pre-fetched data. Auth w Server Functions: getWebRequest() — dostęp do request. Session z cookies. Middleware: createMiddleware(). Globally apply. Request transformations. Auth guard. Error handling: throw ServerFnError. Lub return error w data. try/catch. Deployment: Node.js serwer. Vercel (Nitro adapter). Netlify. Cloudflare Workers. Bun adapter.

TanStack Query + Router + Start — full-stack data pattern?

Integration stack: TanStack Router + TanStack Query + TanStack Start. Potężne połączenie. Wszystko type-safe. SSR: Router loader -> TanStack Query. Dehydrate na serwerze. Hydrate na kliencie. queryOptions helper: import {queryOptions} from '@tanstack/react-query'. const postQueryOptions = (postId: string) => queryOptions({queryKey: ['post', postId], queryFn: () => getPost({data: postId})}). Router loader: export const Route = createFileRoute('/blog/$postId')({loader: ({params, context: {queryClient}}) => queryClient.ensureQueryData(postQueryOptions(params.postId)), component: BlogPost}). Komponent: function BlogPost() { const {postId} = Route.useParams(). const {data: post} = useSuspenseQuery(postQueryOptions(postId)). return div {post.title} /div }. Prefetching: intent on hover. Link intent='hover'. Automatyczny prefetch. Instant navigation. Mutations: const createPostMutation = useMutation({mutationFn: (data) => createPost({data}), onSuccess: () => queryClient.invalidateQueries({queryKey: ['posts']})}). Optimistic updates: onMutate + rollback. Suspense boundaries: Suspense fallback={PostSkeleton}. Concurrent features React 19. Router-level Suspense. Error boundaries: Route errorComponent. TanStack Query onError. Context: RouterContext z queryClient. defineRouterContext. Dostępny w wszystkich loaders. Streaming: defer() w loader. Await na komponentach. Progressive rendering.

TanStack Start vs Remix vs Next.js — kiedy wybrać?

Porównanie 2024: Next.js 15: Dojrzały (2016+). Największy ekosystem. Vercel-optimized. App Router (RSC + Server Actions). PPR. shadcn/ui. Kiedy: duże projekty, enterprise, e-commerce, Vercel. Remix v2 (React Router v7): server-first. Nested loaders/actions. Progressive enhancement. Kiedy: forme-heavy apps, SEO-critical, multi-tenancy. TanStack Start (beta): najnowszy. Type-safe end-to-end. TanStack Router. Deployment agnostic. Kiedy: nowe projekty, type-safety priority, nie Vercel. Astro 4: content sites. Islands architecture. Multi-framework. Kiedy: blog, docs, marketing, content. SvelteKit: Svelte ecosystem. Efektywny. Kiedy: nie React, mniejszy team, nowe projekty. Analog (Angular): Angular + SSR. Analogowy do Next.js dla Angular. Waku: minimalistyczny React RSC. Eksperymentalny. Wspólne decyzje: Zależy od: team size, istniejący stack, hosting, ecosystem needs. Migracja: SPA React -> TanStack Start (TanStack Router adopcja). Create-React-App -> Vite -> TanStack Start. React Router -> TanStack Router -> TanStack Start. Dojrzałość TanStack Stack: Router — stable. Query — stable. Form — beta. Start — beta. Table — stable. Virtual — stable. TanStack trend: szybko rośnie. Community wsparcie. Dobra dokumentacja. Płatne wsparcie: TanStack GitHub Sponsors. Open collective.

Wyślij zapytanie