or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdisomorphic-functions.mdmiddleware.mdrequest-response.mdrpc-system.mdserver-functions.mdserver-utilities.mdssr-components.mdvite-plugin.md
tile.json

tessl/npm-tanstack--react-start

Modern full-stack React framework with SSR, streaming, server functions, and API routes powered by TanStack Router and Vite.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tanstack/react-start@1.132.x

To install, run

npx @tessl/cli install tessl/npm-tanstack--react-start@1.132.0

index.mddocs/

TanStack React Start

TanStack React Start is a modern full-stack React framework that provides server-side rendering (SSR), streaming, server functions, API routes, and integrated bundling capabilities built on top of TanStack Router and Vite. It enables developers to build scalable React applications with advanced features like type-safe server functions, real-time data streaming, and seamless client-server communication through RPC-style APIs.

Package Information

  • Package Name: @tanstack/react-start
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tanstack/react-start

Core Imports

import {
  useServerFn,
  createServerFn,
  createIsomorphicFn,
  createServerOnlyFn,
  createClientOnlyFn,
  createMiddleware,
  createStart,
  hydrate,
  json,
  mergeHeaders
} from "@tanstack/react-start";

For entry points:

// Client-side components
import { StartClient, hydrateStart } from "@tanstack/react-start/client";

// Server-side components
import { StartServer, defaultStreamHandler, defaultRenderHandler } from "@tanstack/react-start/server";

// RPC functionality
import { createClientRpc } from "@tanstack/react-start/client-rpc";
import { createServerRpc } from "@tanstack/react-start/server-rpc";

// Vite plugin
import { tanstackStart } from "@tanstack/react-start/plugin/vite";

Basic Usage

// 1. Server function example
import { createServerFn } from "@tanstack/react-start";

const getUser = createServerFn()
  .handler(async (id: string) => {
    // Server-only code
    return await db.user.findUnique({ where: { id } });
  });

// 2. Client usage of server function
import { useServerFn } from "@tanstack/react-start";

function UserProfile({ userId }: { userId: string }) {
  const getUserFn = useServerFn(getUser);
  const [user, setUser] = useState(null);

  useEffect(() => {
    getUserFn(userId).then(setUser);
  }, [userId]);

  return user ? <div>Hello, {user.name}!</div> : <div>Loading...</div>;
}

// 3. Vite configuration
import { defineConfig } from "vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";

export default defineConfig({
  plugins: [tanstackStart()],
});

Architecture

TanStack React Start is built around several key components:

  • Server Functions: Type-safe functions that run on the server but can be called from the client
  • Isomorphic Functions: Functions with different implementations for client and server environments
  • Middleware System: Composable middleware for server function validation, authentication, and processing
  • SSR Components: StartClient and StartServer for hydration and server-side rendering
  • RPC System: Client-server communication layer with automatic serialization
  • Vite Integration: Seamless development experience with hot module replacement and bundling

Capabilities

Server Functions

Create and manage server-side functions with full type safety and automatic serialization. Perfect for database operations, API calls, and server-side business logic.

function createServerFn<TMethod extends Method>(
  options?: { method?: TMethod }
): ServerFnBuilder<{}, TMethod>;

interface ServerFnBuilder<TRegister, TMethod extends Method> {
  handler<TResponse>(
    handler: (...args: any[]) => Promise<TResponse> | TResponse
  ): ServerFn<TRegister, TMethod, TResponse>;
  middleware<TMiddleware>(
    middleware: TMiddleware
  ): ServerFnBuilder<TRegister & TMiddleware, TMethod>;
  inputValidator<TValidator>(
    validator: TValidator
  ): ServerFnBuilder<TRegister & { validator: TValidator }, TMethod>;
}

function useServerFn<T extends (...args: any[]) => Promise<any>>(
  serverFn: T
): (...args: Parameters<T>) => ReturnType<T>;

Server Functions

Isomorphic Functions

Create functions with different implementations for client and server environments, enabling code that adapts to its execution context.

function createIsomorphicFn(): IsomorphicFnBase;

