Static vs SSR

Next.js ให้ rendering modes สามแบบต่อหน้า: static (SSG), server-side rendering (SSR) และ incremental static regeneration (ISR) Astro เริ่มจากปลายตรงข้าม — static โดย default, opt เข้า SSR ทีละ route — โดยใช้ model สองตัวสวิตช์ที่เรียบง่ายกว่า: option output ระดับ global และ export prerender ระดับต่อหน้า

option `output`

import { defineConfig } from 'astro/config';

export default defineConfig({
  // 'static'  — default; HTML build-time สำหรับทุกหน้า
  // 'server'  — ทุกหน้า server-rendered ยกเว้น prerender=true
  output: 'static',
});

เมื่อ output เป็น 'static' (default) Astro pre-render ทุกหน้าตอน build time และเขียน static HTML files ไปที่ dist/ ไม่ต้องมี server process — คุณ deploy ไปยัง CDN หรือ static host ใดก็ได้

เพิ่ม SSR adapter

หากต้องการใช้ output: 'server' คุณต้องติดตั้ง adapter ที่บอก Astro วิธีรัน server-side code ใน target environment

# เลือกหนึ่ง:
npx astro add vercel       # Vercel serverless functions
npx astro add netlify      # Netlify Edge Functions
npx astro add node         # Self-hosted Node.js (express/standalone)
npx astro add cloudflare   # Cloudflare Workers / Pages

// astro.config.mjs — SSR กับ Vercel adapter
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'server',
  adapter: vercel(),
});

export `prerender` ต่อหน้า

เมื่อ output: 'server' ทุกหน้า server-rendered โดย default export prerender = true เพื่อ opt หน้าแต่ละหน้ากลับเป็น static HTML

---
// หน้านี้ยัง pre-rendered แม้จะตั้ง output: 'server'
export const prerender = true;

const title = "About us";
---
<h1>{title}</h1>

ทำกลับกันได้เช่นกัน: เมื่อ output: 'static' ทำเครื่องหมายหน้าเป็น server-only ด้วย export const prerender = false

เปรียบเทียบ rendering modes

// Next.js rendering modes (App Router)

// Static (SSG) — default สำหรับ Server Components
// ไม่ต้อง export พิเศษ; เพียงเขียน Server Component
// next build pre-render เป็น HTML

// SSR — opt in ต่อ route
export const dynamic = 'force-dynamic';

// ISR — revalidate ตามกำหนดเวลา
export const revalidate = 60; // วินาที

// Client-side only (CSR)
'use client';
import { useEffect, useState } from 'react';
// ...

// Astro rendering modes

// astro.config.mjs
// output: 'static'  → ทุกหน้า pre-rendered (default)
// output: 'server'  → ทุกหน้า SSR โดย default

// Per-page overrides (ใช้ได้ทั้งสอง modes):
// Pre-render หน้านี้:
export const prerender = true;

// Server-render หน้านี้:
export const prerender = false;

// ไม่มี ISR เทียบเท่าใน Astro core — ใช้ adapter-specific
// options (เช่น Vercel's isr: { expiration: 60 }) ใน
// astro.config.mjs หาก adapter รองรับ

Dynamic routes กับ SSR

เมื่อหน้าต้องพึ่งพาข้อมูล request-time (auth cookies, URL params, POST body) ให้เขียนเป็น SSR page:

---
export const prerender = false;    // server-render หน้านี้

const session = Astro.cookies.get('session')?.value;
if (!session) return Astro.redirect('/login');

const user = await fetchUser(session);
---
<h1>Welcome, {user.name}</h1>

นี่คือสิ่งเทียบเท่าของ Astro กับหน้า getServerSideProps ของ Next.js หรือ dynamic Server Component ที่อ่าน cookies

ISR ใน Astro

Astro ไม่มี ISR เทียบเท่าในตัวแบบ Next.js revalidate แต่มี adapter-specific options:

// astro.config.mjs — Vercel ISR ผ่าน adapter config
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'server',
  adapter: vercel({
    isr: {
      expiration: 60,   // สร้างใหม่หลัง 60 วินาที
    },
  }),
});