Let's Fight: React Framework Showdown 🥊

All right. So today we are going to talk about, we are going to do a showdown of all the React frameworks, or I guess like the most popular ones, I should say. I just want to add a disclaimer that every framework has its use cases and a lot of work goes into making the web better. So that is something you always have to keep in mind because frameworks are a bunch of opinions.

So let me ask this question. Who's ever started a new React project and questioned everything? Please raise your hand. Wow. Quite a few folks already know what they're doing. That's great. But certainly, anytime I start a new React project, I'm always wondering, what application am I building? What's my use case? And so on. So that's something to keep in mind.

So in 2016, roughly, React gave us components. In 2019, roughly, it gave us hooks. And in 2025, it gave us existential confusion. And that's because there is a lot that is going on with React and React frameworks. React suddenly has become from a library to this full stack framework, I should say. And there are so many different frameworks that we'll take a look at. But React is no longer just a view layer. It has a lot more going on. So the goal for today is to pick the best framework. But not just any framework. But a framework that's not supposed to be just powerful for any type of application, but powerful for the application that you are specifically building. It's the one that shares your beliefs about how apps should be built. So if anyone asks you what's the best framework, it's whatever framework that works for you in that specific project. So in your company, you may pick a framework, let's say Next.js, but on the other hand, go with like Tanstack or React Router or v7 and so on.

So to quickly introduce myself, my name is Ankita. I've been working in tech for over a decade. I've done all sorts of roles from senior leadership to tech leadership and also solution architect and a lot more. The past couple of years I've been getting into tech education and teaching developers just to level up their skills and also like teach web dev, AI and SaaS content. So this is my YouTube channel if you want to check it out. And all the slides and everything that I have will be posted at this specific link. So definitely check it out if you are interested.

I also take the oath to be unbiased because I have to admit that I do have a lot of Next.js content, for example. I've also talked and selected maybe some other framework in the past as my favorite framework, which is not Next.js. So in this specific presentation, I want to take an oath to be totally unbiased because there's a lot that goes on. We will be comparing three specific frameworks, Next.js, React Router v7, or previously maybe Remix, and CanStack Start. So let's be real. Let's take a step back a little bit.

This is what a lot of frameworks are trying to avoid. A spinner of death, I should say. And let's say you have a browser that is requesting for ilovecookies.com. This is what any framework is trying to do. One, they're trying to send a GET request. And typically what happens is you would get an empty app shell. Now we don't want to send an empty app shell to the user. Next step is asking for a bunch of scripts. And then we are going to get back a bunch of scripts to be downloaded. And lastly, we are going to request for data. And in return, we are going to get some JSON. And we are going to print and hydrate the page with ilovecookies. Now as you can see, this can be really slow. We don't want to show our users an empty page. In fact, you might have noticed that a lot of websites are really slow with even sometimes the Wi-Fi being not reliable or your data network not being reliable. So something to keep in mind. Then comes SSR.

We thought SSR is going to fix everything. Right? Which it didn't to an extent. Same website, ilovecookies.com. We are going to get a GET request for ilovecookies.com. But this time, you're going to get full page with data, that is HTML content. And then you are going to show this beautiful skeleton to the user, no longer an empty page. And then we are going to get the scripts, download the scripts, while the user sees this beautiful skeleton, so they have something to look at and not a blank page. And lastly, you are going to see ilovecookies on the page. And that's how, again, SSR solved a lot of problems for us. And it was a much better experience.

But what if your server is slow? It's going to take, let's say, a while to load something. Then comes in streaming. We thought, okay, yes, streaming is going to fix everything. So the parts of the data that is ready will get sent to the user. So again, same request, ilovecookies.com. We get full page with data. But data that is ready. So ilovechocolatecookies is printed on the screen, while the rest of the content is getting streamed in. Again, we are going to get the scripts, and the rest of the content is going to get hydrated as the scripts get downloaded. So that is the evolution of web and what frameworks are basically trying to solve.

So the three frameworks that we'll take a look at will have its sort of pros and cons, and we will take a look and evaluate how they all work. So every framework claims to solve this, but they take very different roads to get there. So you want to make a choice for the type of app that you're building. For example, this is a SaaS that I built called proofybubble.com. It basically helps you turn website visitors into customers by showing these bubbles of live sales or live subscribers and so on. There's a reason why I'm showing you this app. For the tech stack, I chose Next.js for the landing page because I really wanted fast, static content. But the actual bubble itself that gets rendered on the page, I don't need a big framework for that, so I use Wheat as a builder to basically build the most minimal JavaScript possible. Could I have used Next.js on any of the frameworks that we're going to talk about? Of course, but why add unnecessary bloat? So looking back, I think I should have also looked into other frameworks for the interactivity bit, which we'll take a look at. But again, to my point, pick a framework that works for you.

