Next.js vs Remix vs Astro: Which Framework in 2025?

Three frameworks, three philosophies. Next.js is the React full-stack powerhouse. Remix (now React Router v7) is the progressive-enhancement idealist. Astro is the content-site speed champion that ships zero JavaScript by default. This guide breaks down exactly when to use each.

At a glance

How each framework works

Next.js: The full-stack Swiss Army knife

Next.js wraps React with a file-system router, two rendering modes (App Router with React Server Components, and the legacy Pages Router), and a suite of server features. The App Router (default since Next.js 13) treats components as server-rendered by default — they run on the server, access databases directly, and send HTML+RSC payload to the client.

// app/posts/[slug]/page.tsx — Server Component (no 'use client')
import { db } from '@/lib/db'

export default async function PostPage({ params }: { params: { slug: string } }) {
  // Direct DB access — runs on the server only
  const post = await db.post.findUnique({ where: { slug: params.slug } })
  return <article>{post?.content}</article>
}

// Server Action — form submitted without a separate API endpoint
async function likePost(formData: FormData) {
  'use server'
  const postId = formData.get('postId') as string
  await db.post.update({ where: { id: postId }, data: { likes: { increment: 1 } } })
}

Next.js strengths:

• Largest ecosystem (most tutorials, plugins, community answers)
• Native Vercel deployment (zero-config Edge, ISR, image optimisation)
• React Server Components — colocate DB queries with UI
• next/image, next/font, next/link for performance
• ISR (Incremental Static Regeneration) — pages rebuild in background

Remix / React Router v7: Progressive enhancement done right

Remix merged with React Router in late 2024. React Router v7 (previously Remix v2) introduces "framework mode" — you get Remix's loader/action model directly in the React Router package. The philosophy: forms work without JavaScript, and you build on top of web standards (Request/Response, FormData, URLSearchParams).

// app/routes/posts.$slug.tsx — loader fetches, action handles mutations
import { data, Form, useLoaderData } from 'react-router'
import { db } from '~/lib/db'
import type { Route } from './+types/posts.$slug'

export async function loader({ params }: Route.LoaderArgs) {
  const post = await db.post.findUnique({ where: { slug: params.slug } })
  if (!post) throw data('Not Found', { status: 404 })
  return { post }
}

export async function action({ request, params }: Route.ActionArgs) {
  const formData = await request.formData()
  await db.post.update({
    where: { slug: params.slug },
    data: { likes: { increment: 1 } },
  })
  return { ok: true }
}

export default function PostRoute({ loaderData }: Route.ComponentProps) {
  const { post } = loaderData
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      {/* Works without JavaScript — native form */}
      <Form method="post">
        <input type="hidden" name="intent" value="like" />
        <button type="submit">Like</button>
      </Form>
    </article>
  )
}

Remix strengths:

• Progressive enhancement — works without JS, enhanced with JS
• Nested routes with independent loaders (no waterfall fetching)
• Full-stack mutations via actions (no separate API layer)
• Automatic error boundaries at route level
• Runs on any runtime: Node.js, Cloudflare Workers, Deno, Bun

Astro: Ship less JavaScript, rank higher

Astro is an MPA (Multi-Page App) framework with an islands architecture. Pages are .astro files (HTML-like templates with frontmatter scripts) that render to static HTML by default. JavaScript is opt-in via client:* directives on interactive components — from any UI framework.

---
// src/pages/posts/[slug].astro — runs at build time (SSG) or request time (SSR)
import { getEntry, render } from 'astro:content'
import Layout from '@/layouts/BaseLayout.astro'

const { slug } = Astro.params
const post = await getEntry('blog', slug!)
const { Content } = await render(post)
---

<Layout title={post.data.title}>
  <article>
    <h1>{post.data.title}</h1>
    <Content />
  </article>
  <!-- Interactive island — loads React only for this component -->
  <LikeButton client:load postId={post.id} />
</Layout>

---
// Using multiple UI frameworks in one project
import ReactCounter from '@/components/Counter.tsx'   // React
import VueSearch from '@/components/Search.vue'        // Vue
import SvelteChart from '@/components/Chart.svelte'    // Svelte
---

<!-- Each island is independently hydrated -->
<ReactCounter client:visible />
<VueSearch client:idle />
<SvelteChart client:media="(min-width: 768px)" />

Astro strengths:

• Zero JS by default — perfect Lighthouse scores on content pages
• Framework-agnostic — use React, Vue, Svelte, or plain HTML
• Content Collections with type-safe frontmatter
• View Transitions API for SPA-like navigation
• Built-in Markdown + MDX support

Rendering strategies compared

Routing and nested layouts

All three use file-system routing, but with different conventions:

