BÀI 7: STATIC SITE vs SSR vs HYBRID TRONG NUXTJS

Cùng đến với Bài 7 – Static Site, SSR và Hybrid Mode trong NuxtJS. Đây là một trong những điểm mạnh lớn nhất của Nuxt: nhiều chế độ rendering linh hoạt, giúp bạn build đúng loại ứng dụng cần thiết cho từng mục đích.

---

1. Nuxt hỗ trợ 3 chế độ chính

Chế độ	Viết tắt	Mô tả ngắn
SPA	Single Page App	Toàn bộ chạy trên trình duyệt, không SSR
SSR	Server-side Rendering	Render HTML từ server mỗi lần truy cập
SSG	Static Site Generation	Build ra HTML tĩnh lúc deploy
Hybrid	Kết hợp	Một số trang SSG, một số trang SSR/SP

---

2. SPA – Single Page Application

• Mọi thứ chạy trên trình duyệt
• Giống như Vue CLI app bình thường
• Không hỗ trợ SEO vì không có HTML sẵn
• Nhanh cho app nội bộ, dashboard

Dùng khi:

• Không cần SEO
• Ứng dụng nhiều tương tác nội bộ (CRM, quản lý, SPA)

---

3. SSR – Server-side Rendering

• HTML được render từ server mỗi lần truy cập
• Tốt cho SEO vì bot đọc được nội dung ngay
• Có thể chậm nếu server yếu

Ví dụ flow:

1. User truy cập → Server tạo HTML
2. HTML gửi về → trình duyệt hiển thị nhanh

Dùng khi:

• Website tin tức, blog
• SEO là ưu tiên hàng đầu
• Dữ liệu động theo user (người dùng khác nhau, nội dung khác nhau)

---

4. SSG – Static Site Generation

• Build ra HTML tĩnh trước khi deploy
• Rất nhanh, không cần server render
• Không phù hợp với nội dung thường xuyên thay đổi

Ví dụ:
Khi build project: Nuxt sẽ tạo HTML cho mỗi trang .vue, sau đó chỉ cần upload lên Netlify là chạy.

Dùng khi:

• Blog tĩnh, Documentation, Landing Page
• Nội dung ít thay đổi

---

5. Hybrid Mode – kết hợp nhiều kiểu

• Nuxt cho phép mỗi trang có chế độ khác nhau
• Một số page dùng useFetch() (SSR), một số fetch-on-client (SPA)

Ví dụ:

📋 CopydefinePageMeta({
  prerender: true // trang này sẽ được build ra HTML tĩnh
})

Hoặc dùng:

📋 CopydefineNuxtConfig({
  ssr: true
})

Nhưng trang /admin có thể tắt SSR riêng.

---

6. Cấu hình chế độ trong nuxt.config.ts

SSG (static site):

📋 Copyexport default defineNuxtConfig({
  ssr: true,
  target: 'static'
})

SSR:

📋 Copyexport default defineNuxtConfig({
  ssr: true
})

SPA:

📋 Copyexport default defineNuxtConfig({
  ssr: false
})

---

7. So sánh tổng quát

Tiêu chí	SPA	SSR	SSG
SEO tốt	Có	Có	Có
Tốc độ tải	Có (sau lần đầu)	Phụ thuộc server	Có (HTML sẵn)
Thích hợp app nội bộ	Có	Không	Không
Cần hosting động	Không	Có	Không
Dễ deploy	Có	Khó hơn	Có

---

Bạn đã học được

• Các chế độ render mà Nuxt hỗ trợ
• Khi nào nên dùng SSR / SSG / SPA
• Cách config chế độ phù hợp trong nuxt.config.ts
• Lợi thế của Hybrid Mode – kết hợp linh hoạt