So we are going to compare and do a showdown based on six pillars, adoption, developer experience, performance, routing, data fetching, and deployment. These are the core principles and pillars you should take a look at whenever you are comparing any frameworks.

So let's talk about, first of all, what is Next.js? Next.js is a framework that's built on top of React, giving you all the necessary tools for building scalable apps by rendering content on the server. Next.js provides easy integration for SEO, service-less platform, unique data fetching mechanisms, various components like server components and actions, and automatic code splitting.

Remix, also known as React Router v7, unifies client and server using web standards, allowing a focus on product over code complexity. It leverages web APIs directly, providing flexibility in creating standard CDN-hosted single-page applications or migrating to SSR seamlessly. Tanstack, through Tanstack Start, offers a full-stack React framework favoring client-heavy apps, with server-first data loading and efficient management using React query.

We also have a lot of different components that we'll take a look at. We have server components as well as server actions, and we also get automatic code splitting. Now, this is what Next.js provides. Sites ideal for Next.js include e-commerce sites, landing pages for SaaS, documentation sites, and blogs. Next.js is suitable for serving static or hybrid content, dynamic and static content.

Remix, also known as React Router v7, unifies client and server with web standards, prioritizing product focus over code complexity. It leverages web APIs directly, offering flexibility in creating single-page applications or adding SSR seamlessly. React router emphasizes web standards and Vite ecosystem integration for efficient routing solutions.

Tanstack, particularly Tanstack Start, is tailored for client-heavy applications with a server-first data loading approach. Tanstack Start, a full-stack React framework, utilizes Tanstack router and query integrations, emphasizing server-side initial data loading and subsequent client-side caching. Tanstack stands out for its full TypeScript support, default streaming, and isomorphic loaders for seamless server-to-client transitions.

And you get the flexibility of using a React router because you can create a standard CDN, hosted single page application, or you could easily migrate that and add SSR hosted as well on any server, which is the beauty of it. If you want regular React router stuff that we all love and have been using, we can totally do that because if you think about it, a lot of what framework provides is how beautiful the router is and how fast it is. In an era where there are complex JavaScript solutions, React router will bet on web standards and Vite ecosystem as part of that.

Now, let's talk about Tanstack. It is a thin layer on top of Tanstack router that we already know and love, but it's more favorable to client heavy apps. Remember my SAS that I talked about? Looking back, I feel like for the dashboard interactivity, when I needed a lot of client rendering, I should have probably gone with Tanstack because it's really powerful and useful for that. Tanstack Start is a full stack React framework powered by Tanstack router, providing the entire ecosystem with it. Tanstack Start follows a server-first and then client approach, leveraging React query for efficient data management and caching.

Tanstack stands out for being fully typed, offering default streaming, isomorphic loaders, server functions for simplified server-based calls, and seamless React query integration. It excels in scenarios like interactive dashboards and admin panels, being ideal for client-heavy applications with caching needs. However, Tanstack Start may not suit projects aiming for server-rendered sites with minimal client-side interactivity or those seeking a React Server Components-first framework, especially considering its beta status and upcoming features.

The second time this request happens, we already have the data from the server, so the Tanstack Start is going to be like, hey, I got this and manage it all using React query that again a lot of us love and get it from the cache. So, what makes Tanstack really special is that it's fully typed. I can't remember the number of times I have changed routes in other frameworks and everything breaks and I have no idea a lot of times what's working and what's not. I have to truly debug it or maybe ask AI to do it. But still, with TypeScript, it's going to help a lot because it's fully typed. It has streaming by default, like we talked about what streaming is. It also has isomorphic loaders. That means loaders that run on the server initially, then on the client for client-side navigations, like we looked at as well. It has server functions now, which is really cool, and that makes it easier to make server-based calls. It already has the React query integration, so you could just use it right away and use it out of the box.

And the sites that are ideal for Tanstack would be this dashboard of my SaaS that I talked about for Proofy Bubble. I'm trying to modify this bubble and add a lot of different interactivity. In this case, maybe I could have used Next.js or React Router. But ideally, Tanstack is the best contender for this one because this is a client-heavy app. It will have a lot of caching, a lot of changes that Tanstack Start is just going to manage. So any type of interactive dashboards, admin panels, so on, Tanstack is a great start. But Tanstack Start is not ideal for you if your goal is a server-rendered site with zero JavaScript or minimal client-side interactivity, or you are looking for a React Server Components-first framework. Again, this is coming soon. So Tanstack Start is still in beta, so keep that in mind. I mean, it's not really a fair comparison when other frameworks are already, you know, getting built and used by a lot of companies, which Tanstack Start is also being used, but it's still in beta, so remember that. And it's already so powerful, so I cannot even imagine how powerful it would be after its full release.

