Tanstack Start – Is it the Next NextJS?

They say that a new JavaScript framework is born every day, and this no longer seems like hyperbole. The relentless output of libraries into the ecosystem has led to some individuals experiencing JavaScript fatigue and imposter syndrome. Or even worse, they develop a lukewarm response or indifference toward the latest exciting libraries that show up. Now, from the makers of TanStack Query and TanStack Router comes their own entry into the world of full-stack JavaScript frameworks: Tanstack Start.

So why am I putting this effort into promoting yet another framework to you? Because in my view, this one holds merit and deserves your attention. Hear me out.

What is TanStack Start?

TanStack Start is built with support for full-document SSR, streaming, server functions, and bundling as first-class features. It incorporates a tool called Vinxi, a meta-framework that allows for the composing of full-stack applications and frameworks on top of Vite and an HTTP server called Nitro. Vinxi provides a unified API for SSR, streaming, and client-side hydration. Tan Stack Start also heavily integrates its sister project, TanStack Router, which provides Type-safe navigation, routing, and much more. All that to say its credentials as a framework-to-watch are bona fide.

Why should I use it?

In a World of React Meta Frameworks works like Remix and NextJS, TanStack Start’s builders seem to know they have their competition cut out for them. TanStack Start has taken some of the best ideas from its competition and aims to take them further, strip away constraints, and introduce more flexibility. After reading the TanStack Start documentation, you’ll recognize quite a few familiar concepts you have likely encountered in other Meta Frameworks.

For example, TanStack Start has server functions just like Remix or NextJS, but theirs are designed to work well for traditional client-side applications as well. If you’ve been lucky enough to use tRPC in something like the T3 stack, you’ll likely recognize TanStack Start’s server function patterns:

Here’s an example in tRPC:

import { publicProcedure, router } from './trpc'
import { z } from 'zod'

export const myRouter = router({
	myProcedure: publicProcudure
		.input(x.string())
		.query(({ input }) => `Hello ${input.name}`)
})

And here’s an example in TanStack Start:

import { createServerFn } from '@tanstack/start'

import { z } from 'zod'

const Person = z.object({
  name: z.string(),
})

export const greet = createServerFn({ method: 'GET' })
  .validator((person: unknown) => {
    return Person.parse(person)
  })
  .handler(async (ctx) => {
    return `Hello, ${ctx.data.name}!`
  })

How is it different?

TanStack Start’s prime advantage lies in addressing what is viewed as NextJS’ primary shortcoming — its black-box nature. Unlike NextJS, none of the file-based routing in TanStack Start is concealed, leading to greater code transparency and more straightforward intentions upon initial perusal. This applies equally to TanStack’s execution of middleware. Although this comes at the expense of more boilerplate code, it’s a trade-off I am willing to make. Personally, the balance tips in favor of more boilerplate and customization flexibility rather than enduring restrictions imposed by the framework.

Is it ready for production use?

Sadly, not as of this writing. TanStack Start is in beta. However, documentation is great and the GitHub repository has plenty of examples.

The emergence of yet another JavaScript framework might seem yet another addition to an already saturated ecosystem. Nevertheless, a case can be made for investing time in learning the basics and possible adoption in a future project. TanStack Start expands on the best elements from its competition, offers an enhanced level of transparency, and champions customization— an approach that some developers (me!) might find alluring.  As with any new tool, it is advisable to explore it, experiment with its capabilities, and weigh its pros and cons against your project’s needs and potential requirements. Keep an eye out for TanStack Start as it approaches its production-ready start.