Astro 5 cho content sites: So sánh với Next.js

Astro đã trở thành lựa chọn hàng đầu cho content sites. Với Astro 5, framework này mature hơn bao giờ hết. Nhưng Next.js cũng rất mạnh cho content. Vậy khi nào chọn cái nào?

Astro 5 — Content Layer API

Killer feature của Astro 5 là Content Layer API mới — một cách thống nhất để load content từ bất kỳ nguồn nào: markdown files, CMS, database, API:

// src/content.config.ts
import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
    draft: z.boolean().default(false),
  }),
});

// Custom loader từ CMS
const products = defineCollection({
  loader: async () => {
    const res = await fetch("https://api.cms.com/products");
    const data = await res.json();
    return data.map((p) => ({ id: p.slug, ...p }));
  },
  schema: z.object({
    title: z.string(),
    price: z.number(),
    image: z.string().url(),
  }),
});

export const collections = { blog, products };

Type-safe, validated, và cached. Content Layer build thời gian gần như instant cho thousands of pages.

Zero JS by default — Sự khác biệt cốt lõi

Astro ship 0KB JavaScript mặc định. Mỗi page là pure HTML + CSS. Chỉ components được đánh dấu client:* mới gửi JS về browser.

Ngược lại, Next.js luôn ship React runtime (~80KB gzipped) + hydration code, dù page chỉ là static content.

Islands Architecture

Astro dùng Islands Architecture — mỗi interactive component là một "island" hydrate độc lập:

---
// src/pages/blog/[slug].astro
import Layout from "../../layouts/Layout.astro";
import CommentSection from "../../components/CommentSection.tsx";
import ShareButtons from "../../components/ShareButtons.tsx";
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>
    <Content />

    <!-- Island: chỉ phần này có JS -->
    <ShareButtons client:visible url={Astro.url.href} />

    <!-- Island: load khi user scroll tới -->
    <CommentSection client:visible postSlug={slug} />
  </article>
</Layout>

client:visible = lazy hydrate khi element xuất hiện trong viewport. Có thêm client:load, client:idle, client:media.

Khi nào chọn Astro?

Blogs, docs, marketing sites — Content-heavy, ít interactivity. Astro cho page speed gần như tối đa.

Portfolio, landing pages — Static content với vài interactive elements. Islands pattern hoàn hảo.

Multi-framework teams — Astro hỗ trợ React, Vue, Svelte, Solid cùng lúc. Migrate dần từ framework cũ.

Khi nào giữ Next.js?

Web apps phức tạp — Dashboards, e-commerce, SaaS. Nhiều interactivity, shared state, auth flows.

Full-stack features — Server Actions, middleware, API routes, streaming SSR. Next.js ecosystem mạnh hơn cho full-stack.

Real-time features — Chat, notifications, collaborative editing. Next.js + WebSocket dễ integrate hơn.

Performance so sánh thực tế

Với một blog 100 posts, Astro cho Lighthouse score 100/100 gần như mặc định. Next.js static export đạt 95-98, SSR pages thường 85-95. Khoảng cách lớn nhất ở Total Blocking Time — Astro gần 0ms vì không có JS runtime.

Kết luận

Astro 5 là lựa chọn tốt nhất cho content sites năm 2026. Nếu site chủ yếu là content với vài interactive elements, Astro cho performance và DX tốt hơn Next.js. Nhưng nếu bạn building web app phức tạp, Next.js vẫn là vua. Hai framework bổ sung nhau, không thay thế nhau.