So next pillar is adoption, how easy it is to adopt any of these frameworks. So if you take a look at the stars on GitHub, we have 132K on Next.js, 55K for React Router, and then for Tanstack, it's 10.3K. However, keep that in mind, in terms of the ecosystem, for all of these, they have been... Next.js, even though maybe has been around for a long time, but React Router on its own has been around as well for way longer, and so has React Query and so on. So if you look at it holistically, then I think any of these frameworks would be a great choice. In terms of NPM downloads as well, this is something that I actually got from tanstack.com, and it has a really good comparison for how many downloads, last week, period downloads, and so on. And you can already see that React Router here is actually a winner. But keep in mind, React Router v7 came out quite recently, or like over the last year or so, whereas React Router has been around for a very long time. So something to keep in mind, that you have to also consider that when it comes to adoption.

But again, all of these are pretty good numbers that we can lean on. But the ecosystem around Next.js, like I talked about, eight plus years ago, is definitely superior, or like been way longer compared to others. But the learning curve with Next.js, it can be a bit more compared to the other two. For example, we have to learn two different types of routers with Next.js, App Router and Pages Router. We have server actions, server components, different behaviors and versions. And I have definitely been frustrated when I did so. And there are also different rendering methods as well. So there's definitely a steep learning curve here.

However, with React Router v7 and with Remix, and the changes recently in the ecosystem, it definitely is a little bit trickier to adopt as direction of what Remix is going to be and what React Router v7 is going to be is changing, which makes me a little bit hesitant to fully adopt head on because of that, compared to the other two frameworks. So if you take a look at giving points, I'm going to give Next.js 10 points for adoption, whereas React Router v7, nine, and again, 10 stack nine as well, because Next.js has been longer and so on.

So let's talk about routing. Again, Next.js has two different types of router, pages as well as app router. With Next.js pages router, you just create the folder name and use index.js file, and that will become the root file. If you want dynamic routes, then use both brackets. With Next.js app router, you have to use naming conventions. So for example, page.tsx will expose that specific route to the browser and layout with our layouts and so on. Again, honestly, a lot of these are preferences, right? Not everyone loves even like a file-based router. With React Router v7, this is how you create a route, index.tsx, about.tsx, and any of the dynamic route with like dollar sign. And with 10 stack, again, very similar. So if we take a look at it, and in terms of giving points, I'm going to give it the same point, because again, it's just a matter of preference here. It's a really good way for us to use the router and expose it.

Now, let's talk about developer experience. Next.js has come a really long way. There are lots of new patterns to learn from. Routing can be slow for client-first applications, and where does this code run is a question that so many of us have asked. Can I use UseEffect here? What breaks hydration? But obviously, Next.js has come a long way in the latest version of Next.js, which is Next.js 15, where errors are a lot more obvious. But we also need to keep in mind that Next.js also embraced React server components early, giving us a glimpse into what full-stack React could look like before most frameworks were ready. So that is something we also need to give it some grace. With React Router and 10 stack, I would say because it uses Vite for the build system, Vite is incredibly fast, and current build tools for the web are 10 to 100 times slower than they actually could be. So because both of them use Vite, it's already a really good start. For example, Vite uses a plugin-based system, and as you can see, there's a remix function right here, and that is literally what remix is. And with 10 stack, it's a 10 stack start function here because Vite uses a plugin system, so you can think of it as Lego boxes that you can pick and choose from. So where can React Router slow you down? Well, it's like tightly coupled to web standards, for example, so it can get a little tricky, for example, because it's off-site coupling, and you don't have to. It gets too strict at times. But also it means that less magic equals more decisions, so you have to make a lot of decisions here whenever you go with React Router v7. And overall, the experience is better when it comes to developer experience. It's type-safe, there are API routes, automatic code-splitting, and so on. So when it comes to points, I'm going to give Next.js, all of them the same points in terms of the developer experience overall. Again, cutting two points here and being a little bit more strict when it comes to overall experience.

