Astro คืออะไร? สอน Static Site Generator สร้างเว็บไซต์เร็วที่สุดในปี 2026

ในยุคที่ความเร็วของเว็บไซต์ส่งผลโดยตรงต่อ SEO และ User Experience การเลือกวิธีสร้างเว็บไซต์ที่เหมาะสมจึงสำคัญมาก Static Site Generator (SSG) เป็นแนวทางที่กลับมาได้รับความนิยมอีกครั้งในปี 2026 โดยเฉพาะ Astro framework ที่ออกแบบมาเพื่อสร้างเว็บไซต์ที่เน้นเนื้อหา (content-first) ด้วยประสิทธิภาพสูงสุดและส่ง JavaScript น้อยที่สุดไปยัง browser

บทความนี้จะพาคุณเข้าใจ Static Site Generation อย่างลึกซึ้ง ตั้งแต่หลักการพื้นฐาน เปรียบเทียบ SSG กับ SSR, CSR, ISR ไปจนถึงการใช้งาน Astro framework อย่างครบถ้วน รวมถึง Islands Architecture, Content Collections, การ deploy และการเชื่อมต่อ Headless CMS เพื่อให้คุณสามารถสร้างเว็บไซต์ที่เร็วที่สุดในปี 2026 ได้จริง

Static Site Generation (SSG) คืออะไร?

Static Site Generation คือกระบวนการสร้างหน้าเว็บ HTML ล่วงหน้าในตอน Build Time แทนที่จะสร้างแบบ Dynamic ทุกครั้งที่มี Request เข้ามา เมื่อ User เปิดเว็บไซต์ Server จะส่งไฟล์ HTML ที่สร้างเสร็จแล้วกลับไปทันที โดยไม่ต้องประมวลผล Database หรือ Server-side Logic ใดๆ

หลักการทำงานของ SSG มีขั้นตอนดังนี้ เริ่มจากนักพัฒนาเขียน Content ในรูปแบบ Markdown, MDX หรือ CMS จากนั้น SSG จะอ่าน Content เหล่านี้และแปลงเป็นไฟล์ HTML สำเร็จรูปพร้อม CSS และ JavaScript ที่จำเป็น ไฟล์เหล่านี้ถูก Deploy ไปยัง CDN หรือ Static Hosting โดยตรง เมื่อ User เข้าชมเว็บไซต์ CDN จะส่ง HTML กลับไปทันทีโดยไม่ต้องรอ Server ประมวลผล ทำให้เว็บไซต์โหลดเร็วมากเป็นพิเศษ

ข้อดีสำคัญของ SSG คือความเร็วในการโหลดเว็บที่เหนือกว่าทุกแนวทาง เนื่องจากไม่มี Server-side Processing ในแต่ละ Request นอกจากนี้ยังมีความปลอดภัยสูงเพราะไม่มี Database หรือ Server Logic ที่จะถูกโจมตี ค่าใช้จ่ายต่ำเพราะสามารถ Host บน CDN ได้ฟรีหรือราคาถูก และยังดีต่อ SEO เพราะ Search Engine สามารถ Crawl HTML ที่สมบูรณ์ได้ทันที

เปรียบเทียบ SSG vs SSR vs CSR vs ISR

ก่อนที่จะลงลึกเรื่อง Astro มาทำความเข้าใจวิธีการ Render เว็บไซต์แต่ละแบบกันก่อน เพราะแต่ละวิธีมีข้อดีข้อเสียต่างกัน และเหมาะกับ Use Case ที่แตกต่างกัน

Client-Side Rendering (CSR)

CSR คือวิธีที่ Browser รับ HTML เปล่า (แทบไม่มีเนื้อหา) พร้อม JavaScript Bundle ขนาดใหญ่ จากนั้น JavaScript จะทำงานใน Browser เพื่อสร้างเนื้อหาทั้งหมด ตัวอย่างเช่น React SPA (Single Page Application) แบบดั้งเดิม ข้อเสียคือ Initial Load ช้าเพราะต้องดาวน์โหลดและรัน JavaScript ก่อน SEO ก็ไม่ดีเท่าที่ควรเพราะ Bot อาจไม่เห็นเนื้อหา และ User จะเห็นหน้าจอขาวก่อนที่ JavaScript จะทำงานเสร็จ ข้อดีคือเหมาะกับ Web Application ที่มี Interactivity สูงมากเช่น Dashboard หรือ Admin Panel

Server-Side Rendering (SSR)

