tanstack-start

Configure SPA or SSR deployment strategies for TanStack Start in React projects.

Updated Apr 5, 2023
One-click install
npx skills add https://github.com/fcalell/dotfiles --skill tanstack-start-fcalell
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-start
Source: https://github.com/fcalell/dotfiles/tree/main/dot_claude/skills/tanstack-start
Command: npx skills add https://github.com/fcalell/dotfiles --skill tanstack-start-fcalell

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Start provides a configurable meta-framework to set up and switch between SPA and SSR deployment modes for React projects, helping teams align build, routing, and deployment strategies in one place.

Core Features & Use Cases

  • SPA Mode: Client-side rendering with straightforward routing, static hosting compatibility, and rapid iteration.
  • SSR Mode: Server-rendered rendering with server functions, edge deployment options, and improved SEO and initial load performance.
  • React Compiler Integration: Optional integration for improved performance and reduced re-renders.

Quick Start

Initialize a project with TanStack Start, selecting SPA or SSR mode according to your deployment needs.

Frequently Asked Questions about tanstack-start

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

FAQPage Schema
How do I configure TanStack Start for SPA or SSR deployment?

Configure TanStack Start by selecting SPA or SSR mode during project initialization to align build, routing, and deployment strategies. This handles route context, environment variables, and build output for your React application.

Does TanStack Start support deployment on Vercel and Cloudflare Pages?

Yes, TanStack Start supports deployment targets including Vercel, Cloudflare Pages, and Node adapters. The configuration handles build output and environment variables required for these specific hosting platforms.

When should I use SPA mode instead of SSR in a React meta-framework?

Use SPA mode for client-side rendering, straightforward routing, and static hosting compatibility. Choose SSR mode when you need server functions, edge deployment options, and improved SEO and initial load performance.

How do I integrate the React compiler for performance in TanStack Start?

TanStack Start provides optional React compiler integration to improve performance and reduce re-renders. Enable this configuration during project setup to optimize your full-stack React application rendering.

What's the best way to handle environment variables in a TanStack Start SSR app?

TanStack Start configuration satisfies functional requirements for environment variables and route context. This ensures secure variable handling across server functions and your chosen Node or edge deployment adapters.