Let's Fight: React Framework Showdown 🥊

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Choosing the best framework is tough, isn't it? We've got Next.js, Remix, and a bunch of others thrown into the mix. So, let's keep it real in this talk—I'll be comparing three of the big contenders: Next.js, Remix, and one surprise package.

We'll be looking at some key stuff like Data fetching, Routing, SEO, Performance, Server-side Rendering, and more. Think of it like a friendly showdown where these frameworks go head-to-head in a fair and square matchup.

We'll dish out points and see who comes out on top, highlighting which framework rocks for different uses and helping you out with your next project. And hey, no favoritism here—I'll be keeping it neutral and backing it all up with real-world examples.

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

FAQ

Next.js is popular because it offers built-in optimizations, server components, granular caching controls, and wide community support. It's ideal for marketing sites, static sites, e-commerce sites, and SaaS dashboards.

React Router v7 focuses on progressive enhancement, accessibility, and web standards. It offers deep nested routing, making it suitable for dynamic applications, and doesn't limit integration with cloud platforms.

Tanstack Start is beneficial for client-heavy applications due to its integration with React Query and Tanstack Router. It offers isomorphic loaders, streaming by default, and is fully typed with TypeScript support.

SSR, or Server-Side Rendering, improves web performance by sending a full page with data (HTML content) to the user, avoiding the display of an empty page. It enhances the user experience by providing a visible skeleton while scripts are downloaded.

Caching in Next.js is crucial for performance optimization. It allows granular control over data fetching, enabling server-side rendering, revalidation, and static rendering to optimize content delivery based on the application's needs.

Streaming enhances performance by sending parts of the data that are ready to the user, improving load times. It allows pages to begin displaying content while the rest is being streamed, providing a smoother user experience.

Next.js is ideal for e-commerce sites, static content delivery, landing pages, and documentation sites due to its performance optimizations and ability to handle static and dynamic content efficiently.

Yes, Next.js has made efforts to ensure it can be deployed across various platforms, addressing previous limitations with deployment outside specific platforms.

TypeScript in Tanstack Start provides full typing support, enhancing code reliability and reducing errors when changing routes or debugging, making development smoother and more efficient.

When choosing a React framework, consider factors like adoption, developer experience, performance, routing, data fetching, and deployment. Choose a framework that aligns with your project's specific needs and your beliefs on how apps should be built.

Ankita Kulkarni
Ankita Kulkarni
27 min
13 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Today's focus is on comparing React frameworks and choosing the most suitable one for your project based on your beliefs about app development. Ankita's tech background, education focus, and unbiased framework comparison oath. Comparison of Next.js, React Router v7, CanStack Start. SSR and streaming in web evolution. Frameworks' different approaches. Choosing the right framework for app development based on needs. Comparing frameworks based on key pillars. Next.js for scalability and SEO. Remix for web standards integration. Tanstack Start for client-heavy apps and server-first approach. Different components in Next.js. Next.js ideal for e-commerce and content-heavy sites. Flexibility with React router for various applications. Tanstack's focus on client-heavy apps. Tanstack Start benefits, including server-first approach and full typing. Tanstack's advantages in typing, streaming, and server functions. Ideal for client-heavy apps with interactivity. Consider adoption rates and ecosystem longevity when choosing a framework. Comparison of Next.js, React Router v7, and Tanstack in terms of learning curve, adoption points, and routing methods. Developer experience comparison among Next.js, React Router v7, and Tanstack. Performance aspects including image handling, caching controls, and prefetching in Next.js and TANstack. Comparison of data fetching methods in Next.js, React Router, and TANstack. Deployment flexibility across frameworks. Key considerations for choosing Next.js, React Router, or Tanstack based on specific criteria. Next.js highlighted for built-in optimizations, server components, and broad community support. React Router emphasizes progressive enhancement, accessibility, and deep nested routing. Tanstack recommended for React Query integration, client-heavy apps, and SSR without complex abstractions.

1. React Framework Showdown

Short description:

Today's focus is on comparing React frameworks and choosing the most suitable one for your project based on your beliefs about app development.

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.

2. Ankita's Tech Journey

Short description:

Ankita's tech background, education focus, and unbiased framework comparison oath. Comparison of Next.js, React Router v7, CanStack Start. Avoiding 'spinner of death' in framework loading for user experience.

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.

3. Web Evolution and Framework Choices

Short description:

SSR and streaming in web evolution. Frameworks' different approaches. Choosing the right framework for app development based on needs.

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.

4. Framework Comparison: Next.js, Remix, and Tanstack

Short description:

Comparing frameworks based on key pillars. Next.js for scalability and SEO. Remix for web standards integration. Tanstack Start for client-heavy apps and server-first approach.

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.

5. Comparison: Next.js, Remix, Tanstack Components

Short description:

Different components in Next.js. Next.js ideal for e-commerce and content-heavy sites. Remix focuses on web standards. Tanstack Start for client-heavy apps and server-first approach.

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.

6. React Router and Tanstack Comparison

Short description:

Flexibility with React router for various applications. Tanstack's focus on client-heavy apps. Tanstack Start benefits, including server-first approach and full typing.

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.

7. Tanstack Features and Adoption Considerations

Short description:

Tanstack's advantages in typing, streaming, and server functions. Ideal for client-heavy apps with interactivity. Consider adoption rates and ecosystem longevity when choosing a framework.

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.

8. Framework Learning Curve and Routing Comparison

Short description:

Comparison of Next.js, React Router v7, and Tanstack in terms of learning curve, adoption points, and routing methods.

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.

9. Developer Experience and Performance Comparison

Short description:

Developer experience comparison among Next.js, React Router v7, and Tanstack. Performance aspects including image handling, caching controls, and prefetching in Next.js and TANstack.

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.

10. Data Fetching Methods and Deployment Flexibility

Short description:

Comparison of data fetching methods in Next.js, React Router, and TANstack. Deployment flexibility across frameworks.

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.

11. React Framework Selection Considerations

Short description:

Key considerations for choosing Next.js, React Router, or Tanstack based on specific criteria. Next.js highlighted for built-in optimizations, server components, and broad community support. React Router emphasizes progressive enhancement, accessibility, and deep nested routing. Tanstack recommended for React Query integration, client-heavy apps, and SSR without complex abstractions.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.

Workshops on related topic

Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
Workshop
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
Workshop
Wess Cope
Wess Cope
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Hard GraphQL Problems at Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
Workshop
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)