SSR คือการที่ Server สร้าง HTML ใหม่ทุกครั้งที่มี Request เข้ามา Server จะดึงข้อมูลจาก Database ประมวลผล Template และส่ง HTML ที่สมบูรณ์กลับไป ข้อดีคือเนื้อหาเป็นปัจจุบันเสมอและดีต่อ SEO ข้อเสียคือ Server ต้องทำงานทุก Request ทำให้ช้ากว่า SSG และต้องมี Server คอยรันอยู่ตลอดเวลา ค่าใช้จ่ายจึงสูงกว่า เหมาะกับเว็บที่เนื้อหาเปลี่ยนแปลงบ่อยมากและต้องการข้อมูล Real-time เช่น เว็บ E-commerce ที่ราคาสินค้าเปลี่ยนทุกนาที

Incremental Static Regeneration (ISR)

ISR เป็นแนวทางผสมระหว่าง SSG และ SSR ที่ Next.js นำเสนอ หน้าเว็บจะถูก Build เป็น Static HTML เหมือน SSG แต่สามารถตั้งเวลา Revalidate ได้ เช่น ทุก 60 วินาที เมื่อ HTML เก่าเกินเวลาที่กำหนด Server จะสร้าง HTML ใหม่ใน Background และ User คนถัดไปจะได้รับ HTML ที่อัปเดตแล้ว ข้อดีคือได้ความเร็วของ SSG ร่วมกับความสดใหม่ของเนื้อหา ข้อเสียคือ Complexity สูงขึ้นและต้องมี Server รองรับ

Astro Framework คืออะไร?

Astro เป็น Web Framework ยุคใหม่ที่ออกแบบมาเพื่อสร้างเว็บไซต์ที่เน้นเนื้อหา (Content-Driven Websites) ด้วยปรัชญาหลักที่ว่า "Ship Less JavaScript" คือส่ง JavaScript ไปยัง Browser ให้น้อยที่สุดเท่าที่จะเป็นไปได้ ในขณะที่ Framework อื่นๆ อย่าง Next.js หรือ Nuxt.js จะส่ง JavaScript ทั้ง Framework ไปยัง Browser เสมอ Astro จะส่งเฉพาะ JavaScript ที่จำเป็นต่อ Interactivity เท่านั้น ทำให้เว็บไซต์ที่สร้างด้วย Astro มีขนาดเล็กและโหลดเร็วกว่ามาก

จุดเด่นที่สำคัญของ Astro ได้แก่ Zero JavaScript by Default ซึ่งหมายความว่า Astro จะไม่ส่ง JavaScript ไปยัง Browser เลยถ้าหน้าเว็บนั้นไม่ต้องการ Interactivity นอกจากนี้ยังเป็น Framework Agnostic สามารถใช้ React, Vue, Svelte, Solid, Preact หรือ Lit ร่วมกันในโปรเจกต์เดียวได้ และมี Islands Architecture ที่เป็นนวัตกรรมการ Render แบบใหม่ที่จะอธิบายในหัวข้อถัดไป

Islands Architecture คือแนวคิดอะไร?

Islands Architecture เป็นแนวคิดที่ Jason Miller (ผู้สร้าง Preact) เสนอขึ้นมา โดยมองหน้าเว็บเป็น "ทะเล" ของ Static HTML ที่มี "เกาะ" (Islands) ของ Interactive Components กระจายอยู่ แทนที่จะทำให้ทั้งหน้าเว็บเป็น Interactive ด้วย JavaScript (เหมือน SPA) Astro จะ Hydrate เฉพาะ Component ที่ต้องการ Interactivity เท่านั้น

ตัวอย่างเช่น หน้า Blog Post อาจมีเนื้อหาบทความที่เป็น Static HTML ทั้งหมด (ไม่ต้องใช้ JavaScript) แต่มี Image Carousel หนึ่งอันและ Comment Form อีกอันที่ต้องการ JavaScript ในกรณีนี้ Astro จะส่ง JavaScript เฉพาะสำหรับ Carousel และ Comment Form เท่านั้น ไม่ใช่ทั้งหน้า ทำให้ประหยัด Bandwidth และโหลดเร็วขึ้นมาก

