Astro vs Next.js 2026：Islands 架构 vs React 服务器组件

Astro 和 Next.js 是 2026 年最流行的两个 Web 框架，但它们服务于根本不同的用例。Astro 以零 JS 默认方式和岛屿架构擅长内容驱动网站，而 Next.js 以其全面的 React 生态系统主导全栈 Web 应用。

架构概述

Astro：内容优先，岛屿架构

Astro 默认在构建时将页面渲染为静态 HTML，不向客户端发送 JavaScript。交互组件作为独立的"岛屿"加载并独立水合。

---
// src/pages/blog/[slug].astro
import Layout from "../../layouts/Layout.astro";
import { getEntry } from "astro:content";

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

<Layout title={post.data.title}>
  <article>
    <h1>{post.data.title}</h1>
    <time>{post.data.date.toLocaleDateString()}</time>
    <Content />

    <!-- This React component is an "island" -->
    <!-- Only its JS is loaded, not the whole page -->
    <LikeButton client:visible postId={post.id} />
  </article>
</Layout>

<!-- Result: Static HTML + minimal JS for the button only -->

Next.js：全栈 React 框架

Next.js 是一个全栈 React 框架，支持多种渲染策略：SSG、SSR、ISR 和 React 服务端组件（RSC）。

// app/blog/[slug]/page.tsx (Server Component by default)
import { notFound } from "next/navigation";
import { getPost } from "@/lib/posts";
import LikeButton from "@/components/LikeButton"; // Client Component

export default async function BlogPost({
  params,
}: {
  params: { slug: string };
}) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return (
    <article>
      <h1>{post.title}</h1>
      <time>{post.date}</time>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />

      {/* Client Component - includes its JS bundle */}
      <LikeButton postId={post.id} />
    </article>
  );
}

// Generate static params for SSG
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

性能比较

性能是架构差异最明显的地方。

岛屿架构 vs React 服务端组件

Astro 和 Next.js 都最小化客户端 JavaScript，但采用不同的方法。

Astro 岛屿

在 Astro 中，每个组件默认渲染为静态 HTML。使用 client:* 指令显式启用交互性。

---
// Astro islands with different hydration strategies
import ReactCounter from "../components/Counter.tsx";
import VueCarousel from "../components/Carousel.vue";
import SvelteForm from "../components/Form.svelte";
---

<!-- Load immediately -->
<ReactCounter client:load />

<!-- Load when browser is idle -->
<VueCarousel client:idle />

<!-- Load when visible in viewport (lazy) -->
<SvelteForm client:visible />

<!-- Load only on specific media query -->
<HeavyWidget client:media="(min-width: 768px)" />

<!-- No directive = static HTML only, zero JS -->
<StaticComponent />

React 服务端组件

在 Next.js 中，服务端组件在服务器上渲染。客户端组件用 "use client" 标记。

// Server Component (default - no "use client")
// Runs on server only, zero JS shipped
async function PostList() {
  const posts = await db.query("SELECT * FROM posts");
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <a href={`/blog/${post.slug}`}>{post.title}</a>
        </li>
      ))}
    </ul>
  );
}

// Client Component - JS is shipped to browser
"use client";
import { useState } from "react";

function LikeButton({ postId }: { postId: string }) {
  const [likes, setLikes] = useState(0);
  return (
    <button onClick={() => setLikes(l => l + 1)}>
      {likes} likes
    </button>
  );
}

使用场景

生态系统比较

Data Fetching

Both frameworks support server-side data fetching, but with different APIs and patterns.

Astro Data Fetching

---
// Astro: fetch data in the frontmatter (runs at build time or SSR)
const response = await fetch("https://api.example.com/posts");
const posts = await response.json();

// Content Collections: type-safe local content
import { getCollection } from "astro:content";
const blogPosts = await getCollection("blog", ({ data }) => {
  return data.draft !== true;  // filter drafts
});
---

<ul>
  {posts.map(post => (
    <li><a href={post.url}>{post.title}</a></li>
  ))}
</ul>

Next.js Data Fetching

// Next.js App Router: fetch in Server Components (default)
// Data is fetched on the server, HTML sent to client
export default async function PostsPage() {
  // Cached by default, revalidate every 60 seconds
  const response = await fetch("https://api.example.com/posts", {
    next: { revalidate: 60 },
  });
  const posts = await response.json();

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <a href={post.url}>{post.title}</a>
        </li>
      ))}
    </ul>
  );
}

// Dynamic data: no caching
// const res = await fetch(url, { cache: "no-store" });

// Static data: cached indefinitely
// const res = await fetch(url, { cache: "force-cache" });

Deployment Comparison

常见问题