Skip to content
ReactField

React FrameworksBeginner

React Frameworks Compared: Next.js, Remix, Vite, and More

React frameworks compared: Next.js, Remix, Vite, Astro, Expo, and Nx, with paths for SEO sites, SPAs, and monorepos.

Mohamed ElshahawyPublished Apr 2026Updated Oct 2026
4 min read

What you'll learn

  • Paths for auth SPAs, SEO sites, forms, content islands and multi-app monorepos
  • Match an app shape to Vite, Next, Astro, Expo or Nx
  • Build tools for 2026: Vite first, Biome or Oxlint
  • When SPAs still win and when server HTML matters

There are many React stacks to choose from. Optionality is useful until it becomes decision paralysis. This hub helps you pick a shape first, then a tool.

Use the stack picker when you know the product. Use the shape matcher when you only know the constraints. Child pages go deeper: Next.js, React Native, alternate stacks.

A single page app that assembles everything itself on the left, and a framework that brings routing, data and pre-rendered pages on the right
A single page app gives you React and a bundler. A framework adds routing, server rendering and data loading on top.

How to choose

  1. Ask if HTML must exist without client JS. Public SEO and social previews usually say yes.
  2. Ask if the product is behind login. Dashboards often stay as SPAs.
  3. Do not fight the framework. If you disagree with its defaults, pick another stack.
  4. Prefer boring defaults. Vite for SPAs. Next.js for most React SSR apps. Astro for content-first sites.

Read the official note on starting a new React project (opens in a new tab).

Hot take

You are not losing cool points if your app is still a React SPA. If the product lives behind authentication, a SPA is often the honest choice.

Pick a framework stack

Five short stacks on a desk: Vite SPA, Next SSR, forms framework, Astro islands and Nx multi-app
Pick a short stack that matches the product, not every option on the internet.

Try it: framework stack

Pick your product shape. You get an ordered stack, why it fits, and a first-week plan.

Goal

Your path

Vite SPA behind login is still a valid default

If almost everything sits behind authentication and SEO is not the product, a Vite React SPA avoids fighting a meta-framework.

  1. Vite

    Default SPA toolchain in 2026.

  2. Start a new React project

    Official guidance on when frameworks help.

  3. Bundle Size Optimization

    Keep first-load JS honest for the dashboard shell.

  4. Hidden Side of Frontend Deployments

    Hashed chunks and open-tab deploys still matter.

First week

Scaffold Vite + React + TypeScript. Add a router and one authenticated layout. Do not add SSR until a public page needs it.

Tip: do not fight the framework. If you disagree with its defaults, pick a different stack.

Checkpoint

An internal dashboard sits entirely behind login. SEO is not a goal. What is a valid default?

Match an app shape

App shape chips connected to stack cards for Vite, Next, Astro, Expo and Nx
Name the shape, then pick one primary stack.

Try it: match an app shape

Choose the shape you are building. The matcher points to a primary stack and an optional alternate.

Shape

The shape

Public pages need reliable HTML for crawlers and social previews.

Start here

Next.js

Next.js App Router is the common production default for React SSR and hybrid rendering.

Also consider

Astro

Astro wins when most routes are static content with a few React islands.

Related: React rendering strategies

Tip: SPAs are not obsolete. They are the wrong default only when public HTML and SEO are the product.

Key takeaway

Do not fight the framework. If you disagree with its defaults, choose a different stack.

Vanilla React SPAs

A React SPA can still be the right call when:

  • The app is lightweight and unlikely to need SSR
  • The team will own routing, data fetching and deploy details
  • Practically the entire product lives behind authentication

Introducing React into a legacy app is another good SPA reason: migrate slices first, then consider a meta-framework later.

Do not start new apps with Create React App. It is unmaintained. Use Vite (opens in a new tab) instead. Migration guide: CRA to Vite (opens in a new tab).

Left: browser builds the page from a JS bundle. Right: server sends HTML first, then hydrates
SPAs assemble UI in the browser. SSR sends HTML first. Pick based on who needs to read the page before JS runs.

Build tools

Whatever the tool, its output is hashed bundles and chunks. How you deploy them matters for users who already have the app open. See The Hidden Side of Frontend Deployments.