# Next.js App Router structure
app/
  layout.tsx          ← root layout
  page.tsx            ← /
  posts/
    layout.tsx        ← wraps all /posts/* routes
    page.tsx          ← /posts
    [slug]/
      page.tsx        ← /posts/my-post
      loading.tsx     ← skeleton while fetching
      error.tsx       ← error boundary

# Remix / React Router v7 structure
app/routes/
  _index.tsx          ← /
  posts._index.tsx    ← /posts  (dot = nested)
  posts.$slug.tsx     ← /posts/my-post

# Astro structure
src/pages/
  index.astro         ← /
  posts/
    index.astro       ← /posts
    [slug].astro      ← /posts/my-post

Data fetching patterns

// Next.js — Server Component with direct DB access
async function PostList() {
  const posts = await db.post.findMany({ orderBy: { date: 'desc' } })
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
}

// Next.js — cached fetch with revalidation
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 3600 }, // ISR: rebuild every hour
  })
  return res.json()
}

// Server Action — client mutation without API route
'use server'
async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  await db.post.create({ data: { title } })
  revalidatePath('/posts')
}

// Remix / React Router v7 — loader runs before render
export async function loader({ request }: Route.LoaderArgs) {
  const url = new URL(request.url)
  const page = Number(url.searchParams.get('page') ?? 1)
  const posts = await db.post.findMany({ skip: (page - 1) * 10, take: 10 })
  return { posts, page }
}

// Parallel data fetching — no waterfall
export async function loader() {
  const [posts, categories] = await Promise.all([
    db.post.findMany(),
    db.category.findMany(),
  ])
  return { posts, categories }
}

// Deferred (stream expensive data)
import { defer } from 'react-router'
export async function loader() {
  return defer({
    posts: db.post.findMany(),          // awaited immediately
    analytics: getSlowAnalytics(),      // streamed in background
  })
}

---
// Astro — frontmatter runs on server (build or request time)
import { getCollection } from 'astro:content'

const posts = await getCollection('blog', ({ data }) => !data.draft)
const sorted = posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
---

{sorted.map(post => (
  <article>
    <a href={`/posts/${post.slug}`}>{post.data.title}</a>
    <time>{post.data.date.toLocaleDateString()}</time>
  </article>
))}

Performance compared

Real-world bundle audit (blog homepage):

• Next.js App Router: ~94 KB JS (gzip)
• Remix: ~72 KB JS (gzip)
• Astro (no islands): ~4 KB JS (gzip)
• Astro (React island for search): ~52 KB JS (gzip, loads lazily)

Ecosystem and integrations

Next.js ecosystem

Remix / React Router v7 ecosystem

Astro ecosystem

Where each framework wins

Next.js wins for

Remix / React Router v7 wins for

Astro wins for

Full comparison table

Migration paths

Decision guide

Do you need React specifically?
  ├── No → Astro (use any framework or none)
  └── Yes →
      Is this a content/marketing/blog site?
        ├── Yes → Astro (React islands where needed)
        └── No (app / SaaS / e-commerce) →
            Do you care about progressive enhancement / Cloudflare?
              ├── Yes → Remix / React Router v7
              └── No → Next.js

Still unsure?
- Largest team / most hiring? → Next.js
- Best SEO with minimal JS? → Astro
- Web standards / edge-first? → Remix / React Router v7

Common mistakes

Next.js vs Remix vs Astro vs SvelteKit

FAQ

Q: Is Remix dead now that it merged with React Router?

No. Remix v2 features are now in React Router v7 under the "framework mode" (react-router.config.ts). The Remix team works on React Router v7. Existing Remix v2 apps migrate with minimal changes — mostly updating import paths. The brand "Remix" is being sunset in favour of "React Router", but the technology is very much alive and actively developed.

Q: Can I use Astro for a full SaaS app (not just content)?

Yes, but you'll write most of the app as interactive React/Vue/Svelte islands, which reduces Astro's main advantage (zero JS). For a dashboard or SaaS app with lots of client interactivity, Next.js or Remix will feel more natural. Astro's sweet spot is 80%+ static content with sprinkles of interactivity.

Q: Next.js App Router vs Pages Router — which should I use in 2025?

App Router for new projects. It's the Vercel-recommended default with React Server Components, built-in streaming, and Server Actions. Pages Router is stable and won't be removed, but receives minimal new features. The App Router learning curve is steeper (understanding RSC boundaries), but worth it for new projects.

Q: Which is best for SEO?

All three render HTML server-side, so search crawlers see content immediately. Astro ships the least JavaScript, which helps Core Web Vitals (especially INP and TBT). Next.js with ISR serves pre-built HTML instantly. In practice, any of the three will give you excellent SEO if you use their SSR/SSG modes correctly.

Q: Which framework deploys best to Cloudflare?

Remix / React Router v7 has the best Cloudflare Workers/Pages integration — it was designed with edge runtimes in mind and Cloudflare is a first-class deployment target. Astro also has an excellent @astrojs/cloudflare adapter. Next.js supports Cloudflare via the @opennextjs/cloudflare community adapter (not official).

Q: Should I learn Next.js, Remix, or Astro first?

If you're job hunting: Next.js (most jobs by far). If you're building a personal blog or marketing site: Astro (fastest and simplest). If you want to understand web fundamentals (HTTP, forms, progressive enhancement): Remix / React Router v7 (teaches you to think in web standards). All three are worth knowing — they solve different problems well.