Now let's talk about performance. Let's say we have this e-commerce site, and a lot of e-commerce apps use images. So whenever you think of performance, you have to think about images, otherwise your site is going to be really slow. Next.js has ImageComponent out of the box that gives you that performance boost right away because it prevents layout shift and your images can scale down based on your browser's viewport. But there is more. There are fonts, there are caching controls that Next.js provides, there's a script component, there's automatic code-splitting, there's a link component that prefetches specific routes before the user is ready to route to it, and so on. And there's also link prefetching in all three frameworks which enables instant transitions as well. But Next.js can be slow for client-rendered applications, only reason because their focus is mainly on the server. So when it comes to TANstack, isomorphic loaders run on the server first, initially, and then switch to client for client-side navigation. So you get a lot of caching benefits compared to other frameworks. So I would say TANstack Start and React Query, it's bigger, it's better, and it works seamlessly with React Query for fine-grained caching controls. And React Router, as we all know, is just fast and used in a lot of different applications, and I've never experienced any specific slowdown.

Whoops. So when we think about it, we are going to give these points to all these three frameworks when it comes to that. Let's talk about data fetching. Now, Next.js has extended the fetch function, so you could do something like this for the three different data fetching methods and just add a specific attribute for caching. So you can literally say cache no store for server-side rendering, revalidate for expiry of cache after a certain period, or force cache for static rendering. Now, these are just all different ways of how you could do data fetching with Next.js. But again, it has server components for fetch and server actions for any type of mutations you want. So this is how the code looks like if you're trying to access the number of invoices and trying to get the data. A lot of our code inside of Next.js or with the latest React features will look like this. Where it says server action, they give us a directive called use server that we could use to expose any function and create HTTP routes for it. But you have to make sure that you add auth layer to it. When it comes to React Router, I really like this specific tweet by MJ, which says that it's literally like Wget. And Wget fetches and downloads all the specific browser file. It is the original static side generator. So you get logging, cookies, all the things that we usually get in a specific framework, which is pretty nice. So when I think of data fetching inside of Remix or React Router, this is how it will look like. You have actions, you have loaders, and you have components. And loader will only run on the server. So it will load the data necessary for the component to render. And it will have validate functions to validate the properties and so on. Then we have TAN stack, which basically looks something like this. Again, I'm trying to draw parallels just for you to understand what kind of opinions you want to build here so that you can pick the framework because you're going to write a similar code that I'm showing you here because I've grabbed it from the existing projects that I have. Again, this is a simple component, which basically has loader, it has component, and it has the useLoader hook that basically invokes the loader. And then we have error components and also not found components, and it renders that data. And this is how you write a server functions where you simply call createServerFunction. And now this just makes it a lot simpler to just invoke the function and use it. So when it comes to this, I'm going to give Next.js 10 points, React Nodder 10 points, and TAN stack 10 as well because all of them are really good in terms of how we fetch data and give us a lot of different controls that we need to make our framework seamless to integrate.

Lastly, let's talk about deployment. Now, all of them can run anywhere. Now, I know there was some, I would say some specific issues or some challenges with Next.js being able to be deployed outside of a specific platform, but that has changed recently and there's a huge push from the Next.js team to deploy it anywhere and everywhere.

So that's something you need to keep in mind. So again, I'm going to deduct one point for that for Next.js, but all of them, I'm going to give it the same. So whenever you have to think about any of these React frameworks, you have to figure out when to choose which framework. For example, you want to choose Next.js whenever there are built-in optimizations or you want to use server components. You need granular caching controls and you don't want any custom webpack builds. You want that wide adoption and community support because it has been around for longer and you can build applications pretty seamlessly. Plus, if you're focusing on marketing sites, static sites, e-commerce sites, SaaS dashboards, and so on, then you want to think of that.

Next, we have React Router. You want to care about progressive enhancement, accessibility, web standards, and you are a purist and you really care about that stuff, then go with React Router v7. It also has really deep nested routing, which really helps you build really dynamic applications, and there's no limitation for integration for cloud platforms. And you want to go for Tanstack if you're already using React Query or React Router, or Tanstack Router, that we all love, and that is something you want to use. Or if you have a client-heavy application, Tanstack star really shines and you want to use that. And lastly, you care about streaming and SSR without any complex abstractions because of isomorphic loaders and so on.

Again, I have thrown a lot at you right now with all the three different frameworks, but based on these pillars, I wanted to walk you through how you could take this slide deck, go to your team and discuss the different points and pillars so you can pick the best framework for your project. So in terms of winner, who do you think is the winner? All right, any other answers? It's really hot in here. I get it. So I would say the winner is Next.js because it has been around for longer. It has wide community support, different data fetching mechanisms, server components, and so on. So again, it makes it a lot easier for us to use. At the same time, it also depends. It depends on the application that you're building. Like I said, a client-heavy app, I would typically go for Tanstack start. Or if you are using React Router already in your specific company, then you could do that as well. At the same time, if you want to check out more, check out this specific site for more information on Next.js. And thank you so much. Again, as all my slides are posted here.