Astro ใช้ Client Directives เพื่อควบคุมว่า Island แต่ละอันจะ Hydrate เมื่อไหร่ โดยมี Directive ให้เลือกหลายแบบ ได้แก่ client:load จะ Hydrate ทันทีที่หน้าโหลดเสร็จ เหมาะกับ Component ที่ต้องใช้งานทันที client:idle จะ Hydrate เมื่อ Browser ว่าง เหมาะกับ Component ที่ไม่เร่งด่วน client:visible จะ Hydrate เมื่อ Component เลื่อนเข้ามาในจอ เหมาะกับ Component ที่อยู่ด้านล่างของหน้า client:media จะ Hydrate เมื่อ Media Query ตรง เช่น เฉพาะหน้าจอมือถือ และ client:only จะ Render เฉพาะฝั่ง Client โดยไม่ทำ SSR

---
// ตัวอย่าง Astro Component ที่ใช้ Islands
import StaticHeader from '../components/Header.astro';
import ReactCarousel from '../components/Carousel.jsx';
import VueComments from '../components/Comments.vue';
import SvelteSearch from '../components/Search.svelte';
---

<StaticHeader />  <!-- Static HTML ไม่มี JS -->

<article>
  <h1>บทความนี้เป็น Static HTML</h1>
  <p>เนื้อหาทั้งหมดเป็น HTML ล้วนๆ ไม่ต้องใช้ JavaScript</p>
</article>

<!-- Islands: เฉพาะส่วนที่ต้อง Interactive -->
<ReactCarousel client:visible />
<VueComments client:idle />
<SvelteSearch client:load />

เริ่มต้นใช้งาน Astro

การติดตั้งและสร้างโปรเจกต์

# สร้างโปรเจกต์ใหม่
npm create astro@latest my-astro-site
cd my-astro-site

# เลือก Template:
# - Empty: เริ่มจากศูนย์
# - Blog: Template สำหรับ Blog
# - Starlight: Template สำหรับ Documentation

# รัน Development Server
npm run dev

# Build สำหรับ Production
npm run build

# Preview Production Build
npm run preview

โครงสร้างโปรเจกต์ Astro

my-astro-site/
├── src/
│   ├── components/        # Astro/React/Vue/Svelte components
│   │   ├── Header.astro
│   │   ├── Footer.astro
│   │   └── Card.astro
│   ├── content/           # Content Collections (Markdown/MDX)
│   │   ├── config.ts      # Collection schema
│   │   └── blog/
│   │       ├── post-1.md
│   │       └── post-2.mdx
│   ├── layouts/           # Page layouts
│   │   └── BaseLayout.astro
│   ├── pages/             # File-based routing
│   │   ├── index.astro    # → /
│   │   ├── about.astro    # → /about
│   │   └── blog/
│   │       ├── index.astro      # → /blog
│   │       └── [...slug].astro  # → /blog/post-1
│   └── styles/            # Global styles
│       └── global.css
├── public/                # Static assets (images, fonts)
├── astro.config.mjs       # Astro configuration
├── tsconfig.json
└── package.json

Astro Components (.astro files)

ไฟล์ .astro เป็นหัวใจหลักของ Astro มีโครงสร้างคล้ายกับ HTML แต่มีส่วน Frontmatter (code fence) ด้านบนสำหรับเขียน JavaScript/TypeScript ที่รันเฉพาะตอน Build Time เท่านั้น ไม่ส่งไปยัง Browser

---
// Frontmatter: รันตอน Build Time เท่านั้น
// สามารถ import, fetch data, กำหนดตัวแปร ได้ที่นี่

import BaseLayout from '../layouts/BaseLayout.astro';
import Card from '../components/Card.astro';

const pageTitle = "หน้าแรก";
const allPosts = await Astro.glob('../content/blog/*.md');
const featuredPosts = allPosts
  .sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date))
  .slice(0, 3);

// Fetch ข้อมูลจาก API ตอน Build
const response = await fetch('https://api.example.com/data');
const data = await response.json();
---

<BaseLayout title={pageTitle}>
  <h1>{pageTitle}</h1>

  <!-- Loop ผ่านข้อมูล -->
  <div class="grid">
    {featuredPosts.map((post) => (
      <Card
        title={post.frontmatter.title}
        url={post.url}
        description={post.frontmatter.description}
      />
    ))}
  </div>

  <!-- Conditional Rendering -->
  {data.length > 0 && <p>มีข้อมูล {data.length} รายการ</p>}
</BaseLayout>

<style>
  /* Scoped CSS - ใช้เฉพาะ Component นี้ */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
  }
  h1 {
    color: #1e293b;
    font-size: 2.5rem;
  }
</style>

