TanStack Start Full Course 2025 | Become a TanStack Start Pro in 1 Hour

Key Concepts

• Tenstack Start: A full-stack framework built on React, Vite, and Tenstack Router.
• Tenstack Router: A type-safe routing library that supports both file-based and code-based routing.
• File-Based Routing: Defining routes based on the file structure within the routes directory.
• routeTree.gen.ts: An auto-generated file that provides type safety for all routes in the application.
• Root Document: The root layout component (root.tsx) that wraps all routes and provides a consistent UI.
• Index Route: The main or home route of the application, represented by index.tsx.
• Dynamic Routes: Routes that include parameters in the URL, denoted by a $ symbol in the filename (e.g., user.$id.tsx).
• useParams Hook: A hook from Tenstack Router used to access the parameters of a dynamic route.
• Not Found Component: A component rendered when a route is not found, customizable at both the root and individual route levels.
• Route Loader: A function that runs when a route is loaded, used for fetching data, authentication checks, and redirecting to the "not found" state.
• useLoaderData Hook: A hook from Tenstack Router used to access the data returned by a route loader.
• Pending Component: A component rendered while data is being fetched in a route loader.
• Error Component: A component rendered when an error occurs in a route loader.
• Server Functions: Functions that run exclusively on the server, enabling access to backend resources like databases.
• createServerFunction: A function from Tenstack Start used to define server functions, including specifying the HTTP method (GET, POST, etc.) and a validator.
• Validator: A function used to validate the input data of a server function, often using libraries like Zod or Yup.
• Static Server Functions: Server functions that are evaluated once at build time, with their results cached as JSON files.
• Middleware: Functions that wrap server functions, allowing for pre- or post-processing logic, such as authentication checks.
• createMiddleware: A function from Tenstack Start used to define middleware functions.
• Tenstack Query: A data fetching and caching library for React.
• Server Routes: API endpoints defined within the api directory, using createFileRoute and specifying HTTP methods.

Tenstack Start Fundamentals

Project Setup

• Tenstack Start projects can be initialized using the create-ts-router-app command.
• This command allows you to select various options, including the router type (file-based or code-based), CSS framework (Tailwind CSS), and add-ons (Tenstack Query, Clerk, Convex, etc.).
• The project structure includes a src directory containing router.tsx, routes, and components folders.

Routing with Tenstack Router

• File-Based Routing: Routes are defined by creating files within the routes directory.
• The root.tsx file defines the root layout, including the header and any elements that should be present on all pages.
• The index.tsx file represents the home route.
• Dynamic Routes: To create a dynamic route, include a $ symbol followed by the parameter name in the filename (e.g., user.$id.tsx).
• The useParams hook is used to access the values of the route parameters.
• Type Safety: Tenstack Router is type-safe, meaning that the existence and configuration of routes are validated at compile time.
• The routeTree.gen.ts file is automatically generated and updated whenever routes are added, removed, or modified.

Handling Not Found Pages

• A "not found" component can be defined at the root level in root.tsx to handle cases where a route does not exist.
• A "not found" component can also be defined at the individual route level to handle cases where a specific resource is not found (e.g., a user with a given ID).
• The notfound function can be called within a route loader to trigger the rendering of the "not found" component.

Route Loaders

• A route loader is a function that runs when a route is loaded.
• It is used for fetching data, performing authentication checks, and redirecting to the "not found" state.
• The loader function receives an object containing helpful entities, such as the route parameters.
• The useLoaderData hook is used to access the data returned by the route loader.
• Example: Fetching user data based on the id parameter and handling cases where the user is not found.

Handling Errors and Pending States

• An error component can be defined at the route level to handle errors that occur during data fetching.
• The error component receives the error object as a prop and can display an appropriate error message.
• A pending component can be defined at the route level to display a loading indicator while data is being fetched.

Server Functions

• Server functions are functions that run exclusively on the server.
• They are used for accessing backend resources, such as databases.
• Server functions are defined using the createServerFunction function.
• The createServerFunction function allows you to specify the HTTP method (GET, POST, etc.) and a validator.
• Example: Creating a server function to add a new to-do item to a list.

Validators

• Validators are used to validate the input data of a server function.
• They can be implemented using libraries like Zod or Yup.
• Validators are defined as part of the createServerFunction function.
• Example: Validating that the to-do item is a string with a certain number of characters.

Static Server Functions

• Static server functions are server functions that are evaluated once at build time.
• Their results are cached as JSON files and served directly to the client.
• Static server functions are useful for data that does not change frequently.
• To create a static server function, set the type option to static in the createServerFunction function.

Middleware

• Middleware functions wrap server functions, allowing for pre- or post-processing logic.
• They are used for tasks such as authentication checks and logging.
• Middleware functions are defined using the createMiddleware function.
• Example: Creating a middleware function to check if a user is authenticated before they can add a to-do item.

Tenstack Query Integration

• Tenstack Query is a data fetching and caching library for React.
• It can be integrated into Tenstack Start projects to simplify data fetching and management.
• The useQuery hook is used to fetch data and cache it.
• The useMutation hook is used to mutate data on the server.
• Server Routes: API endpoints are defined within the api directory, using createFileRoute and specifying HTTP methods.
• Example: Fetching a list of to-do items from an API endpoint using the useQuery hook.

Combining Loaders and Tenstack Query

• Loaders are suitable for SEO-sensitive data that doesn't change often, while Tenstack Query is better for dynamic data.
• A common pattern is to use both loaders and Tenstack Query in the same route, using the loader for initial data fetching and Tenstack Query for subsequent updates.

Conclusion

Tenstack Start provides a powerful and type-safe framework for building full-stack React applications. By leveraging Tenstack Router, server functions, middleware, and Tenstack Query, developers can create scalable and maintainable applications with ease. The framework's flexibility allows for a combination of server-side rendering and client-side data fetching, enabling developers to optimize their applications for both performance and SEO. The key takeaway is to understand the strengths of each component and use them appropriately to build efficient and well-organized applications.