iTranslated by AI
An Early Look at TanStack Start
While reading the TanStack repository, I noticed that the first version of the TanStack Start documentation has been pushed, so I'm checking it out.
What is TanStack Start
TanStack Start is something categorized as a meta-framework or full-stack framework based on TanStack Router.
It allows you to build server-rendered React applications and is built on top of TanStack Router, Nitro (for server), and Vite (for development).
Like Solid Start, it is developed using Vinxi as a foundation.
The need for it arises when an application using a client-side Router reaches a point where Server-Side Rendering (SSR) is also required.
Sample applications can be found in the Router and Form repositories. You can check how they work in the browser below:
However, the samples in the Form repository are easier to understand in terms of how to use each API. They can be found here:
For Router users, it's not hard to imagine; it just adds one entry point file for the server to the build (refer to the previously mentioned documentation on how to get started).
Currently, it is also being used on tanstack.com and is being dogfooded. Its deployment target is Vercel (so it likely runs in a Node.js environment).
The implementation currently exists within the Router repository and can be found under packages/start/.
About Vinxi
Vinxi is a "meta-router" or "router manager" that allows you to bring server and client routers together in a centralized configuration.
It is built on top of Vite (dev server and bundler) and Nitro (HTTP server) and was created by Nikhil Saraf, a SolidStart committer.
I interpreted this as a tool based on craftsmanship, where you can create your own web framework using your favorite parts.
In TanStack Start, it can be used instead of Vite; as shown in the previous sample, you prepare an app.config.ts file and start the server with vinxi start.
About Server Functions
You can define Server Functions by passing logic to a function called createServerFn.
They are equivalent to Actions/Server Actions in Remix and Next.js and are always executed on the server.
Internally, a Vite Plugin transpiles code marked with this annotation using Babel.
In the TanStack Form sample, the form submission destination is set to this wrapped code instead of an API. It is possible to provide .url as a string to the action attribute of a native HTML form.
Hydration
A component called <StartClient> is used for this.
There is a magical mechanism where route definitions pre-generated via createStartHandler at the server-side entry point are served through SSR, and the client side loads the same definitions to perform hydrateRoot().
Loader
By using Route.useLoaderData(), data loading can be resolved on both the client and server (equivalent to Remix's loader).
You configure the Route with the fetch query defined using the previously mentioned createServerFn.
Discussion