skills.rest
janpeterd
janpeterdCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-start

Generate full-stack React apps with TanStack Router SSR and streaming.

Updated Jul 2, 2025
Search Tags:#server functions#tanstack start#rpc#ssr streaming#full-stack react#nitro deployment#router middleware
One-click install
npx skills add https://github.com/janpeterd/dotfiles --skill tanstack-start-janpeterd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-start
Source: https://github.com/janpeterd/dotfiles/tree/main/dot_agents/skills/tanstack-start
Command: npx skills add https://github.com/janpeterd/dotfiles --skill tanstack-start-janpeterd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Start helps you avoid stitching together separate React, routing, SSR, and server API/RPC solutions by providing a single full-stack framework with a consistent architecture.

Core Features & Use Cases

  • Full-stack routing with SSR and streaming: Define routes and render on the server with streaming for better performance and responsiveness.
  • Type-safe server functions (RPC): Create client-to-server functions with strong typing and optional validation for safe data access and mutations.
  • Middleware and API route support: Implement cross-cutting concerns like auth/logging and expose REST-style endpoints when needed, with deployable Nitro presets.

Use case: Build an app that lists posts, fetches data via server functions, enforces auth through middleware, and streams deferred data on the dashboard so users see the critical UI immediately.

Quick Start

Ask me to scaffold a new TanStack Start application, configure SSR streaming, and create an authenticated server function that fetches and returns user data.

Frequently Asked Questions about tanstack-start

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a full-stack React application with type-safe RPC server functions?▼

To build a full-stack React application with type-safe RPC server functions, you define createServerFn handlers with optional validation. This establishes secure client-to-server data access and mutations across your application.

What is SSR streaming and how does it improve React dashboard performance?▼

SSR streaming renders your React application on the server and sends data progressively. This allows users to see critical UI immediately while deferred data loads, improving perceived dashboard performance and responsiveness.

How do I add authentication and logging middleware to TanStack Router route loaders?▼

You add authentication and logging to route loaders by implementing middleware within your full-stack React setup. This enforces cross-cutting concerns and validates typed request boundaries before reaching your server functions.

Can I use Nitro presets to deploy a full-stack React app with custom API routes?▼

Yes, you can use Nitro presets to deploy a full-stack React app. The framework supports exposing REST-style API endpoints and configuring deployment targets through server preset configurations.

Do I need a separate backend framework to create API routes and server functions in React?▼

No, you do not need a separate backend framework. TanStack Start provides a single full-stack architecture with type-safe server functions and API route support, eliminating the need to stitch together separate routing and RPC solutions.

Related Skills

Explore More Software Engineering Skills→
locnbk2002locnbk2002
1

tanstack

Develop full-stack React apps with TanStack Start, Form, and AI.

Community
Intermediate
iEnergyyiEnergyy

tanstack-start

Automate full-stack React app setup with TanStack Start for SSR and deployment.

Community
Advanced
KaakatiKaakati
2

reactjs-dev

Develops ReactJS (Vite) SPAs integrating React Router, Zustand, Tailwind CSS, Framer Motion, and ApexCharts with Rails API backend data management.

Community
Advanced
lv7devlv7dev

web-frameworks

Combine Next.js, Turborepo, and RemixIcon for scalable full-stack web apps.

Community
Advanced