Astro renders pages to HTML with no client JavaScript unless you add an island with a client directive, which makes it a strong fit for content sites. Next.js is a React framework where pages are Server Components by default and interactive parts opt in with 'use client', which suits app-like products with logins and lots of state.
| Topic | Astro | Next.js |
|---|---|---|
| Default output | Static HTML, prerendered at build | Server rendered React; static export optional |
| Client JavaScript by default | None for Astro components | React runtime plus Client Components |
| Making a part interactive | client:load, client:idle, client:visible, client:media, client:only | 'use client' at the top of a file |
| UI frameworks | React, Preact, Svelte, Vue, SolidJS | React |
| Per-request rendering | Add an adapter, then prerender = false or output: 'server' | Built in when running next start |
| Deferred server parts | server:defer server islands | Server rendering streamed to the client |
| Hosting options | Any static host, or Node.js, Netlify, Vercel, Cloudflare adapters | Node.js server, Docker, static export or adapters |
Updated
Tick the needs that describe your project. Each one leans toward Astro or Next.js for a stated reason, and the tally below gives a starting recommendation, not a final verdict.
Astro: 0, Next.js: 0
Select the needs that apply to your project.
The heading and paragraph ship as plain HTML. Only the LikeButton loads JavaScript, and only once it scrolls into view.
---
// src/pages/post.astro
import LikeButton from "../components/LikeButton.jsx";
const title = "Hello from Astro";
---
<h1>{title}</h1>
<p>This text needs no JavaScript.</p>
<LikeButton client:visible />The page is a Server Component. The 'use client' file is the only part hydrated in the browser.
// app/post/page.tsx
import LikeButton from "./like-button";
export default function Page() {
return (
<>
<h1>Hello from Next.js</h1>
<p>This text is rendered on the server.</p>
<LikeButton />
</>
);
}
// app/post/like-button.tsx
"use client";
import { useState } from "react";
export default function LikeButton() {
const [likes, setLikes] = useState(0);
return <button onClick={() => setLikes(likes + 1)}>{likes} likes</button>;
}Run npx astro add node first. With output set to 'server', every page renders on request unless it exports prerender = true.
// astro.config.mjs
import { defineConfig } from "astro/config";
import node from "@astrojs/node";
export default defineConfig({
output: "server",
adapter: node({ mode: "standalone" }),
});An Astro component has a script fence at the top that runs only on the server, and a template below it. It never renders on the client: the result is HTML, produced at build time or on request.
When a part of the page needs to react to clicks, you drop in a component from React, Svelte, Vue or another supported framework and give it a client directive. Only that island loads JavaScript, and the directive decides when: at once, when the browser is idle, when it scrolls into view or when a media query matches.
In the Next.js App Router, layouts and pages are Server Components unless told otherwise. They can read databases and secrets directly, and their code is not sent to the browser.
Adding 'use client' to a file marks a boundary. That file, its imports and the components it renders go into the client bundle and are hydrated, so state, effects and event handlers work there.
If most pages are read rather than used, start with Astro. If most pages are used rather than read, or the team lives in React, start with Next.js. Mixed sites often run a marketing site in Astro and an app in Next.js on a subdomain.
Yes. After npx astro add react you can import a React component into an .astro page. Without a client directive it renders to static HTML only; add client:load or another directive to make it interactive.
No. With a server adapter installed, any page can opt out of prerendering with export const prerender = false, or you can set output: 'server' to render every page on request and prerender only the ones you choose.
They solve a similar problem from opposite directions. Astro starts from zero JavaScript and you add interactive islands. Next.js starts from server-rendered React and you mark the client parts. React Server Components themselves never ship their code to the browser.
Usually Astro, because a blog is mostly text and images that need no JavaScript. Next.js handles blogs well too, and is the easier pick if the blog sits inside a larger React app.
Usually Next.js. Signed-in screens with forms, live data and shared client state play to React's strengths, and Route Handlers sit in the same project.
Related: Vite vs Next.js, Next.js App Router, React Server Components, Svelte vs React, Next.js SEO.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.