interface IsomorphicFnBase {
  server<TArgs extends Array<any>, TServer>(
    serverImpl: (...args: TArgs) => TServer
  ): ServerOnlyFn<TArgs, TServer>;
  client<TArgs extends Array<any>, TClient>(
    clientImpl: (...args: TArgs) => TClient
  ): ClientOnlyFn<TArgs, TClient>;
}

function createServerOnlyFn<TArgs extends Array<any>, TServer>(
  serverImpl: (...args: TArgs) => TServer
): ServerOnlyFn<TArgs, TServer>;

function createClientOnlyFn<TArgs extends Array<any>, TClient>(
  clientImpl: (...args: TArgs) => TClient
): ClientOnlyFn<TArgs, TClient>;

Isomorphic Functions

Middleware System

Build composable middleware for server functions to handle validation, authentication, logging, and other cross-cutting concerns.

function createMiddleware<TType extends MiddlewareType>(
  options?: { type?: TType }
): CreateMiddlewareResult<{}, TType>;

interface CreateMiddlewareResult<TRegister, TType> {
  middleware<T>(middleware: T): CreateMiddlewareResult<TRegister & T, TType>;
  inputValidator<T>(validator: T): CreateMiddlewareResult<TRegister & T, TType>;
  client<T>(client: T): CreateMiddlewareResult<TRegister & T, TType>;
  server<T>(server: T): CreateMiddlewareResult<TRegister & T, TType>;
}

Middleware

SSR Components

React components for server-side rendering and client-side hydration with streaming support.

function StartClient(): JSX.Element;
function StartServer<TRouter extends AnyRouter>(props: {
  router: TRouter;
}): JSX.Element;

function createStartHandler(
  streamHandler?: StreamHandler
): RequestHandler<Register>;

function defaultStreamHandler(): StreamHandler;
function defaultRenderHandler(): RenderHandler;

SSR Components

RPC System

Type-safe client-server RPC communication with automatic serialization and request handling.

function createClientRpc(
  functionId: string,
  fetcher: (...args: any[]) => Promise<any>
): ClientRpc;

function createServerRpc(
  functionId: string,
  splitImportFn: (...args: any[]) => any
): ServerRpc;

RPC System

Core Utilities

Core utilities for application initialization, hydration, and response handling.

function createStart<TOptions>(
  options?: TOptions
): StartInstance<TOptions>;

function hydrate<T>(data: T): Promise<T>;

function json<T>(
  data: T,
  options?: { status?: number; headers?: HeadersInit }
): JsonResponse;

function mergeHeaders(...headers: HeadersInit[]): Headers;

Request/Response Utilities

Utilities for accessing request information and handling server-side operations.

function getRequest(): Request;
function getRequestHeaders(): Record<string, string>;
function getRequestHeader(name: string): string | undefined;
function getRequestIP(options?: { ipHeader?: string }): string | undefined;

Request/Response Utilities

Server Handler Creation

Functions for creating request handlers and managing server-side operations.

function createStartHandler(
  options?: { streamHandler?: StreamHandler }
): RequestHandler<Register>;

function handleServerAction<T>(action: T): Promise<T>;

function requestHandler<TRegister>(
  handler: (request: Request) => Response | Promise<Response>
): RequestHandler<TRegister>;

Server Utilities

Vite Integration

Vite plugin for seamless integration with TanStack Start, providing automatic configuration and development tools.

function tanstackStart(
  options?: TanStackStartInputConfig
): Array<PluginOption>;

interface TanStackStartInputConfig {
  framework?: 'react';
  defaultEntryPaths?: {
    client?: string;
    server?: string;
    start?: string;
  };
  // Additional configuration options
}

Vite Plugin

Types

// Core server function types
type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';

interface ServerFn<TRegister, TMethod extends Method, TResponse> {
  (...args: any[]): Promise<TResponse>;
  url: string;
  functionId: string;
}

interface ServerFnBuilder<TRegister, TMethod extends Method> {
  handler<TResponse>(
    handler: (...args: any[]) => Promise<TResponse> | TResponse
  ): ServerFn<TRegister, TMethod, TResponse>;
  middleware<TMiddleware>(
    middleware: TMiddleware
  ): ServerFnBuilder<TRegister & TMiddleware, TMethod>;
  inputValidator<TValidator>(
    validator: TValidator
  ): ServerFnBuilder<TRegister & { validator: TValidator }, TMethod>;
}