สิ่งสำคัญที่ต้องเข้าใจคือ Code ในส่วน Frontmatter (ระหว่าง ---) จะรันเฉพาะตอน Build Time เท่านั้น ไม่ถูกส่งไปยัง Browser ดังนั้นจึงสามารถเรียก API, อ่านไฟล์, หรือเข้าถึง Database ได้อย่างปลอดภัยโดยไม่เปิดเผยข้อมูลลับ

Content Collections — จัดการเนื้อหาอย่างเป็นระบบ

Content Collections เป็นฟีเจอร์ที่ทรงพลังของ Astro สำหรับจัดการเนื้อหาแบบ Type-safe โดยสามารถกำหนด Schema ของ Frontmatter ได้ด้วย Zod ทำให้มั่นใจว่าเนื้อหาทุกชิ้นมี Metadata ครบถ้วนและถูกต้องตาม Format ที่กำหนด

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

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.date(),
    author: z.string().default('SiamCafe'),
    tags: z.array(z.string()),
    image: z.string().optional(),
    draft: z.boolean().default(false),
  }),
});

const docsCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    order: z.number(),
    category: z.string(),
  }),
});

export const collections = {
  blog: blogCollection,
  docs: docsCollection,
};

---
// src/content/blog/my-first-post.md
title: "บทความแรกของผม"
description: "เรียนรู้ Astro ตั้งแต่เริ่มต้น"
date: 2026-04-08
author: "SiamCafe"
tags: ["astro", "web", "tutorial"]
image: "/images/first-post.jpg"
draft: false
---

# เนื้อหาบทความ

เขียนเนื้อหาด้วย **Markdown** ได้ตามปกติ

## หัวข้อย่อย

- รายการที่ 1
- รายการที่ 2

```javascript
// สามารถใส่ Code Block ได้
console.log("Hello Astro!");
```

---
// src/pages/blog/[...slug].astro
// Dynamic Route สำหรับแสดง Blog Post
import { getCollection } from 'astro:content';
import BlogLayout from '../../layouts/BlogLayout.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog', ({ data }) => !data.draft);
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<BlogLayout title={post.data.title}>
  <h1>{post.data.title}</h1>
  <time>{post.data.date.toLocaleDateString('th-TH')}</time>
  <Content />
</BlogLayout>

Astro กับ Framework อื่น — ใช้ร่วมกันได้

จุดเด่นที่สำคัญของ Astro คือความเป็น Framework Agnostic หมายความว่าคุณสามารถใช้ React, Vue, Svelte, Solid, Preact หรือ Lit ภายในโปรเจกต์ Astro ได้โดยไม่ต้องเลือกอย่างใดอย่างหนึ่ง แม้แต่ใช้หลาย Framework พร้อมกันในหน้าเดียวกัน

# ติดตั้ง Integration สำหรับ Framework ที่ต้องการ
npx astro add react       # เพิ่ม React support
npx astro add vue         # เพิ่ม Vue support
npx astro add svelte      # เพิ่ม Svelte support
npx astro add solid-js    # เพิ่ม SolidJS support
npx astro add preact      # เพิ่ม Preact support

---
// src/pages/mixed.astro — ใช้หลาย Framework ในหน้าเดียว
import ReactCounter from '../components/Counter.jsx';
import VueModal from '../components/Modal.vue';
import SvelteAccordion from '../components/Accordion.svelte';
---

<h1>ใช้หลาย Framework ร่วมกัน</h1>

<!-- React component ที่ต้อง Interactive -->
<ReactCounter client:visible initialCount={0} />

<!-- Vue component -->
<VueModal client:idle title="ยืนยันการดำเนินการ" />

<!-- Svelte component -->
<SvelteAccordion client:load items={[
  { title: 'คำถามที่ 1', content: 'คำตอบที่ 1' },
  { title: 'คำถามที่ 2', content: 'คำตอบที่ 2' },
]} />

Astro Starlight — สร้าง Documentation Site

Starlight เป็น Official Theme ของ Astro สำหรับสร้างเว็บ Documentation อย่างมืออาชีพ คล้ายกับ Docusaurus หรือ VitePress แต่สร้างด้วย Astro ทำให้ได้ประสิทธิภาพที่ดีกว่ามาก มีฟีเจอร์ครบเช่น Sidebar Navigation, Full-text Search, Dark Mode, i18n, Syntax Highlighting และ Versioning

# สร้าง Starlight Documentation Site
npm create astro@latest -- --template starlight

