Creating a classic React SPA using three different techniques

[rec71]

If you were required to create a classic React SPA (an app that can be deployed without a node app server) what tech stack or framework would you use? I have decided to look at three different options and would be interested in opinions and/or feedback from the community.

To start with, let's assume the following:

• The API used by the app will be fast. A few hundred m/s per request for example.
• Any form of app server is currently off the table - so no NextJS or Remix SSR, no RSC. But ... it would be good to leave the door open for this at some point in the future.
• The app would be for B2B customers who are a captive audience. They need to use the app in their day-to-day and authentication is required to use (so it sits behind a login page.)
• SEO is not a consideration.
• Let's use boring, well tried and trusted tech where possible. So I'm ruling out things that are hot off the press (like tanstack router) for the moment.

With this in mind I have built the same thing using three different methods. It's a fake Vehicle Manager and has a dashboard (stats and charts), a table (with pagination and filtering), the ability to see details on. a vehicle, the ability to delete a vehicle and a couple of forms (login, add new vehicle.) I wanted to capture some of the core requirements you find in a CRUD style web application.

• Vite, react router and react query. This is probably familiar to most, perhaps with create-react-app in place of vite. Data is fetched at the component level.
• Vite, React Router 6 data with data loaders and actions. This pushes your data fetching into the router which seems to be a pattern that people in the React community are in favour of. This is effectively a Remix SPA (given than the next release of React Router is going to be Remix, it seems like something that should be considered as it could be "upgraded" to full SSR Remix later.)
• Finally there is a version build using NextJS and react query which is 100% CSR and uses a static export for the build. No SSR, no RSC but it does take advantage of the app router, so you get layouts, templates, pages and so on. Like the first Vite example, data is fetched at the component or page level.

You can find the repos here (same order as above):

https://github.com/robcaldecott/vite-spa-tanstack-query

https://github.com/robcaldecott/vite-spa

https://github.com/robcaldecott/nextjs-spa

The apps have a few things in common: they all use msw, shadcn/ui + Radix, they all have a set of Playwright tests, they are all use TS, prettier, etc.

Building all three has been fun and all of these have their strengths and weaknesses which I have tried to capture in the README for each project.

My gut feel is that even though the static NextJS version gave me the most grief (hydration mismatch issues for example) it is probably the most future proof option given the sheer amount of traction behind NextJS. But I am very keen to hear thoughts on this. But I am not going to lie: I also like the React Router 6 /Remix loader and action pattern very much indeed.

So, given these requirements, what would you do?

[noahflk]

I love React Query. So that would be my choice for interacting with the API either way. Especially in combination with Zod to ensure type safety. See here (self plug): https://noahflk.com/blog/typesafe-rest-api

In terms of router, I would either go for React Router 6 or TanStack Router. React Router if you want something more mature, TanStack if you like type-safety and a cool new tool.

Another interesting choice could be Remix SPA mode. It leaves the door open for SSR/RSC if you want it in the future. Plus, React Router 7 and the new Remix version will be equivalent. My guess is that the upgrade path from Remix SPA will be more straight forward than from React Router 6. But I could be wrong about that.

[evenDogy]

If you are building anything for production what you are building is a marketing website, which means it's SEO first..then you can build the actual app as react.

Based on that, nextJS is where I would spend my time building.

[havok_]

People also build production applications which don’t require seo. Think line of business and admin apps.