Astro SSG vs SSR: Khi nào nên dùng gì cho SEO tối ưu?

Tuần trước, một bạn hỏi tôi: “Anh ơi, blog anh dùng SSG hay SSR? Em thấy Next.js toàn dùng SSR mà.”

Câu trả lời: SSG. Và đó là lý do blog này load nhanh hơn 90% blog Next.js.

Nhưng không phải lúc nào SSG cũng đúng. Có những case bắt buộc phải dùng SSR.

Đây là guide để bạn chọn đúng.

SSG vs SSR: Khác nhau cơ bản

SSG (Static Site Generation)

Cách hoạt động:

• Build time: Generate HTML cho tất cả pages
• Runtime: Server chỉ serve static files
• Update: Phải rebuild và redeploy

Ví dụ:

---
// src/pages/blog/[slug].astro
export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post }
  }));
}

const { post } = Astro.props;
---

<article>
  <h1>{post.data.title}</h1>
  <div set:html={post.body} />
</article>

Build output:

dist/
  blog/
    post-1/index.html
    post-2/index.html
    post-3/index.html

Mỗi post là một file HTML tĩnh.

SSR (Server-Side Rendering)

Cách hoạt động:

• Build time: Không generate HTML
• Runtime: Server render HTML cho mỗi request
• Update: Realtime, không cần rebuild

Ví dụ:

---
// src/pages/dashboard.astro
export const prerender = false; // Enable SSR

const user = Astro.cookies.get('user');
const data = await fetch(`/api/user/${user.id}`);
---

<div>
  <h1>Welcome, {user.name}</h1>
  <p>Your balance: {data.balance}</p>
</div>

Runtime: Mỗi request tạo HTML mới với data mới.

So sánh chi tiết

Tiêu chí	SSG	SSR
Performance	Cực nhanh (CDN cache)	Phụ thuộc server
SEO	Tốt (HTML tĩnh)	Tốt (HTML dynamic)
Personalization	Không (same HTML cho mọi user)	Có (HTML khác nhau theo user)
Build time	Lâu nếu nhiều pages	Nhanh (không build pages)
Hosting cost	Rẻ (static hosting)	Đắt (cần server)
Realtime data	Không (phải rebuild)	Có

Use Cases: Khi nào dùng gì?

Dùng SSG khi:

1. Content ít thay đổi

Ví dụ: Blog, Documentation, Marketing site

// Blog post - Perfect cho SSG
---
const posts = await getCollection('blog');
---

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

Lý do: Content chỉ thay đổi khi bạn publish bài mới. Không cần render realtime.

2. Traffic cao, budget thấp

SSG + Cloudflare Pages = Miễn phí cho hầu hết use cases.

SSR + Vercel = $20/tháng cho 100K requests.

3. Performance là ưu tiên số 1

SSG luôn nhanh hơn SSR vì:

• HTML được cache trên CDN
• Không có database query
• Không có server processing

Dùng SSR khi:

1. Personalized content

Ví dụ: Dashboard, E-commerce cart, User profile

---
// Dashboard - Cần SSR
export const prerender = false;

const session = await getSession(Astro.cookies);
const orders = await db.query('SELECT * FROM orders WHERE user_id = ?', [session.userId]);
---

<div>
  <h1>Your Orders</h1>
  {orders.map(order => (
    <div>{order.product} - {order.status}</div>
  ))}
</div>

Lý do: Mỗi user thấy data khác nhau. SSG không làm được.

2. Realtime data

Ví dụ: Stock prices, Weather, Live scores

---
export const prerender = false;

const weather = await fetch('https://api.weather.com/current');
---

<div>
  <p>Current temperature: {weather.temp}°C</p>
  <p>Updated: {new Date().toLocaleString()}</p>
</div>

Lý do: Data thay đổi liên tục. Rebuild mỗi phút không khả thi.

3. A/B Testing, Geo-targeting

---
export const prerender = false;

const country = Astro.request.headers.get('cf-ipcountry');
const variant = country === 'US' ? 'variant-a' : 'variant-b';
---

<div>
  {variant === 'variant-a' ? (
    <h1>Special offer for US customers!</h1>
  ) : (
    <h1>Welcome to our store!</h1>
  )}
</div>

Lý do: Content khác nhau theo location/experiment. SSG không flexible.

Hybrid Rendering: Best of both worlds

Astro cho phép mix SSG và SSR trong cùng một project.

Config:

// astro.config.mjs
export default defineConfig({
  output: 'hybrid', // Enable hybrid mode
  adapter: vercel()
});

Usage:

// src/pages/index.astro - SSG (default)
---
const posts = await getCollection('blog');
---

// src/pages/dashboard.astro - SSR
---
export const prerender = false; // Opt-in to SSR
---

// src/pages/blog/[slug].astro - SSG (default)
---
export async function getStaticPaths() {
  // Generate static pages
}
---

Kết quả:

• / → Static HTML (fast)
• /blog/* → Static HTML (fast)
• /dashboard → Server-rendered (personalized)

Performance Comparison: Real numbers

Tôi test cùng một trang với SSG và SSR:

SSG (Cloudflare Pages):

• TTFB: 45ms
• FCP: 0.6s
• LCP: 0.9s
• Cost: $0

SSR (Vercel Edge):

• TTFB: 180ms
• FCP: 1.1s
• LCP: 1.6s
• Cost: $20/month (100K requests)

Kết luận: SSG nhanh gấp 2-3 lần và rẻ hơn nhiều.

SEO Impact: Có khác biệt không?

Câu trả lời ngắn: KHÔNG.

Cả SSG và SSR đều trả về full HTML cho Googlebot.

Proof:

# SSG
curl https://blog.example.com/post-1
# Response: Full HTML (generated at build time)

# SSR
curl https://app.example.com/dashboard
# Response: Full HTML (generated at request time)

Googlebot không quan tâm HTML được generate khi nào, chỉ quan tâm có full content không.

Lưu ý: CSR (Client-Side Rendering) thì khác. React SPA không tốt cho SEO nếu không có SSR.

Migration: SSG → SSR

Nếu bạn đang dùng SSG và cần chuyển sang SSR:

Bước 1: Enable adapter

npm install @astrojs/vercel

// astro.config.mjs
import vercel from '@astrojs/vercel/serverless';

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

Bước 2: Update pages cần SSR

---
// Thêm dòng này vào pages cần SSR
export const prerender = false;
---

Bước 3: Deploy

npm run build
vercel deploy

Lưu ý: Hosting cost sẽ tăng. Cân nhắc kỹ.

Kết luận: Chọn gì?

Dùng SSG nếu:

• Content ít thay đổi (blog, docs, marketing)
• Cần performance tốt nhất
• Budget hạn chế

Dùng SSR nếu:

• Cần personalization
• Data realtime
• A/B testing, geo-targeting

Dùng Hybrid nếu:

• Có cả static pages và dynamic pages
• Muốn optimize cost và performance

Lời khuyên:

• Mặc định dùng SSG
• Chỉ dùng SSR khi thực sự cần thiết
• Test performance trước khi deploy

Rule of thumb: Nếu bạn đang phân vân, chọn SSG. 80% use cases không cần SSR.