# โครงสร้างโปรเจกต์
my-docs/
├── src/
│   └── content/
│       └── docs/
│           ├── index.mdx           # หน้าแรก
│           ├── getting-started.mdx
│           ├── guides/
│           │   ├── installation.mdx
│           │   └── configuration.mdx
│           └── reference/
│               └── api.mdx
├── astro.config.mjs
└── package.json

// astro.config.mjs สำหรับ Starlight
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'My Documentation',
      social: {
        github: 'https://github.com/my-project',
      },
      sidebar: [
        {
          label: 'เริ่มต้นใช้งาน',
          items: [
            { label: 'บทนำ', link: '/' },
            { label: 'ติดตั้ง', link: '/guides/installation' },
          ],
        },
        {
          label: 'Reference',
          autogenerate: { directory: 'reference' },
        },
      ],
      locales: {
        root: { label: 'ไทย', lang: 'th' },
        en: { label: 'English', lang: 'en' },
      },
    }),
  ],
});

Astro DB — ฐานข้อมูลในตัว

Astro DB เป็นฟีเจอร์ที่เพิ่มความสามารถในการจัดการข้อมูลแบบ SQL Database ให้กับ Astro โดยใช้ libSQL (fork ของ SQLite) เป็น Engine เบื้องหลัง สามารถใช้ได้ทั้งแบบ Local Development และ Hosted บน Astro Studio

# ติดตั้ง Astro DB
npx astro add db

// db/config.ts — กำหนด Schema
import { defineDb, defineTable, column } from 'astro:db';

const Comment = defineTable({
  columns: {
    id: column.number({ primaryKey: true }),
    postSlug: column.text(),
    author: column.text(),
    body: column.text(),
    createdAt: column.date({ default: new Date() }),
  },
});

const PageView = defineTable({
  columns: {
    id: column.number({ primaryKey: true }),
    path: column.text(),
    count: column.number({ default: 0 }),
  },
});

export default defineDb({
  tables: { Comment, PageView },
});

---
// ใช้งาน Astro DB ใน Component
import { db, Comment } from 'astro:db';
import { desc } from 'astro:db';

const comments = await db
  .select()
  .from(Comment)
  .where(eq(Comment.postSlug, 'my-post'))
  .orderBy(desc(Comment.createdAt))
  .limit(10);
---

<ul>
  {comments.map((c) => (
    <li>
      <strong>{c.author}</strong>: {c.body}
    </li>
  ))}
</ul>

View Transitions — เปลี่ยนหน้าแบบ SPA

Astro มี Built-in View Transitions ที่ทำให้การเปลี่ยนหน้าราบรื่นเหมือน SPA โดยไม่ต้องใช้ JavaScript Framework ใดๆ เพิ่มเติม ใช้ View Transitions API ของ Browser โดยตรง ทำให้ได้ Animation ที่ลื่นไหลระหว่างการนำทาง

---
// src/layouts/BaseLayout.astro
import { ViewTransitions } from 'astro:transitions';
---

<html>
<head>
  <ViewTransitions />  <!-- เพิ่มบรรทัดนี้ -->
</head>
<body>
  <nav transition:persist>
    <!-- Navigation คงอยู่ระหว่างเปลี่ยนหน้า -->
  </nav>

  <main transition:animate="slide">
    <slot />
  </main>
</body>
</html>

View Transitions ใน Astro รองรับ Animation หลายแบบ ได้แก่ fade สำหรับ Fade in/out, slide สำหรับ Slide จากขวา, morph สำหรับเปลี่ยนรูปร่าง Element ระหว่างหน้า นอกจากนี้ยังมี transition:persist ที่ทำให้ Component บางตัวคงอยู่ระหว่างเปลี่ยนหน้า เช่น Music Player หรือ Video ที่กำลังเล่นอยู่

SSG ตัวเลือกอื่นๆ ที่น่าสนใจ

นอกจาก Astro แล้ว ยังมี SSG อื่นๆ ที่เป็นที่นิยมในปี 2026 แต่ละตัวมีจุดเด่นที่แตกต่างกันไป

Hugo

Hugo เขียนด้วย Go ทำให้ Build เร็วมากที่สุดในบรรดา SSG ทั้งหมด สามารถ Build หน้าเว็บหลายพันหน้าภายในไม่กี่วินาที เหมาะกับ Blog และ Documentation ขนาดใหญ่ แต่ Template Engine ใช้ Go Templates ซึ่งมี Learning Curve สูงและไม่เป็นมิตรกับผู้เริ่มต้น ไม่รองรับ JavaScript Framework โดยตรง