Current recommendations

Other strong options

Quick guide: start with Vite unless you have a strong reason not to. Pick Biome or Oxlint/Oxfmt for lint/format. Evaluate Rolldown as build needs scale.

Web frameworks and SSR

SSR and hybrid rendering grew because public sites need reliable HTML, faster first paint on slow networks, meaningful HTTP status codes and simpler social meta tags. Details live in React Rendering Strategies.

Next.js

Next.js (App Router) is the common production default for React apps that need SSR, SSG or streaming. Deeper notes: Next.js.

React Router and the Remix lineage

Remix popularized progressive enhancement and web-standard forms. Much of that lineage continues in React Router's framework mode. Prefer those patterns when mutations and progressive enhancement matter more than Vercel-specific defaults.

Gatsby (niche)

Gatsby remains a content-site option, but it is no longer a default recommendation for new React apps. Prefer Astro for content-first sites or Next for app + content hybrids.

Comparison

The table below still compares Gatsby, Next and Remix-era columns for historical context. Treat Gatsby as niche and Remix as the progressive-enhancement lineage that now overlaps React Router.

Good for:
Static websites, Content-driven websites, SEO-friendly websites, High-traffic sites w/ non-dynamic content (Blogs, Marketing, Portfolio, Documentation)
Static websites, SEO-friendly rendering, Fast dynamic apps/sites, SPAish Support (via export)
SEO-friendly rendering, Fast dynamic apps/sites, Deploying "to the edge"
Learning Resources
Gatsby Tutorial (opens in a new tab)
Getting Started With Gatsby (opens in a new tab)
Next.js Tutorial (opens in a new tab)
Remix Tutorial (opens in a new tab)
Up & Running With Remix by Kent C. Dodds (opens in a new tab)
Things To Be Aware Of
Mostly for SSG only.
Next.js strongly encourages a Node.js runtime to serve/run the app (not required if you do a static export). Gatsby and Remix do not.
Remix generally encourages you to move a lot of typical client-side "state" to the edge/server, sometimes removing the need to manage a "state" in the frontend altogether.
Remix generally encourages you to fetch data for your apps/components from the edge/server via "loader functions".
While the router / nested routes bring a big performance boost to your app, there's also a bit of a learning curve. This is a moot point if you're also considering the App Router in Next.js, as that also comes with a learning curve.
Remix doesn't support SSG (which in a lot of cases is probably fine if your goals are simply to deliver a fast user experience).
Commercially Backed By:
Netlify (opens in a new tab)
Vercel (opens in a new tab)
Shopify (opens in a new tab)

React Native

For iOS, Android and related targets, start with Expo (opens in a new tab). More tips: React Native.

High-performance content sites

For blogs, docs and marketing pages with sparse interactivity, look at Astro (opens in a new tab) (React islands) before shipping a full SPA runtime on every route.

Monorepo / Nx

Multiple apps that share UI and types belong in a monorepo with real tooling. Read Nx Introduction & Architecture.

Checkpoint

A docs site is mostly Markdown with two interactive widgets. What fits first?

The key habit

Choose the shape (public HTML vs behind login vs content vs multi-app) before collecting frameworks.

Frameworks checklist

  • I know whether public HTML and SEO are requirements
  • New SPAs use Vite, not CRA
  • SSR choice matches a real need, not a trend
  • Lint/format tooling is decided (Biome or Oxlint/Oxfmt)
  • Multi-app sharing has a monorepo plan
  • I am not fighting the framework defaults

Further reading

Conclusion

Frameworks are multipliers for a product shape. Pick the shape, pick a boring default, and invest in the product instead of reinventing routing and data loading.

SPAs are not obsolete. Meta-frameworks are not mandatory. Honesty about SEO, auth and content beats collecting logos.

The key takeaway

Match the stack to the shape. Vite for many SPAs, Next for most React SSR, Astro for content, Expo for native, Nx when sharing spans apps.

Check your understanding

Test yourself6 questionsQuestion 1 of 6

An internal dashboard is fully behind login. What is a valid default?

Recap

What to remember from this article

Sections read

0

Questions

0

none answered yet

Quiz

0

not taken yet

Up next: Next.js · 2 min

Continue