หน้าแรกของคุณ

ใน React “page” คือ component — ฟังก์ชัน JavaScript ที่คืน JSX ใน Astro “page” คือไฟล์ .astro — เอกสาร HTML ที่มีบล็อก frontmatter JavaScript/TypeScript แบบ optional อยู่ที่บนสุดคั่นด้วย ---

anatomy สองโซนของไฟล์ .astro:

---                          ← fence open
// FRONTMATTER: runs on the server / at build time
// fetch data, compute values, import components
const title = "My Page";
---                          ← fence close
<!-- TEMPLATE: HTML + {expressions} -->
<html lang="en">
  <head><title>{title}</title></head>
  <body><h1>{title}</h1></body>
</html>

ทุกอย่างเหนือ --- ที่สองคือโค้ด Node.js ทุกอย่างด้านล่างคือ HTML template ที่ฝัง expression ด้วย {expr} ได้ — เหมือน JSX แต่ render ครั้งเดียวเป็น string ไม่มีการรันซ้ำใน browser

React page กับ Astro page

// src/app/page.tsx  (Next.js App Router)
interface PageProps {
  params: { slug: string };
}

export default function BlogPost({ params }: PageProps) {
  // Runs on server AND can re-run on client
  const publishedAt = new Date().toLocaleDateString();

  return (
    <article>
      <h1>My First Post</h1>
      <time>{publishedAt}</time>
      <p>Welcome to my blog built with React.</p>
    </article>
  );
}

---
// src/pages/blog/first-post.astro
// Runs ONLY on the server / at build time
const title = "My First Post";
const publishedAt = new Date().toLocaleDateString();
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
  </head>
  <body>
    <article>
      <h1>{title}</h1>
      <time>{publishedAt}</time>
      <p>Welcome to my blog built with Astro.</p>
    </article>
  </body>
</html>

มีสองสิ่งที่โดดเด่นทันที:

Astro page เป็นเอกสาร HTML ที่สมบูรณ์ — มี <html>, <head>, และ <body> React component คืน fragment; layout wrapper เพิ่ม shell ใน Astro, page รับผิดชอบเอกสารทั้งหมด (หรือมอบหมายให้ Layout component ที่ provide shell)
new Date() ใน frontmatter รันครั้งเดียวขณะ build — string ที่ได้ถูกฝังลงใน HTML ใน Next.js App Router โค้ดนี้ก็รันบน server เช่นกัน แต่ความแตกต่างสำคัญ: ใน Astro ไม่มี React runtime, ไม่มี hydration, และ date ไม่มีทางคำนวณซ้ำใน browser

การเพิ่ม style

Style ใน Astro page สามารถเป็น tag <style> inline ใน template — Astro scope style ให้กับ component โดยอัตโนมัติ เหมือน CSS Modules โดยไม่ต้อง configure:

---
const color = "#6366f1";
---
<h1>Hello</h1>
<style>
  /* This style is scoped to this component automatically */
  h1 { color: #6366f1; }
</style>

Global style ใส่ในไฟล์ CSS แยกต่างหากและ import ใน frontmatter:

---
import '../styles/global.css';
---

ตัวอย่างที่รันได้

Astro

---
const title = "My First Astro Page";
const author = "A React Developer";
const publishedAt = "2026-06-23";
const tags = ["astro", "web", "frontend"];
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <style>
      body {
        font-family: system-ui, sans-serif;
        max-width: 680px;
        margin: 0 auto;
        padding: 2rem 1.5rem;
        color: #1e293b;
      }
      .meta { color: #64748b; font-size: 0.875rem; margin-bottom: 1.5rem; }
      .tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
      .tag {
        background: #ede9fe;
        color: #5b21b6;
        padding: 0.2rem 0.7rem;
        border-radius: 999px;
        font-size: 0.75rem;
      }
    </style>
  </head>
  <body>
    <article>
      <h1>{title}</h1>
      <p class="meta">By {author} &middot; {publishedAt}</p>
      <p>
        This page was built with Astro. The frontmatter ran at build time —
        no JavaScript was shipped to the browser to render this content.
      </p>
      <p>
        The tags below are rendered with a <code>.map()</code> in the template.
        In React that would hydrate a component. Here it is pure HTML.
      </p>
      <div class="tags">
        {tags.map(tag => <span class="tag">#{tag}</span>)}
      </div>
    </article>
  </body>
</html>

เปิด tab Network ใน DevTools ของ browser — ไม่มี JavaScript bundle เลย .map() บน tags สร้าง element <span> สามอันขณะ build และหายไป