Jekyll

Jekyll เป็น SSG รุ่นบุกเบิกที่สร้างด้วย Ruby เป็น SSG แรกที่ GitHub Pages รองรับ มี Theme และ Plugin มากมาย เหมาะกับ Blog ส่วนตัว แต่ Build ช้ากว่า Hugo และ Astro มาก และ Ruby Ecosystem ไม่เป็นที่นิยมในกลุ่ม Frontend Developer ยุคใหม่

Eleventy (11ty)

Eleventy เป็น SSG ที่เรียบง่ายและยืดหยุ่น เขียนด้วย Node.js รองรับ Template Engine หลายตัว (Nunjucks, Liquid, EJS, Handlebars, Pug) เน้นความเรียบง่ายและไม่ผูกติดกับ Framework ใด เหมาะกับคนที่ต้องการ SSG แบบ Minimal และควบคุมได้ทุกอย่าง

Gatsby

Gatsby เป็น SSG ที่สร้างบน React มี Plugin Ecosystem ใหญ่มากและมี GraphQL Data Layer แต่ในปี 2026 ความนิยมลดลงมากเนื่องจาก Build ช้า ซับซ้อนเกินไป และ Netlify ซื้อกิจการไปแล้วทำให้การพัฒนาชะลอตัว คนส่วนใหญ่ย้ายไปใช้ Astro หรือ Next.js แทน

Astro vs Next.js vs Nuxt — เลือกอะไรดี?

คำถามที่พบบ่อยที่สุดคือควรเลือก Astro, Next.js หรือ Nuxt สำหรับโปรเจกต์ใหม่ คำตอบขึ้นอยู่กับประเภทของเว็บไซต์ที่ต้องการสร้าง

ถ้าเว็บไซต์ของคุณเป็นแบบ Content-First เช่น Blog, Documentation, Landing Page, Portfolio หรือ Marketing Site ที่เนื้อหาสำคัญกว่า Interactivity ให้เลือก Astro เพราะจะได้ประสิทธิภาพที่ดีที่สุดและ JavaScript Bundle ที่เล็กที่สุด

ถ้าเว็บไซต์ของคุณเป็น Web Application ที่มี Interactivity สูง เช่น Dashboard, Social Media, E-commerce ที่ต้อง Login Filter Search ซับซ้อน ให้เลือก Next.js (สำหรับ React) หรือ Nuxt (สำหรับ Vue) เพราะรองรับ SSR, API Routes, Middleware และ State Management ได้ครบกว่า

ข้อดีของ Astro เมื่อเทียบกับ Next.js คือ Astro ส่ง JavaScript น้อยกว่ามาก (โดยเฉพาะกับ Content Sites) สามารถใช้ Component จากหลาย Framework ร่วมกัน ไม่ผูกติดกับ React ตั้งค่าง่ายกว่าสำหรับ Static Sites และ Build Output มีขนาดเล็กกว่ามาก ข้อดีของ Next.js คือ Full-stack Framework รองรับ SSR SSG ISR ครบ มี API Routes, Middleware, Server Actions และ Ecosystem ของ React ที่ใหญ่มหาศาล

การ Deploy เว็บไซต์ Astro

เว็บไซต์ที่สร้างด้วย Astro สามารถ Deploy ได้หลากหลายแพลตฟอร์ม ทั้งแบบ Static Hosting และ Server-side Rendering

Vercel

# ติดตั้ง Vercel Adapter
npx astro add vercel

# Deploy
npm i -g vercel
vercel

Netlify

# ติดตั้ง Netlify Adapter
npx astro add netlify

# Deploy
npm i -g netlify-cli
netlify deploy --prod

Cloudflare Pages

# ติดตั้ง Cloudflare Adapter
npx astro add cloudflare

# Deploy ผ่าน Wrangler CLI
npm i -g wrangler
wrangler pages deploy dist/

GitHub Pages (ฟรี)

# astro.config.mjs
export default defineConfig({
  site: 'https://username.github.io',
  base: '/my-repo',
});

# สร้าง .github/workflows/deploy.yml
# ใช้ GitHub Actions สำหรับ Auto Deploy

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist/

  deploy:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
    steps:
      - uses: actions/deploy-pages@v4

SEO Optimization กับ SSG

SSG มีข้อได้เปรียบด้าน SEO มากกว่าวิธีอื่นเนื่องจากส่ง HTML ที่สมบูรณ์ให้ Search Engine ทันที แต่ก็ยังมีเทคนิคเพิ่มเติมที่ควรทำเพื่อให้ได้ผลลัพธ์ SEO ที่ดีที่สุด

