Web
Next.js vs Astro vs React Router: How to Choose a Web Framework
Framework debates are mostly noise. Five questions about your product, team and hosting decide the right choice. Here is how we answer them.
By Prolificrew Engineering · · 4 min read
In this article
Choosing a web framework feels like a big, permanent decision. It is less permanent than it feels, but a poor fit does cost you months: slow pages, painful hiring, or a hosting bill nobody planned for. This guide compares three popular options for business websites and SaaS products: Next.js, Astro and React Router in its framework mode (the project Remix merged into).
Short answer: pick Astro for content-heavy sites that need to be extremely light, Next.js for products that mix marketing pages with a logged-in application, and React Router framework mode when you want a web-standards-first approach with strong data-loading conventions.
The five questions that actually decide it
- How interactive is the product? A brochure site with a blog needs almost no client-side JavaScript. A dashboard needs a lot.
- Where does the data come from, and how fresh must it be? Content that changes monthly can be pre-built. Per-user data must be fetched at request time or in the browser.
- Which skills does your team already have? A React team will be productive in all three, but a team with deep Next.js experience ships faster there.
- Where will it be hosted? A static export can sit on cheap shared hosting. Server rendering needs a Node runtime or an edge platform.
- How much does organic search matter? If search is a main acquisition channel, you want fast, fully rendered HTML for every page.
How the three compare
| Next.js | Astro | React Router (framework mode) | |
|---|---|---|---|
| Best for | Marketing site plus app in one codebase | Content, docs, blogs, marketing sites | Data-driven apps built on web standards |
| Default JavaScript | React runtime on interactive pages; Server Components reduce it | None for static content; hydrates only interactive “islands” | React runtime on every page |
| Rendering options | Static, server, incremental regeneration, client | Static by default, optional server rendering | Server rendering, static pre-rendering, client |
| Data handling | Server Components, route handlers, server actions | Fetch at build or request time; bring your own for apps | Route loaders and actions with form-first mutations |
| UI libraries | React | React, Vue, Svelte and others in one project | React |
| Hosting | Static export to any host; most features want a Node or edge runtime | Static to any host; adapters for server mode | Node or edge runtimes; static pre-rendering possible |
When Next.js is the right choice
Next.js is our default for products that need both public pages that rank in search and a logged-in application. You can pre-render marketing pages, server-render personalised pages, and share components, types and authentication between them. The ecosystem is the largest of the three, which matters for hiring, libraries and answers to obscure problems.
Its trade-offs are complexity and a faster-moving API surface. The App Router, Server Components and caching rules take time to learn, and upgrades occasionally change conventions. Teams that do not need those features can find it heavier than necessary.
When Astro is the right choice
Astro sends HTML and almost no JavaScript by default, then hydrates only the components you mark as interactive. For documentation, blogs, portfolios and marketing sites this produces excellent Core Web Vitals with very little effort. Content collections make Markdown-driven sites pleasant to maintain, and you can use React components where needed.
It is a weaker fit for highly interactive applications where most of the page is stateful. You can build them, but you will be fighting the grain of the framework.
When React Router framework mode is the right choice
React Router’s framework mode (the evolution of Remix) is built around web standards: forms, HTTP caching, and loaders and actions tied to routes. It is a good match for data-driven applications where you want predictable data flow and progressive enhancement, and for teams that already use React Router in the browser and want server rendering without changing mental models.
Static export versus server rendering
A static export (for Next.js, output: "export") pre-builds every page to plain HTML, CSS and JavaScript that any host can serve. It is cheap, fast and very safe. The cost is that anything personalised or frequently changing must be fetched in the browser or handled by a separate API. Our own marketing site is a static export deployed to shared hosting, with a small PHP endpoint for the contact form.
Server rendering gives you fresh, personalised HTML on every request, but you need a runtime to run it and you take on its operational cost. Many products do well with a hybrid: static pages for the public site and server rendering only where the data demands it.
A practical decision checklist
- Mostly content, few interactions, search matters → Astro (or Next.js static export).
- Public site plus authenticated app, one team, React everywhere → Next.js.
- Form-heavy, data-driven application with web-standards focus → React Router framework mode.
- Must run on low-cost shared hosting → a static export from any of them.
- Unsure → start with the one your team knows. The delivery speed of a familiar tool beats a theoretical advantage.
What matters more than the framework
A framework will not rescue a slow product on its own. The things that determine whether a site is fast and ranks well are the same everywhere: how much JavaScript you ship, how you load images and fonts, whether pages are fully rendered for crawlers, and whether the information architecture matches how people search. Our Core Web Vitals checklist and technical SEO checklist apply regardless of the framework you choose.
If you would like a recommendation for your specific product, we are happy to review your requirements and tell you which option we would pick and why, including when the answer is a different tool from the one we sell.