ข้ามไปยังเนื้อหา
Astro Deep Dive

Rendering และ Output Modes

สองวิธีในการผลิต HTML ของหน้า

หัวข้อที่มีชื่อว่า “สองวิธีในการผลิต HTML ของหน้า”

Astro render HTML ของ route ได้ในสองจังหวะที่ต่างกัน และตัวเลือกนี้เป็นแกนกลางของวิธี deploy:

  • Static (SSG) — HTML ถูก build ครั้งเดียว ตอน build time แล้ว serve เป็นไฟล์ธรรมดา เร็ว cache ได้ deploy ไปยัง static host หรือ CDN ไหนก็ได้ เหมาะกับ content ที่เหมือนกันสำหรับทุกคน
  • On-demand (SSR) — HTML ถูก build แต่ละ request บน server จึงใช้ข้อมูลตอน request ได้ (user ที่ login อยู่, cookies, query params, ข้อมูล live) ต้องมี runtime ซึ่งแปลว่าต้องมี adapter
flowchart TB
  subgraph static["Static (SSG)"]
    b["build time"] --> f["ไฟล์ HTML"] --> cdn["serve จาก CDN"]
  end
  subgraph ssr["On-demand (SSR)"]
    r["แต่ละ request"] --> srv["server render HTML"] --> resp["response"]
  end
Static build ครั้งเดียว; on-demand render แต่ละ request

ค่า default คือ static คุณ opt โปรเจกต์ (หรือ route เดียว) เข้าสู่ on-demand rendering เมื่อหน้านั้นจำเป็นต้องใช้ข้อมูลตอน request จริง ๆ

ควบคุมทีละ route ด้วย prerender

หัวข้อที่มีชื่อว่า “ควบคุมทีละ route ด้วย prerender”

คุณไม่ได้เลือก mode เดียวสำหรับทั้งเว็บ ในโปรเจกต์ที่เปิด server ไว้ แต่ละ route ตัดสินใจ เองด้วย export const prerender:

---
// เว็บที่ส่วนใหญ่เป็น static แต่มีหนึ่ง route ที่ dynamic:
export const prerender = false;  // render หน้านี้แบบ on-demand แต่ละ request
const user = await getUser(Astro.request);  // ต้องใช้ request ที่เข้ามา
---
<p>Welcome, {user.name}</p>
  • export const prerender = true → build route นี้เป็นไฟล์ static (แม้จะอยู่ในโปรเจกต์ที่เปิด server)
  • export const prerender = false → render route นี้แบบ on-demand (แม้จะอยู่ในโปรเจกต์ที่ส่วนใหญ่เป็น static)

นี่คือทางสายกลางที่ทรงพลัง: เว็บที่ 95% เป็นไฟล์ static พร้อม route แบบ on-demand ไม่กี่ตัว (dashboard, form handler) โดยแต่ละตัว render เฉพาะเมื่อจำเป็น มักเรียกว่า hybrid rendering

Adapters: on-demand รันได้ยังไง

หัวข้อที่มีชื่อว่า “Adapters: on-demand รันได้ยังไง”

Static output ไม่ต้องการอะไรนอกจาก file host ส่วน on-demand rendering ต้องการ runtime เพื่อรัน server code ของคุณแต่ละ request — และนั่นคือที่ที่ adapter เข้ามา คุณติดตั้ง adapter สำหรับ platform เป้าหมายแล้วตั้งค่าใน config:

// astro.config.mjs — เปิด on-demand rendering บน Cloudflare
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';


export default defineConfig({
  adapter: cloudflare(),   // หรือ node(), vercel(), netlify()...
});

adapter แปลง server rendering ของ Astro ให้เป็น format ของ platform (Cloudflare Worker, Node server, Vercel function) ถ้าไม่มี adapter feature แบบ on-demand (SSR routes, server islands, Actions endpoints) จะรันไม่ได้ — เป็น error ที่เจอบ่อยตอน deploy ครั้งแรก: “an adapter is required”

build ผลิตอะไรออกมา

หัวข้อที่มีชื่อว่า “build ผลิตอะไรออกมา”

astro build รัน component script ของคุณ, render HTML, bundle CSS และ island JavaScript ใด ๆ แล้วเขียน output ไปที่ dist/ สำหรับ static site นั่นคือโฟลเดอร์ของไฟล์ .html และ asset ที่คุณโยนลง CDN ไหนก็ได้ สำหรับ hybrid/server site dist/ ยังมี server entry ที่ adapter รันด้วย ไม่ว่าทางไหน browser ก็ได้รับ HTML ที่เสร็จแล้วบวกเฉพาะ island JS — คำมั่นพื้นฐานที่ build ส่งมอบให้

ความต่างระหว่าง static กับ on-demand rendering คืออะไร?
คุณจะทำให้ route เดียว render แบบ on-demand ในโปรเจกต์ที่ส่วนอื่นเป็น static ยังไง?
adapter มีไว้ทำอะไร?
คุณ deploy เว็บที่มี SSR route แต่ไม่ได้ตั้งค่า adapter จะเกิดอะไรขึ้น?