---
// src/components/SEO.astro
const {
  title,
  description,
  image = '/default-og.jpg',
  url = Astro.url,
  type = 'website',
} = Astro.props;

const canonicalURL = new URL(url, Astro.site);
---

<!-- Primary Meta Tags -->
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />
<link rel="canonical" href={canonicalURL} />

<!-- Open Graph -->
<meta property="og:type" content={type} />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image, Astro.site)} />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={new URL(image, Astro.site)} />

นอกจากนี้ควรสร้าง Sitemap ด้วย @astrojs/sitemap Integration สร้าง RSS Feed ด้วย @astrojs/rss ใช้ Structured Data (JSON-LD) สำหรับทุกหน้า ตั้ง rel="canonical" ทุกหน้าเพื่อป้องกัน Duplicate Content และใช้ robots.txt ควบคุมการ Crawl ของ Search Engine

Headless CMS Integration — เชื่อมต่อระบบจัดการเนื้อหา

แม้ Astro จะรองรับ Markdown/MDX ได้ดี แต่สำหรับทีมที่มีคนเขียนเนื้อหาที่ไม่คุ้นเคยกับ Code การใช้ Headless CMS จะทำให้สะดวกกว่ามาก Headless CMS คือระบบจัดการเนื้อหาที่มีแต่ Backend (API) โดยไม่มี Frontend ของตัวเอง ทำให้ Frontend อย่าง Astro เรียกข้อมูลผ่าน API ได้อย่างอิสระ

Strapi (Open Source)

---
// ดึงข้อมูลจาก Strapi ตอน Build Time
const response = await fetch('http://localhost:1337/api/articles?populate=*');
const { data } = await response.json();

const articles = data.map(item => ({
  title: item.attributes.title,
  content: item.attributes.content,
  image: item.attributes.image.data.attributes.url,
  slug: item.attributes.slug,
}));
---

{articles.map(article => (
  <article>
    <h2><a href={`/blog/${article.slug}`}>{article.title}</a></h2>
    <img src={article.image} alt={article.title} />
  </article>
))}

Contentful

---
import contentful from 'contentful';

const client = contentful.createClient({
  space: import.meta.env.CONTENTFUL_SPACE_ID,
  accessToken: import.meta.env.CONTENTFUL_ACCESS_TOKEN,
});

const entries = await client.getEntries({
  content_type: 'blogPost',
  order: '-fields.publishDate',
});
---

{entries.items.map(post => (
  <div>
    <h2>{post.fields.title}</h2>
    <p>{post.fields.excerpt}</p>
  </div>
))}

Sanity

---
import { createClient } from '@sanity/client';

const sanity = createClient({
  projectId: import.meta.env.SANITY_PROJECT_ID,
  dataset: 'production',
  apiVersion: '2026-04-08',
  useCdn: true,
});

const posts = await sanity.fetch('*[_type == "post"] | order(publishedAt desc)');
---

{posts.map(post => (
  <article>
    <h2>{post.title}</h2>
  </article>
))}

Markdown/MDX Content Authoring

MDX เป็น Markdown ที่รองรับ JSX ทำให้สามารถใช้ Interactive Component ภายในเนื้อหา Markdown ได้ Astro รองรับ MDX อย่างสมบูรณ์ผ่าน @astrojs/mdx Integration

# ติดตั้ง MDX Support
npx astro add mdx

---
// src/content/blog/interactive-post.mdx
title: "บทความที่มี Interactive Component"
date: 2026-04-08
---
import Chart from '../../components/Chart.jsx';
import CodePlayground from '../../components/CodePlayground.svelte';

# บทความที่มี Interactive Component

นี่คือข้อความ Markdown ธรรมดา แต่สามารถใส่ **Component** ได้

## กราฟแสดงข้อมูล

<Chart client:visible data={[10, 20, 30, 40, 50]} />

## ลองเขียน Code

<CodePlayground client:idle language="javascript" />

กลับมาเขียน Markdown ต่อได้ตามปกติ

การเขียน Content ด้วย Markdown/MDX มีข้อดีมากสำหรับนักเขียนเนื้อหาทางเทคนิค เนื่องจากเขียนง่าย อ่านง่าย รองรับ Code Blocks ได้ดี สามารถใช้ Version Control (Git) ติดตามการเปลี่ยนแปลงได้ และ Build เป็น HTML ที่สะอาดโดยอัตโนมัติ

