Learn TanStack Start in 7 Minutes

10Stack Start: A Deep Dive

Key Concepts:

• Full-stack React framework
• Server-side rendering (SSR)
• Streaming
• Server functions
• Type safety
• 10Stack Router
• React Query
• File-based routing
• Loaders
• createFileRoute function
• createServerFunction function

What is 10Stack Start?

10Stack Start is a full-stack React framework built on top of the 10Stack Router. It aims to provide a unified and type-safe development experience by integrating server-side rendering, streaming, and server functions. The framework handles everything from rendering pages on the server and efficiently streaming them to users, to making API calls and data fetching type-safe from end to end.

Setting Up a 10Stack Start Project

To initiate a 10Stack Start project, you can use one of their initial setups. The example provided uses the setup that includes React Query by default. This is achieved by running a specific command (displayed on the screen in the video) which generates the boilerplate project on your computer.

Project Structure

The generated project structure includes:

• app folder: Contains essential files like client.tsx (for client-side hydration), router.tsx (for configuring routes), and ssr.tsx (for server-side rendering).
• routes folder: Holds the application's page components. Creating a new file in this folder automatically generates a new route with boilerplate code. For example, index.tsx would be the main route.

This separation of concerns promotes a robust and type-safe full-stack architecture.

File-Based Routing with createFileRoute

10Stack Start uses a file-based routing system. Routes are created using the createFileRoute function. This function defines routes based on URL patterns.

Example:

users/userId

In this example, users/userId is the path, where userId is a dynamic parameter. The configuration allows specifying custom components for:

• Error handling (e.g., userError component)
• Main view (e.g., user component)
• Fallback when the user isn't found

This makes the routing process type-safe and customizable.

Loaders: Data Fetching Before Rendering

Loaders are functions attached to routes that fetch the necessary data before the page renders. They run both on the server and the client, ensuring that components have the required data immediately, providing a smooth server-side rendering experience. Loaders integrate seamlessly with caching solutions like React Query, making data fetching efficient and type-safe.

Example:

A route defined for users/userId uses a loader to call the getUserById server function (which might use Prisma to fetch data from a database). The route specifies custom components for error handling and "not found" scenarios. Inside the user page component, the initial data provided by the loader is retrieved and used with React Query's useQuery hook to manage and cache the user data, allowing for efficient data refreshing with the refetch function.

Server Functions: Secure Server-Side Logic

Server functions in 10Stack Start allow defining logic that runs exclusively on the server. They can be invoked from loaders, hooks, components, and even other server functions. They are similar to API routes but without a stable public URL. Server functions enable secure access to sensitive data, database queries, sending emails, or interacting with services that should not be exposed to the client.

Server functions are defined using the createServerFunction method. Input validation can be attached using a validator function, ensuring type safety and proper error handling. Even when called from client code, the logic executes on the server, with client calls being replaced by fetch requests under the hood.

Router Configuration (router.tsx)

The router.tsx file sets up the central router for the application. It creates a new React Query client and integrates it with the 10Stack Router. It imports the generated route tree to configure the routes (generated automatically when files are added to the routes folder). The query client is passed via context, and default components for errors and "not found" scenarios are specified (which can be overridden for specific routes).

Important Note: The presenter emphasizes that 10Stack Start is still experimental, and the code, especially in the router.tsx file, might change in the future.

Type Safety: The Core Benefit

The presenter highlights type safety as the main benefit of 10Stack Start and the entire 10Stack ecosystem.

10Stack Start vs. Next.js

10Stack Start offers a unified, type-safe full-stack framework that integrates server-side rendering, streaming, and server functions, presenting itself as an alternative to Next.js.

Conclusion

While 10Stack Start shows promise as a Next.js alternative, it's still experimental and has a smaller community. Its future evolution and scalability in production environments remain to be seen. Other alternatives, like React Router v7, might also be considered. The presenter encourages viewers to like, subscribe, share their thoughts in the comments, and sign up for his newsletter for announcements and discounts on his React.js course.