SPA to SSR and Everything in Between

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

FAQ

React has transformed the industry by providing a robust framework that has evolved to include server capabilities, improving performance, code reuse, and SEO, which were not as accessible in other frameworks.

Key developments included the introduction of Hooks and Suspense, which improved ergonomics and paved the way for streaming and progressive hydration. Additionally, server-rendered Next.js and the Remix framework made server-side rendering more accessible.

React server components are a new feature that allows server-side rendering to be more efficient, solving challenges like bundling and component data fetching waterfalls. They represent a new architecture that can enhance performance and scalability.

Using React server components can increase complexity by multiplying server challenges throughout an application. They also demand both micro and macro changes to the codebase, including file organization and compliance with new rules.

TanStack has contributed by developing tools like TanStack Router and TanStack Start, which improve routing, state management, and server-side capabilities in React applications, aiming to meet developers' needs both in client-side and server-side environments.

TanStack plans to support React server components broadly, waiting for upstream stability, especially in tools like Vite, to make server components widely accessible across different projects and frameworks.

TanStack Router provides advanced features like 100% type safety, state management for URLs, fine-grained subscriptions, and efficient route handling, making it a powerful tool for both single-page and server-rendered applications.

The current state of bundler support, particularly with Vite not yet supporting server components, presents a challenge in making React server components broadly accessible and usable across different environments.

The speaker believes SPAs are critical and here to stay, highlighting their importance in various applications and the efforts to build tools that enhance the SPA development experience.

The speaker focused on the transformative impact of React, the evolution of server-side rendering, the introduction of React server components, and the development of tools like TanStack Router and TanStack Start to enhance both client-side and server-side React applications.

Tanner Linsley
Tanner Linsley
29 min
13 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
React's transformative impact, community support, and server-side evolution highlighted. Exciting developments from static site generators like Next.js and Gatsby to server-side rendering evolution, including React Fiber, Hooks, and server components. The pressure on servers in 2020 led to the announcement of server components, a complex but transformative idea. New challenges arise with weaving server and client, requiring adaptation and file organization. Evaluation of React server components' worth based on server-side needs and bundle issues. SPAs are prevalent and valued, despite the focus on client-side apps. TanStack Router offers unparalleled URL state management and type safety, enhancing SPA development. Exciting developments ahead with the DaVinci release, supported by sponsors for TAN stack's full-time commitment and core contributors.

1. React's Evolution and Impact

Short description:

React's transformative impact, community support, and server-side evolution highlighted. SEO benefits, code reuse, and ease of server-side React emphasized.

I'm sorry, I don't have any t-shirts this time, so I brought something much better with me to Amsterdam this year. My wife and three children are on the front row right here. So the more fun we have, the more fun they're gonna have. So let's keep it fun.

All right. It is no secret React is on fire. And is React on fire? When I started using React in 2014, I did not know that this is what it was gonna look like. And I thought for sure after a decade we'd start to see some changes in this line. But it is just going up. It is crazy. It's definitely transformative. It's transformed our industry and it's transformed other industries too, believe it or not.

But something I think is really important is that I don't think it would be anywhere where it is today without this community and this ecosystem that has rallied around it. I want to say that we're here because we choose React as our framework every day. I think we need to celebrate that. So React is great. So ten years ago I started using it. And ever since I started using it, it's been moving to the server ever since.

I've been building websites for over 15 years. Not always with React. So when I started learning React and saw that I could start using server capabilities, I was really excited about that because it really brings some good benefits to the table, especially SEO. I spent 10 years in the SEO industry this last decade and so I really appreciate that. We get performance. We get a ton of code reuse, a unified stack. And today it's pretty easy to use React on the server. But that was not always the case.

Back in 2013, we didn't even have server APIs. It was a brief honeymoon of about three months after they released it, we got the very first API for the server, render to string. And compared to other existing frameworks at the time, believe it or not, render to string was revolutionary. I don't know if anybody tried to do SSR and Angular 1x, but wow.

2. React's Server-Side Evolution

Short description:

Exciting developments from static site generators like Next.js and Gatsby to server-side rendering evolution, including React Fiber, Hooks, and server components. 2020 brought challenges and innovations like Remix, enhancing SSR accessibility for React developers.

It was crazy. So the idea that you can take your app and just turn it into HTML is really amazing. And that opened up this exciting path for the next 10 years. From 2016-17, we saw some really big growth. We got Next.js and Gatsby. But we didn't get the Next.js that you're thinking of today. These were static site generator frameworks, because we hadn't even quite made it to the server yet, at least not all of us.

We also got improvements like React Fiber, core upgrades that started to pave the way for a push to the server even harder. In 2018 and 2019, we got Hooks and Suspense. These massively upgraded all of our ergonomics, and they paved the way for things like streaming and progressive hydration. And then finally, we started to get server rendered Next.js, which was amazing. This was the beginning of the commoditization of server-side rendering for React developers. It was a massive win.

In 2020, we got COVID. No, I'm just joking. We got Remix. We got another key framework in making SSR more accessible to more React developers. And we all know that 2020, we suppressed a lot of 2020, let's admit. But I do remember it as being one of the most exciting times to be a React developer, because it seemed like things were just getting so easy to take part in. Whatever you wanted to build with React, you could do it, and the server was definitely a part of that. It was awesome.

QnA

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.
Tanstack Start - A Client-Side First Full-Stack React Framework
React Summit US 2024React Summit US 2024
30 min
Tanstack Start - A Client-Side First Full-Stack React Framework
Top Content
We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.

Workshops on related topic

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.
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)
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced 2022React Advanced 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
Workshop
David Witt
David Witt
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.
Build a Universal Reactive Data Library with Starbeam
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships