Introducing React SPA, the Framework™

January 27, 2025

reactjsfrontendsuper serious

So you convinced your manager to build your internal app with Next.js. That was months ago, now it's Monday morning, and Next.js hasn't released a new version yet. You're still waiting for your app to compile. On your second monitor, you see your deployment costs creeping higher and higher. Your engineering manager is asking why adding a new library is suddenly a multi-week project involving “SSR compatibility” and “hydration bugs.” You start wondering: is saving 50ms really worth all this?

Then the real problems hit. Your new third-party library doesn't support SSR. Every upgrade brings breaking changes that take days to resolve. And just when you think the pain is over, you realize your app has a network waterfall issue that makes it feel slower than ever.

Out of desperation, you Google for an easier, simpler way to build React apps. You stumble across Create React App. Last release: 2022. Damn. Never going to get that approved by my tech lead. You visit the React docs. Nothing helpful, until you spot a dropdown menu "Can I use React without a framework?" Huh? Weird.

React Docs Deep Dive

You read through paragraphs explaining why you should use a framework. Wait isn't this dropdown about using it without a framework?React Docs Unusual DropdownYou push on. Finally, at the bottom of the page you read: “Unusual constraint?” What does that mean?

React Docs Unusual Constraints

So on this entire page, hidden behind a dropdown, after 3 paragraphs telling you why they think not using a framework is a bad choice, there is a single paragraph that mentions Vite and other non SSR first frameworks? So SPA-first development is still "supported," just heavily discouraged.

Hmmm, so if building a React SPA app is still valid way to build an app. And the React Team strongly suggests you use framework. Maybe the issue is the lack of a SPA-first "framework". Seems like the the only logical solution is to build a SPA Framework.

React SPA, the Framework™.

React SPA is the revolutionary new framework for modern frontend development. It's not just a framework; it's the absence of one. Forget SSR, React SPA simplifies your development experience by giving you exactly what you need: React on the client-side, and nothing else.

Github

React Spa

Why Choose React SPA?

  1. Pure Client-Side Goodness: No need to worry about servers, static rendering, or rehydration. We send everything, everything, all at once to the client. Nothing can go wrong with that approach.
  2. No Adapater libraries: Common libraries just work™. No need for a adapter libraries that sit between the framework and the library. Just install the library directly. React SPA allows you to make use of all the thousands of libaries that only work on the client.
  3. Easy to understand: Easy to grok. If you have skill issues, learned React in 2016, and are scared of changes then React SPA is here to comfort you.
  4. Batteries Not Included: With React SPA, you don't have to deal with features you will never use. You start with blank slate much like your bank account after deploying SSR.
  5. Lightweight: Just install React and you're ready to go. I mean, the bundle you send to the client will be huge, but not your server!
  6. Client Components are client components: Find it confusing that Client Components render both on the server and on the client? With React SPA, client components are just client components.
  7. Simplified Deployment: Deploy your app anywhere that serves static files: a CDN, GitHub Pages, your cousin's Raspberry Pi. React SPA is ready to go.
  8. No Overhead: Why let a framework dictate your choices? React SPA encourages you to embrace freedom and handle routing, data fetching, and state management the way we did when AI was just Deep Learning.
  9. No separate server: Don't need a separate server just to render your React components.

See more reasons: Github

Can I Use React With an SSR Framework?

You can definitely use React with an SSR framework-that's how you'd use React if you followed the docs. However, if you're building an app or site fully with React, we recommend not using an SSR framework.

We can't stop you from using an SRR framework. We also can't stop you from making a mistake. But it's definitely valid to use React with a framework and it won't be deprecated anytime soon.

Here's why we recommend against SSR frameworks:

  1. Expensive Servers: SSR requires maintaining and scaling servers that are ready to render HTML on the fly. With React SPA, your app's only requirement is a static host and your user's patience while they wait for your giant bundle of Javascript.
  2. Too much magic: Magic surprises you then annoys you. Kent C Dodds agress that Next.js has too much Magic
  3. Complex rendering patterns: Trying to explain to a junior dev who passed the company's coding challenge by pasting the leetcode problem into ChatGPT can leave you questioning your life choices.
  4. Complex Build Systems: Frameworks often come with overly complicated build tools that make you spend hours debugging configurations instead of building features.
  5. Tool Incompatibilities: Many third-party libraries don't play nicely with SSR. Debugging why a package doesn't work when server rendering can be a nightmare.
  6. Frequent Breaking Changes: Frameworks come with a lot of features. SSR libraries are the bleading edge, reinventing APIs every other week often introducing breaking changes that force you to rewrite your app. Much like my sleep schedule.
  7. Minimal Gains: After investing weeks dealing with SSR complexity, you might save 50ms on load time. Was it worth it? (No really was it worth it? This isn't a joke, I don't know if SSR is worth it or not in 2025. Small downloads and faster load times seems good but at what cost.) React SPA simplifies this tradeoff by ignoring it.

If your app has unusual constraints not served well by building a simple React SPA, you can always pitch the power of an SSR framework. Roll into your manager's office and sell them on the idea. Grab Next.js from npm and set up your deployments with Vercel or an overpriced custom pipeline. Rest easy knowing everything you needed and didn't need is already included. Then enjoy debugging hydration errors and manually integrating every new library like a real 2025 dev.

Production-grade React: Getting Started with React SPA

Ready to start your journey? Here's a simple setup to kick off your React SPA project:

  1. Pick a Bundler: Choose Vite, Parcel, or your favorite bundler. Example with Vite:
    ssh
    1.npm create vite@latest my-react-spa --template react
    2.cd my-react-spa
    3.npm install
    4.npm run dev
  2. Choose Your Libraries:
  3. Deploy Anywhere:

    Use a static host like AWS, Netlify, Digital Ocean, or anywhere else that hosts simple static files.

Closing Thoughts

React SPA, the Framework is the ultimate solution to a problem the ecosystem created. It's lean, it's fast, and it gives you the freedom to build your app exactly how you want. If you really want SSR you can always roll your own custom solution. Or completely ignore this post and continue building awesome apps with React approved "production grade frameworks". The possibilities are endless.

React Docs Prouction Grade

Let me know in the comments what "Unusual Constraint" led you to consider building a React SPA!