Loading video player...
Next.js has dominated React for years,
but for the first time, the crown is
actually slipping. There is a new
framework in town, and it's doing things
NextJS simply can't. And we've all felt
the app router fatigue, right? The
complex caching, the React server
component saga, and Tanstack start
promises to fix all of this by bringing
back a simpler, more predictable way to
build. But is it a NextJS killer or is
it just hype? Today we are putting them
head-to-head across five different
pillars. Routing, NexJS filebased
conventions versus Stanstack's 100%
type- safe navigation. Data fetching. Is
this the end of use cache and the
beginning of a cleaner way to sync data?
The philosophy server first approach of
Nex.js versus the client power approach
of panstack start. The backend, how
server functions and API routes actually
behave when you're building complex
logic. And last but the most important,
the job market. Should you stick with
the industry standard for your resume or
is it time to bet on the next shift? By
the end of this, you will know exactly
which framework to bet your career on
for 2026. So let's see if the future of
React is actually a tan stack. So let's
start with the philosophy. Let's talk
about Nex.js first. Nex.js is designed
around convention over configuration.
Its goal is to give you all the bells
and whistles needed to spin up your app
as fast as possible. It gives you a
unified full stack React experience,
strong defaults, a complete ecosystem
from routing, data fetching, rendering,
deployment, and so on, and a predictable
mental model that scales for teams of
all sizes. But here's the thing. Here's
a big difference. Nexjs makes these
opinions for you so you can move fast.
For example, it has file-based routing
system. It has different rendering
models, a caching system that's tied to
the fetch function in browser, but also
the latest cache components feature that
allows you to cache things using partial
pre- rendering. You get middleware at
the edge and this all the deployment is
seamless with Versel but also has now
options to deploy to different cloud
providers as well. But the core belief
of Nex.js is that if we make 100% of the
decisions for you, you're going to ship
faster and avoid the foot guns. This is
why Nex.js feels like a framework
product rather than a router plus
library. It wants to be the default way
you build full stacked React
applications. What about Tanstack start?
Panstax start is built on a completely
different set of values. There is no
magic. Everything is explicit over
implicit. Everything is TypeScript fully
typed composition instead of
conventions. It doesn't want to be an
all-in-one framework. It wants to be a
foundation that you build your app on
top of. You build your framework on top
of. So what are some key beliefs?
Anstack ecosystem start is in fact built
on top of a tanstack router. Tanstack
router would probably make up to 80 to
90% of what panstack start can do. Key
philosophy of panstack start routing is
that routing should be explicit. Routes
as objects. In fact, even you handle not
just routing but the way you handle data
should also be explicit. For example,
its loaders that we'll talk about.
Client side and server side state should
be managed consistently with access to
the Tanstack ecosystem. For example,
Tanstack query. You could have a
powerful syn synchronous state
management library that syncs with your
service state automatically just by
changing a couple lines. But here's the
thing, the developer has full power.
There is no magic involved because
everything is explicit. There's no
automatic React server components
behavior. In fact, so far there are no
React server components to begin with.
Although there are some plans to support
that in the future, there is no magic
fetch caching and there are no hidden
boundaries. So the core belief of the
framework is that you give developers
full control and best primitives and let
them build the architecture that they
want. This is why Ansac leans heavily on
React Router, React Query and it tries
to solve one problem extremely well.
Each of these libraries solve the
routing problem really well, the caching
and state management problem really
well, but also forms allow you to build
complex forms. There's tanstack db and
there's so much more in the tanstack
ecosystem. So it feels like a framework
who dislikes magic and wants predictable
behavior. And that's how I would sort of
summarize tanstack. text that is a
powerful framework that is built on top
of vit and vit is essentially the build
tooling that allows you to power a
really fast server lightning fast hmr
that is hot module replacement and it
gives you out of the box features
support for typescript jsx and optimized
build thanks to rolum pick the plugins
you want on how you want to power your
framework also has another plugin called
as nitro if you want to ship full stack
lead apps so you would be able to add
server routes to your application and
deploy to many hosting platforms without
any config experience at all. All you
need to do is add nitro as a plug-in.
Tanstack start as well as NexJS both use
filebased routing system and tan sex
router is fully typed. For example, this
is an application that we in fact build
in the tanstack start course on this
YouTube channel. So definitely take a
look at it if you're interested. And for
example, if we go to the header
component and now this is where we're
linking to home. Now if I do slash,
you're going to see all the different
routes that are available inside the
application. If I enter a route that
does not exist, then it's going to throw
an error. It truly believes in
Typescript and the routes are fully
typed. It also creates a route tree.
Gen. TS that allows it to manage what
routes exist and so on. This file is
automatically generated by the tanstack
router. Again, the pansstack router is
super powerful. On the other hand, I
also have a course on nex.js that is
completely free on this channel as well.
So definitely take a look. And this is
the app we built as part of that. So for
example, if we do the same here, go to
the hero section and inside the link
component, if we type, there is no
automatic typing inside of next.js. In
fact, we need to go to the next config
file and add type routes equals true.
And that is when Nexjs can statically
pipe links to prevent typos and other
errors. But again, this is an opt-in
feature. It's not a default. So a lot of
folks might not even know. Versus
standstack start, it's already built in.
It's ready to go. So if you make a
mistake, your application just won't
work. The next uses the Firebase routing
system. What this means is you would
need to create files and folders in
order to route to it and you need to
follow the specific naming convention.
What this means is if if I want to just
create a /admin route, then I could just
create a page.x inside that. On the
other hand, if I want to create a
dynamic route, then I would need to
create products with a slug and then I
could route to it and that becomes a
dynamic slug route. So I can do /
products/ the dynamic ID itself. On the
other hand, next also has something
called as a layout file. This is the
root layout that wraps your entire
application. So you would want to add
things like header or footer components.
At the same time it has the HTML and
body elements as well. You can also set
the metadata inside of Nex.js by
exporting a constant called as metadata
and this lives inside of layout.tsx as
well. Similarly, if you want to create
dynamic metadata, then you would just
need to in call the generate metadata
function and give it the information it
needs to dynamically generate the title
or maybe the description and so on. So
that's how you create routes inside of
next year. On the other hand, the way
you would create routes inside of
panstack is also very similar as in you
would have to create a file and folders
in order to structure your routes and so
on. So the way you would do that is by
going to the routes folder inside your
source directory. And here you would
create a index.tsx route. But that's not
all. You would also need to export a
route with create file route. For
example, if I want to create a
completely new route, let's call that
route admin. Then I just need to create
a new file in here called as index.tsx.
And as you saw, the minute I created a
new file, it automatically created this
boilerplate code for me to create a file
route. create a component here expose
that specific component. If I want to
create a dynamic route inside of
panstack then again I need to do
something similar instead of creating a
folder I would now create admin ids
and this would mean I would navigate to
/admin/admin/
dollar id. However, if I don't want
that, I just want to navigate to ID,
then it would just be ID itself. I don't
need to then duplicate the the word
admin. Again, this creates a dynamic
route inside of panstack start. Now,
similarly, just like we have layouts
inside of NexJS, the layout file inside
of pansstack start would be this
specific file
root.sx as the HTML and body elements.
The way you would set the metadata
inside of tans textard is slightly
different. What you would do is you
would essentially have this head tag
with a metadata array. And here is where
you would pass all the information with
links with metadata and so on. Again,
it's very similar. Instead of exporting
a constant, you would just expose an
array here and then set any sort of
metadata information you like. But if
you want to add header and footer, you
this is a perfect spot for it as well,
just like you would add in layout. you
want to create dynamic metadata then you
would we can just take a look at the
dynamic ID inside of create file route
you would have a head tag that will then
return the metadata element an object an
array with different objects such as
name image and so on what title
description and so on this way this
automatically exposes and this is where
you would fetch the data and then export
it for example again we'll talk about
loaders in a second but this is
essentially you would return it versus
in nextJS you would just use generate
metadata function to expose the SEO data
for that specific route. So if you
notice the difference in tansac start
it's more explicit more object based
routing routes are defined as typescript
objects as you can see here and if I
were to navigate to the wrong route it's
this route exists but if I were to do
something like this it gives me this
squiggly line that automatically tells
me that this specific route does not
exist the minute I save it automatically
fixed it as well which is awesome. you
inside that you create a metadata array
and so on and that just makes it super
explicit exactly what you are updating
in your browser versus NexJS is going to
do that for you with the generate
metadata function. So you would get the
params then you would get the data and
then you would set it whatever you like.
So if you want to update a description
then you would just update your
description and so on. Again it's more
explicit inside of panstart. So far we
have gone over the philosophy the
routing and now let's talk about data
fetching. Now when it comes to data
fetching instead of tanstack start there
are a few different ways you could fetch
data. First of all tanstack start uses a
concept called as isomeorphic loaders.
It is extremely important for you to
understand. Let's take a look what that
means. It means that those loaders are
going to run both on the server as well
as on the client not just on the server.
And this is something that might trip
you up if you're completely new to
panstack start. And I covered this in
depth in a panstack start course. So
definitely take a look on this YouTube
channel. Now what this means is every
single file route has a specific
function called as loader that allows
you to load that data. So if if that
route needs some data, it's going to
load it. And the specific function you
can load whatever you want. But remember
this loader is going to run on the
server using during serverside rendering
but also on client during navigation. So
make sure whatever you run here runs
both on the server as well as on the
client. Might not work. If you try to
use client specific APIs on the server,
it might throw an error and so on. So
this is extremely important. So if you
take a look at an example here, if we go
to index, then we have a few things
going on here in this specific file. We
have the create file route that you know
how you expose a route inside of tens
start component will link the component.
But then we also have something called
as loader that allows you to load this
specific data. So now fetch products is
not only going to be called on the
server but also on the client. And the
way client can access this data is by
simply calling route.load use loader
data. So going back we have isomeorphic
loaders. But at the same time you also
need to know that tanstack start is
going to do server side rendering by
default. That means it's going to render
the HTML for your page on the server
versus on the pine. But let's say you
want a spa-like behavior. You don't want
serverside rendering. Then in that case,
taste also offers you a few
configurations. For instance, we could
now simply go to the lead config file
and here we could pass in a variety of
different options such as we could say I
want spa as enabled. So I could say I
want spa enabled and this will now turn
this entire application into a spa that
is a single page application. But at the
same time, if you want to say, I want to
pre-render specific routes, you could do
that. You could also change it and opt
into specific routes to be pre-rendered,
specific routes to not be pre-rendered.
This specific feature again is a
configuration inside of the panstack
start plugin inside of V, and you could
configure that easily. But here's the
thing. Let's say you want these
isomeorphic loaders, right? But you also
want caching, which again XJS provides
explicitly as well. You could use
something like panstack query in
addition to the loaders so that you not
only get service side loading that same
data available on the client side but
you also get tan stack query here so you
could cache it simply as well. Then you
could feed the product data as initial
data to the query. Your query is now
going to refetch the data. The query
already has the data available and then
you could fetch products. You could
cache the data and so on using tan
query. So this is an extremely important
pattern here inside of Tanstar. At the
same time, let's say you want static
site generation. There's something
called as static server functions inside
of Tanstack start. Now again, this
feature is completely experimental, but
they are simply server functions that
are executed at build time and cached at
as static assets. So you could have that
when you when you're using pre-rendering
or static generation because they can be
set to static mode by applying the
static function middleware. But again
this is an opt-in. So you can opt in per
route and so on. So if you're thinking
about it I would say like tanstack start
framework is more closely related to the
how the pages router works inside of
Nex.js JS versus the app router works
because in pages router we had the full
page strategy right like the full like
static side generation incremented
static regeneration server side
rendering and so on inside of NexJS
versus with tanstack start it's
something similar right basically optain
for the route entirely and then you
could do more later with it with tan
stack query and so on but I would say
tan sex start is more closely related to
how nextjs pages router network versus
app router. Now on the other hand, there
are three different ways to fetch data.
One is static side generation that
allows you to cache that the data for
that specific route. Incremental static
regeneration that means you can cache
for a specific period and then
revalidate that specific data or the
third one is serverside rendering which
means you don't get any caching. It's
going to fetch each and every time but
it's going to load your HTML on the
server side. Now this is with the fetch
function. However, with Nex.js cache
components, for example, it now allows
you to cache data. You can mix dynamic
data, static data all in a single route,
which gives you the speed of static
sites with the flexibility of dynamic
rendering. Now, cache components
eliminates the trade-offs where
pre-rendering routes into a static HTML
shell that's immediately sent to the
browser with dynamic content updating
the UI as it becomes ready. So, you get
both. And with cache components, you
also get a feature called as partial
pre-rendering. With partial
pre-rendering, it allows you to provide
a static shell. And then as dynamic
content is ready, you add a suspense
boundary around it. And the dynamic
content also becomes available. But all
this is available inside of NexJS. Terms
of data fetching, hen caching, you can
do a lot inside of NexJS. You then plan
an electioning controls. You have the
fetch API if you're fetching external
data and also variety of rendering
strategies as well. Partial preending,
static side generation, incremental
static regeneration and serverside
rendering. Data fetching and caching
inside of nextjs is very powerful with
panst query. Panstack query as you know
is extremely powerful as well. It allows
you to fetch, cache and synchronize and
update your service state in your
application. If you've used tempquery
before, it is extremely powerful and
this is why I feel like pansex start is
such a really that good contender for
nextjs because it has this wide
ecosystem with query with forms with db
with tanstack ai and all of this is fed
into tanstack start which makes tanstack
start a really powerful framework. So
again all of this whatever you could do
with nexjs in terms of caching you could
also do it with tanzacquery. However, in
terms of data fetching models, dance
stack is definitely limited. I know you
could do incremental static regeneration
and so on, but I couldn't necessarily
find it in the docs. However, planner
did comment in one of the tweets that it
is possible. So, it's coming the docs
will be updated and so on. So, you could
definitely do static side generation,
incremental static regeneration and
serverside rendering inside of panst
start as well. However, instead of
having granular caching controls and
like granular data fetching, you're
going to have at a page level basis with
loaders then fed fed into tan stack
query and so on. But the fun part is
server functions that we'll talk about
which makes it even stronger contender
compared with NexJS. But to wrap up data
fetching, you can see how with tanstack
start it's explicit, right? With with
tanstack start we had to explicitly set
noters then we had to explicitly use
loader data then we had to feed it in
the query like all of this was super
explicit even with the head tags right
like if we go to the head it's again
very explicit versus with nextjs it was
a lot more implicit than explicit and
because nextjs is doing a lot for you
and gives you all the magic and does a
lot versus with tanstack start is saying
we hate magic I mean there will a little
bit of magic, but we also want you to
know how that magic works. So, it makes
it more explicit overall. Now that data
fetching is done, let's talk about
server functions inside of Tanstar. Now,
server functions inside of Tanstack
start let you define server only logic
that can be called anywhere in your
application such as loaders, components,
hooks or other server functions. Server
functions as the name indicates
literally ex create a API route. That
means it will expose a HTTP endpoint. It
is super explicit because server
functions they're not just post calls
like we have in nextJS. They are also
get calls as well. So let's take a look.
For example, we have a create server
function here. This is get server time,
right? And this specific server function
only runs on the server. it returns a
new date and you can call this anywhere
you like such as components, loaders,
hooks and so on. But now if you want to
specify specific HTTP endpoints you
could also do get request which is the
default one want to expose a post
request then you would just have to do
method post versus over here it's
implicit which is method get because get
request is the default. So if you take a
look at how we create server functions
this is a server function. It's a
dynamic route and this specific server
function is a post call and it has some
input validation here and then we get
the product by Irene. We call it inside
the loaders here as well. Now let's take
a look at another server function
example. We have a form that allows you
to create a product. So we have a create
product server function. You have the
input validator. A create product
function for example function over here
basically inserts it into the database.
Then if you take a look we also have a
create server only function. So on the
server it will return a bar but then on
the client it's going to throw an error.
On the other hand we also have a create
client only function as well. So these
functions are useful for API access file
system reads using browser APIs or so
on. If you want to enforce strict
environment bound execution. So whether
you want a specific function to run on
the server and not on the client or vice
versa then you could have something like
this too. Server functions in dance
start are extremely powerful. If you
want to create, update or delete data,
you would use server functions inside of
NexJS. But again, there's some magic
here. If you want to expose your
function as a public HTTP endpoint with
a post request, you have to use this use
server directory. You can place it at
top of the function or you could place
it at top of the file so that every
single function inside that file will
automatically get exposed as a public
HTTP endpoint. So what this means is
there's a lot of magic here and this
functionality itself has definitely
frustrated a lot of developers because
they don't understand that these are not
just JavaScript functions now they have
additional magic and this is syntactic
sugar that will expose a HTTP endpoint
because on top of that NexJS also has
server components by default every
single page inside of NexJS is a server
component it lets you fetch data and
render parts of your UI on the server
but if and stream it to the client. But
if you want interactivity, if you want
to use browser APIs, then you would use
something called as client components.
Now, inside of Tanstack, you don't have
server components yet. However, there is
some support coming up very soon. Keep
an eye out for that. Obviously, Tanstack
has client components because anything
that you have in the component will
render on the client by default. So,
with Nexjs, you do get automatic React
server components behavior. And then if
you want to mark something a client
component then you need to add the use
client directive. For example by default
page.tsx this is the admin page is in
fact a server component. So if happen
this is a server component less
JavaScript is going to get shipped to
the browser. All of this data is
actually rendered on the server. So I'm
able to make like API requests here and
so on and execute server stuff as well.
If I want to mark something a client
component, then I could also do that. A
lot of my code in fact is a server
component. When we have a submit page
and a product submit form form, it's a
client component. So inside of NexJS, if
you want to fetch data, you would do
that in a server component because by
default, every single page inside of
Nex.js is a server component. But if I
want client functionality, I need to
make it a client component. There's a
lot more magic going on in Next.js with
the use server directive. And it took a
variety of updates and education and
updated documentation to get this right.
However, with pans stack, it's actually
pretty explicit, right? Like you create
a server function. The method is post.
There we go. That's it. It's very
explicit. Now you know this is going to
create a post request for example versus
if you have a get request and it's going
to create a get request for example and
so on. Now that we have server functions
covered, let's talk about middleware.
Now inside of anstack start middleware
allows you to customize the behavior of
both service routes like get post and so
on. But middleware is also composable
and can also depend on other middleares.
In fact middleware in setup and stack
start is I would say more powerful and
better compared to Nex.js. There are two
types of middleware. You could either
execute it on a per function basis or a
per request basis. So what are the kind
of things you do with middleware?
authorization authentication logging
observability, error handling, and so
on. Like I said, it has request
middleware as well as server function
middleware. And that also ties hand
inhand with API routes as well that
we'll take a look at. So, first of all,
if you want to create a middleware, you
just do create middleware dots server.
And then you can also chain your
middleware by calling the login
middleware here as well. So, for
example, we are creating a logger
middleware. So, we are calling create
middleware.server server and we are
simply logging it inside the route. We
could pass as a server object a
middleware and call a logger middleware
over here. This would mean that for
every single request whenever this
specific page runs, we are going to call
the specific logger middleware. Now on
the other hand, if we want the
middleware to also run for server
function basis as well. So we could do
dot middleware and logger middleware
here. So I'm just going to move this
under and and this needs to be an array
as well. So now every time this server
function is executed logger middleware
will be called. Anytime
this route is being executed this logger
middleware will be called as well. So
again you could have it per function
basis or you could also have it per
request basis as well. The other hand
inside of NexJS the middleware is in
fact called a proxy. So now here I have
a clerk middleware. I'm invoking the O.
I'm checking if it has user ID and then
performing a bunch of operations and so
on and automatically creating their
organization and then calling next
response.get. But let's say if I want to
add a logger middleware for only
specific routes then it's I have to do
something like if route equals
request.oute starts with submit then do
you know whatever logging or whatever I
want here. So all of this will be added
to this giant global middleware and it's
going and I have to filter it out and so
on. So it makes it very messy because
this specific function is going to run
before every single route is called. So
now it will have to check that logic
right if it matches if the route matches
then run the logger middleware and so on
over here versus with tan stack start I
prefer that because you could simply
have like this middleware here and or
this middleware here so that means you
know this middleware is only going to
run here and so on so this just makes
your life a lot simpler so now we have
also talked about middleware let's talk
about API routes now now inside of
tanstack start we already saw how you
would create those API routes, right? We
talked about creating server functions
with the get method or post method. But
there's one more way also do server and
then have a handler here with a post
request. Here you would also have access
to request as well. So you could get
request.json and then this will expose a
post request and this itself is
available as a post route for the
specific API. So we have source routes
products right and this specific
products index. So this has a post API
here. So if you create a post API
request then it's just going to work
with the products API. So Dansax start
not only allows us to create server
functions here explicitly just like this
but you could also do something like
this if you want. So there are variety
of different options on the other hand
inside of Nex.js. But if you want to
create routes inside of Nex.js, you
could just create a API folder. And here
you would create a route. So let's call
this admin/out.ts.
Admin is a API route that's exposed. And
here you would simply call like a get
request. And you would get next response
just like this. And then you would
create a get API request just like this.
Now the difference between this and
calling this exact same functionality in
a server component is that here you have
options for request and end response.
For example, which is going to be next
request and next response here. This
next request and next response is not
available inside of server actions. So
even if you want to turn this into a
post request, you could do that. Now
when it comes to components, Nex.js CS
has a variety of components such as the
image component inside of NexJS that
extends the HTML image element and it
allows for automatic image optimization.
It also has a link component extends the
anchor element to provide automatically
fetching in client side navigation. It
has a script component that allows you
to import explicit scripts that you want
and it also optimizes those scripts as
well. So it will load a third party
script for multiple routes. it will only
load the script once and even if a user
navigates between those routes multiple
times. Plus, it also has fonts which
allows you to automatically optimize the
font. So, that's another component that
you have here wherein you have a fonts
API but includes built-in hosting for
any font file as well. You have access
to these Google fonts and all you need
to do is import font from next font
Google. We all these components make
next year a really powerful library. On
the other hand, what Tanstack does is
Tanstack essentially leans on thirdparty
libraries when it comes to when it comes
to image optimization. It recommends
using a library called unpick which is
again a ultimate open source toolkit for
deploying for images on the web. When it
comes to adding fonts, it asks you to
use font source which is a self-hosted
open-source fonts library that's
available on npm. So what it does is it
essentially is recommending all these
open-source amazing thirdparty libraries
instead of using framework components.
When it comes to optimization, similarly
when it comes to using script, it does
have a script component. So if we go to
route, it does have the these scripts
component that essentially render body
script tags from different routes as
well. And tanstack start also has a link
component when it comes to linking
between routes. We have this link
component which also has prefetching. So
you could link between different routes
as well. So as the user is about to
enter that specific viewport, it's going
to prefetch that specific route as well.
Now to enable it, you would need to
essentially add default preload as
intent to preload all the links as well
if you like. So again, Tanstack has link
component. Tanstack leans on third party
libraries instead of framework
components to for the same
functionality. So nextjs gives you out
of the box versus tanstack tells you
exactly how to achieve it. So with
nextjs it has optimized utilities and
more integrated ecosystem versus
tanstack start it gives you more freedom
to choose those utilities and however
you want to configure your application.
So when it comes to deployment you could
pretty much deploy your tanstack start
application wherever you like. It's not
tied to any specific provider with
Tanstaxart is a completely open-source
framework right it's designed to work
with any hosting provider for example so
the official hosting partners are in
fact cloudflare or netlifi however you
could deploy to cloudflare workers
versel nitro netlifi railway node server
bun app right sites and so on and there
is some documentation here for each of
these at the same time if you want to
deploy nextjs nextjs for the the longest
time was optimized for worser
deployment. But recently there have been
some updates that you could deploy
Nex.js elsewhere as well. So for
example, it gives you more explicit
information here with more templates,
but also there are a variety of
different adapters here that you could
use as well for NexJS. However, you
could still deploy elsewhere, but with
Versel, it's a lot simpler with Nex.js,
which is also why for the longest time
it was in a lot of controversy as well.
What I love about Nex.js is the whole
React server components, cache
components, and server functions model.
It truly allows you to ship less
JavaScript to the browser. Now, I know
tanstack start is going to have support
for React server components, but this is
what exists today inside of Nex.js. It
also enables you to create smaller
components with Nex.js because of the
way you architect your application and
how it enforces you to do so. So, so
that your plan components are in the
leaf nodes and you can make them
interactive. If you have a highly
interactive application, you might not
make as much use of it as if it was not
so interactive. But for a lot of
application, there's not a lot of
interactivity. So in that case, it's a
great model. Plus, on top of that, with
cache components, it again allows you to
make things simply cachable by adding a
used cache director. And I am in love
with it. I wish there was better
logging, if there was like a logger that
Nexjs could add so that we know if
things were cached or not, like more of
a debug system or some sort of dev tools
for that. But overall, I'm a fan. The
docs of NextJS are also amazing. They
document exactly how the framework
works, and you can simply go to the docs
to figure out your use cases and write
code. So, kudos to the next year's team
for that. On the other hand, what I
really love about Tanstack start is how
explicit everything is, especially the
server functions API. With server
functions, you could simply just create
a function, create server function, add
a method, get or post, and that
explicitly tells you exactly what that
function does. You don't have to guess
that the fact that you just add method
get or method post it makes it explicit
with Nex.js with server actions. It's
very confusing with use server
directive. I have gotten used to it but
I know as I'm teaching NexJS I have a
course on Nex.js CS and on this YouTube
channel as well. I know it is a bit
challenging to explain to others and how
easy it is to make mistakes because when
you're shipping a lot of code, I think
the framework should help you from
making mistakes. And I feel like with
server functions, there needs to be more
that we could do on the Nex.js side to
improve server actions overall. For
example, throw an error if a server
action is not protected or something
like that as well. So then folks know
that hey this actually exposes an HTTP
endpoint or if a certain server action
code has been exposed and so on. I know
there has been a lot of updates there
but still I feel like there could be a
little bit more on the tanstack side
after shipping one production
application with tanstack start. I found
that the error logging could definitely
be improved. The fact that loaders run
on this client as well as on the server
can definitely trip folks up because if
they run on the client as well as on the
server plus server functions that we
could create as well. There's a lot of
server stuff and there's a lot of client
stuff. And I think if the boundary
between server and client components
could be better improved with more error
logging, with more logging in general
would really help cuz I found that the
interactivity of your application just
simply stops working. If you were to
call serverside code on the client side,
that's not meant to run that way. But on
the console, there was no logging
whatsoever. Now, I know ansex start is
still being worked on. there is a
release candidate but that does not mean
that there won't be improvements or bugs
as we use the framework but it there is
it's in the RC stage so I know that's
the case but this is definitely
something that the framework could
improve upon the other thing I also
found was the documentation could be
improved as well for example I've seen
folks on Twitter say that Tanstackar
does offer static side generation
incremented static regeneration and
serverside rendering serverside
rendering is the default so it's
definitely obvious but the other two I
feel like if there were more examples in
the docs or how you could achieve that.
It would lead to more adoption as folks
from Next.js try to migrate to
Tanstackar. Overall, I'm a huge fan of
Tanstackar and I truly believe in its
future and it's going to be a really
solid competitor to Nex.js. In fact, if
you have a lot of interactivity and if
you want an application that not only
focuses on the server but is also
heavily focused on the client, then
definitely Tanstack start is a strong
contender. If you want to ship less
JavaScript to the browser, you want the
capabilities of React server components
and have caching capabilities built in
with a lot of different powerful
components from the framework itself
such as the image component, font,
script, and so on, then definitely
Next.js is a solid contender. Now, let's
talk about the most interesting and the
most important topic that you've been
waiting for, the job market. Now, I've
been receiving this question quite a
bit. Is it worth it? Is it worth it to
invest in Panstack? start considering
you know next year is pure is dominant
in the job market. Do you think what do
you foresee in 2026? Well, first of all,
I think that definitely next year
dominates the current job market with
thousands of open positions globally
where Tanstack start is too new right
now to have significant dedicated job
listings. However, the broader Tanstack
ecosystem such as Tanstack query,
Tanstack router appears in many job
descriptions, more specifically Tanstack
query. Next year's job description
definitely has a lot of presence with
5,000 dedicated job listings on
LinkedIn. Indeed, it featured in maybe
30 to 40% of React developer job
descriptions as well. It's commonly
listed as a required skill for many job
descriptions as well and it's often
paired with some sort of a cloud
deployment pair for example versel
deployment or something like that. But
it's very strong when it comes to
deploying static sites for instance or
like wellunded startups. When it comes
to tanstack start job market, you can
already see the number of npm downloads
going up the GitHub stars contributors
and so on. If you take a look at the
ecosystem, tanstack query, right? Like
npm downloads here is just insane. So
the broader tanstack ecosystem appears
in 2015 to 20% of react job listing.
Anstack query is the most requested
library from every ecosystem. In fact,
for one of the jobs, we were definitely
looking for if you have anstack query
experience. It was not something that
was a must, but definitely when I was
hiring, I was looking for that too. But
I am seeing early adoption in smaller
companies and startups. The tech start
has started to appear like often in a
nice to have face rather than a
requirement phase. But here's what I
truly think. What I think is that
Tanstack ecosystem overall is massive.
It's high quality open-source software.
It's been the ecosystem along with start
router query table and so on is used by
a lot of different companies already. So
it's just a matter of time that tanstack
start will start to show its dominance I
should say and more and more companies
are going to adopt it. So I do think in
2026 Tanstar the future of the entire
ecosystem but more specifically Tanstar
is looking really bright because of the
trust on the creator like Tanner Lindley
and the variety of different libraries
that he has created. I also have an
interview on my channel where I
interviewed Tanner on Tanstack and the
ecosystem and so on. So definitely take
a look if you're interested. But I feel
like dance tech start is the framework
you should learn because more and more
jobs will start popping up and you will
be able to stand out with it. Plus on
top of that there are variety of skills
that easily transfer. React fundamentals
transfer between the frameworks.
Typescript proficiency vital for both
but especially for tanstack because if
you don't understand typescript well you
might struggle a little bit with
tanstack. The client and server
architecture understanding shows that
you have full stack experience, API
integration experience as well as state
management concepts with Tanstack query.
All of these are skills that easily
transfer. So next years will continue to
dominate the market through 2026 for
sure. Tanstax start adoption is growing
and I do feel like it will start to
dominate in 2026. Companies that already
use Tanstack query will more rightly
adopt Tstack start because it's easier.
developers who don't like the bells and
whistles and who don't like a lot of
magic done for them, they are going to
opt for something like tanaxar. So I
would say the knowledge of both of these
frameworks are increasingly valuable. I
would not say one is winning over the
other because both are extremely
powerful. I would say though looking for
jobs in the next 6 months, go for nextjs
because obviously nextjs is already
dominant. Having said that, thank you so
much for watching. as next steps. Check
out the tansac start course on my
channel that allows you to build and
deploy a production ready app. Or you
could check out the next course on my
channel which also lets you build and
deploy a e-commerce application. If you
go with either of these, it's an amazing
choice. Or go both of these and learn
and level up your next year skills and
be ready for 2026. All right, thanks for
watching. Bye for now.
Next.js vs TanStack Start: is this real competition or just hype? š Next.js has been the standard for React developers for years, but TanStack Start is challenging that dominance. Is it time to switch? In this video, I provide a comprehensive review of TanStack Start vs. Next.js, breaking down the key differences in routing, data fetching, and performance. If you are suffering from "App Router Fatigue" or struggling with Next.js caching, this framework comparison will help you decide the best tech stack for 2026. š„ What to check out next: https://youtu.be/G8D_n47rvoo https://youtu.be/tI_Nt32_4wM š„ Next.js 16 Cheatsheet: https://dub.sh/nextjs-cheatsheet š Build 7 Production Ready Next.js apps: https://dub.sh/nextjs-fullstack-course Chapters 00:00 - Next.js vs. Tanstack Start 01:05 - Framework Philosophies 05:26 - Routing Systems Compared 11:33 - Data Fetching and Caching 19:41 - Server Functions and API Routes 24:22 - Middleware Comparison 29:00 - Components and Utilities 31:44 - Deployment Options 36:59 - Job Market Analysis 40:44 - Next Steps š„ Join my Discord: https://dub.sh/anky-discord