Performance Comparison — เปรียบเทียบประสิทธิภาพ

ในการทดสอบประสิทธิภาพของ Framework ต่างๆ สำหรับ Content Site ที่มี 100 หน้า Astro ได้คะแนน Lighthouse 100/100 อย่างสม่ำเสมอ ในขณะที่ Next.js ได้ 90-95 และ Gatsby ได้ 85-92 เหตุผลหลักคือ Astro ส่ง JavaScript ไป Browser เพียง 0-10 KB (สำหรับ Static Pages) ในขณะที่ Next.js ส่ง 70-100 KB และ Gatsby ส่ง 100-200 KB

เมื่อไหร่ควรใช้ SSG และเมื่อไหร่ควรใช้ SSR

การเลือกระหว่าง SSG และ SSR ขึ้นอยู่กับลักษณะของเว็บไซต์ ใช้ SSG เมื่อเนื้อหาไม่เปลี่ยนแปลงบ่อย (Blog, Docs, Portfolio) เว็บไซต์ไม่ต้องการ User Authentication ไม่มี Dynamic Content ที่ต่างกันตาม User แต่ละคน ต้องการ Performance สูงสุด ต้องการ Hosting ราคาถูกหรือฟรี

ใช้ SSR เมื่อเนื้อหาเปลี่ยนแปลงตลอดเวลา (E-commerce, Social Media) ต้องการ Personalization ตาม User ที่ Login เข้ามา มี Feature ที่ต้องใช้ Server-side Logic เช่น Payment Processing มี Real-time Data ที่ต้องอัปเดตทุก Request

สำหรับเว็บไซต์ที่ต้องการทั้งสองอย่าง Astro รองรับ Hybrid Rendering ที่ให้คุณเลือกได้ว่าหน้าไหนจะเป็น SSG และหน้าไหนจะเป็น SSR

// astro.config.mjs — Hybrid Rendering
export default defineConfig({
  output: 'hybrid',  // Default เป็น Static แต่เลือก SSR ได้บางหน้า
});

// หน้าที่ต้องการ SSR ให้เพิ่ม:
// export const prerender = false;

Astro Configuration ที่สำคัญ

// astro.config.mjs — ตัวอย่าง Configuration เต็ม
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
import sitemap from '@astrojs/sitemap';
import mdx from '@astrojs/mdx';
import compress from 'astro-compress';

export default defineConfig({
  site: 'https://mysite.com',
  integrations: [
    react(),
    tailwind(),
    sitemap(),
    mdx({
      syntaxHighlight: 'shiki',
      shikiConfig: { theme: 'dracula' },
    }),
    compress({
      CSS: true,
      HTML: true,
      Image: true,
      JavaScript: true,
    }),
  ],
  image: {
    service: { entrypoint: 'astro/assets/services/sharp' },
  },
  vite: {
    build: {
      cssMinify: true,
    },
  },
  prefetch: {
    prefetchAll: true,  // Prefetch ทุก Link อัตโนมัติ
  },
});

สรุป

Static Site Generation กลับมาเป็นที่นิยมอีกครั้งในปี 2026 ด้วยเหตุผลที่ชัดเจน ความเร็ว ความปลอดภัย ค่าใช้จ่ายต่ำ และ SEO ที่ดีเยี่ยม Astro เป็น Framework ที่ดีที่สุดสำหรับ Content-Driven Websites ด้วย Islands Architecture ที่ส่ง JavaScript เฉพาะส่วนที่จำเป็น ความเป็น Framework Agnostic ที่ให้เลือกใช้ React Vue Svelte หรือ Solid ได้ตามต้องการ และ Content Collections ที่จัดการเนื้อหาอย่างเป็นระบบด้วย Type Safety

สำหรับโปรเจกต์ใหม่ในปี 2026 ถ้าเว็บไซต์ของคุณเน้นเนื้อหาเป็นหลัก ไม่ว่าจะเป็น Blog Documentation Landing Page หรือ Marketing Site ให้ลอง Astro เป็นตัวเลือกแรก คุณจะได้เว็บไซต์ที่เร็วที่สุด Lighthouse Score 100 คะแนน และ Developer Experience ที่ดีเยี่ยม เริ่มต้นวันนี้ด้วย npm create astro@latest แล้วคุณจะเข้าใจว่าทำไม Astro ถึงเป็น Framework ที่ Developer ทั่วโลกเลือกใช้