// Isomorphic function types
interface IsomorphicFn<TArgs extends Array<any>, TServer, TClient> {
  (...args: TArgs): TServer | TClient;
}

interface ServerOnlyFn<TArgs extends Array<any>, TServer>
  extends IsomorphicFn<TArgs, TServer> {
  client<TClient>(
    clientImpl: (...args: TArgs) => TClient
  ): IsomorphicFn<TArgs, TServer, TClient>;
}

interface ClientOnlyFn<TArgs extends Array<any>, TClient>
  extends IsomorphicFn<TArgs, undefined, TClient> {
  server<TServer>(
    serverImpl: (...args: TArgs) => TServer
  ): IsomorphicFn<TArgs, TServer, TClient>;
}

interface IsomorphicFnBase {
  server<TArgs extends Array<any>, TServer>(
    serverImpl: (...args: TArgs) => TServer
  ): ServerOnlyFn<TArgs, TServer>;
  client<TArgs extends Array<any>, TClient>(
    clientImpl: (...args: TArgs) => TClient
  ): ClientOnlyFn<TArgs, TClient>;
}

// Middleware types
interface FunctionMiddleware<TRegister = {}, TMethod extends Method = Method> {
  // Middleware implementation details
}

interface RequestMiddleware {
  // Request middleware implementation
}

type AnyFunctionMiddleware = FunctionMiddleware<any, any>;
type AnyRequestMiddleware = RequestMiddleware;

// Session management types
interface SessionManager<T> {
  get(): Promise<T | undefined>;
  update(updater: (current: T | undefined) => T): Promise<void>;
  clear(): Promise<void>;
}

interface SessionOptions {
  cookie?: {
    domain?: string;
    httpOnly?: boolean;
    maxAge?: number;
    path?: string;
    sameSite?: 'strict' | 'lax' | 'none';
    secure?: boolean;
  };
}

// Cookie management types
interface CookieOptions {
  domain?: string;
  expires?: Date;
  httpOnly?: boolean;
  maxAge?: number;
  path?: string;
  sameSite?: 'strict' | 'lax' | 'none';
  secure?: boolean;
}

// Request/Response types
interface RequestHandler<T> {
  (request: Request): Promise<Response>;
}

interface RequestOptions {
  onError?: (error: Error) => Response | Promise<Response>;
  onRequest?: (request: Request) => Request | Promise<Request>;
  onResponse?: (response: Response) => Response | Promise<Response>;
}

// Router types
interface AnyRouter {
  // Router implementation details from TanStack Router
}

// Response types
interface JsonResponse {
  json(): any;
  status: number;
  headers: Headers;
}

interface DehydratedRouter {
  // Dehydrated router state
}

// Start instance types
interface StartInstance<TSerializationAdapters = any, TDefaultSsr = any, TRequestMiddlewares = any, TFunctionMiddlewares = any> {
  getOptions(): StartInstanceOptions<TSerializationAdapters, TDefaultSsr, TRequestMiddlewares, TFunctionMiddlewares>;
}

interface StartInstanceOptions<TSerializationAdapters, TDefaultSsr, TRequestMiddlewares, TFunctionMiddlewares> {
  // Start instance configuration options
}

type AnyStartInstance = StartInstance<any, any, any, any>;
type AnyStartInstanceOptions = StartInstanceOptions<any, any, any, any>;

// RPC types
interface ClientRpc {
  // Client RPC implementation
}

interface ServerRpc {
  // Server RPC implementation
}

// Vite plugin types
interface TanStackStartInputConfig {
  framework?: 'react';
  defaultEntryPaths?: {
    client?: string;
    server?: string;
    start?: string;
  };
  [key: string]: any;
}

interface PluginOption {
  name: string;
  configResolved?: (config: any) => void;
  configureServer?: (server: any) => void;
  buildStart?: (options: any) => void;
  transform?: (code: string, id: string) => any;
}

// Registration interface for type augmentation
interface Register {
  // Extend this interface to register custom types
}