CMS là gì — WordPress, Strapi, Sanity, Webflow khác nhau ở đâu
CMS (Content Management System) là 'phần mềm quản lý nội dung' — biên tập viên viết bài qua UI thay vì code HTML. Hiểu 3 loại CMS (traditional, headless, page builder) để chọn đúng cho blog, ecommerce, hay marketing site — tiết kiệm 50-80% thời gian dev.
9 phút đọcCập nhật 2026-05-22
Nghe bài viết
Để Claude đọc bài cho bạn — vừa nghe vừa làm việc khác
Mục lục bài viết(32)
Admin panel của Strapi CMS (headless) — biên tập viên quản content qua UI form thay vì sửa file MDX/HTML. Mọi CMS modern đều có UI tương tự: define schema (Article, Category, Author), CRUD records, preview trước khi publish. Frontend (web/app) fetch data qua REST/GraphQL API. Đây là pattern phổ biến nhất cho content site 2026. Nguồn: Wikimedia Commons (CC BY-SA 4.0).
Hiểu đơn giản nhất
Tưởng tượng bạn mở tiệm bánh và cần đăng menu lên web mỗi tuần.
Cách 1 — Không CMS: Mỗi lần đổi menu, bạn nhờ dev sửa HTML, push code, deploy. Mất 1-2 giờ + cost agency.
Cách 2 — Có CMS:
Bạn vào trang mybakery.com/admin, click "Thêm bánh mới", nhập tên + giá + ảnh, nhấn Save. Web tự update trong vài giây. Không cần dev.
CMS = Content Management System = phần mềm cho biên tập viên quản nội dung qua UI thay vì code.
3 thành phần cốt lõi:
| Thành phần | Vai trò |
|---|---|
| Schema | Định nghĩa loại content (Article, Product, Page) + field |
| Admin UI | Form CRUD cho editor — không cần biết code |
| Frontend render | Lấy content từ DB → hiển thị trên web |
CMS chia làm 3 loại theo cách render frontend:
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ TRADITIONAL │ │ HEADLESS │ │ PAGE BUILDER │
│ (Coupled) │ │ (Decoupled) │ │ (Visual) │
├─────────────────┤ ├─────────────────┤ ├─────────────────┤
│ WordPress │ │ Strapi │ │ Webflow │
│ Drupal │ │ Sanity │ │ Wix │
│ Joomla │ │ Contentful │ │ Squarespace │
│ │ │ Payload │ │ Framer │
│ Admin + theme │ │ Admin + API + │ │ Admin + canvas │
│ cùng 1 chỗ │ │ frontend tự │ │ tích hợp │
└─────────────────┘ └─────────────────┘ └─────────────────┘
Tại sao bạn cần biết
- Tiết kiệm 50-80% thời gian dev cho web content-heavy. Mỗi bài blog mới không cần dev push code.
- Empower team marketing/content — họ tự publish không depend dev.
- Hiểu vì sao 40% web toàn cầu là WordPress. Plugin ecosystem 20+ năm tích luỹ rất mạnh.
- Chọn đúng CMS cho project = tiết kiệm 50tr-500tr. WordPress cho SaaS = sai. Custom code cho blog = sai (overkill).
- Hiểu trade-off SEO vs UX editor. Static MDX SEO tối ưu nhưng editor non-tech khó dùng. Webflow ngược lại.
Traditional CMS — WordPress thống trị
Traditional CMS = backend + frontend cùng 1 codebase, cùng 1 server.
User → web → PHP server → DB → render HTML → trả về user
WordPress.org (self-host) — 40% web toàn cầu
Cài đặt: Download WordPress → upload host → cấu hình MySQL → ready
Plugin ecosystem:
| Loại plugin | Tên phổ biến | Use case |
|---|---|---|
| SEO | Yoast, RankMath | Meta tags, sitemap, schema, redirect |
| E-commerce | WooCommerce, Easy Digital Downloads | Bán hàng online |
| Page builder | Elementor, Beaver Builder, Divi | Visual drag-drop page |
| Form | Contact Form 7, Gravity Forms, WPForms | Lead capture, survey |
| Security | Wordfence, Sucuri | WAF, malware scan |
| Cache | WP Rocket, W3 Total Cache | Performance |
| Backup | UpdraftPlus, BackWPup | Auto backup offsite |
Pricing: Free WordPress + paid plugin/theme
Mạnh nhất: Blog content-heavy, brochure site, e-commerce nhỏ-vừa Yếu nhất: Real-time app, SaaS dashboard, mobile native
WordPress.com (hosted)
- Hosted bởi Automattic
- Free tier có subdomain
*.wordpress.com - Paid $4-25/tháng cho custom domain + theme
- Trade-off: control kém hơn self-host, không cài plugin tự do trong gói thấp
Drupal, Joomla — alternatives
- Drupal: enterprise CMS, security cao (chính phủ Mỹ dùng), learning curve dốc
- Joomla: middle ground, đang giảm phổ biến
Headless CMS — chỉ là backend
Headless CMS = không tự render frontend. Bạn build frontend riêng (Next.js, Nuxt, Astro), fetch data qua API.
[Frontend (Next.js)] ←─ fetch JSON ─→ [Headless CMS API]
↓ ↓
HTML rendered Postgres DB
user thấy editor quản
Strapi — open-source leader
- Pricing: Free self-host, $99-500/tháng cloud
- Tech: Node.js + Postgres/MySQL/SQLite
- API: REST + GraphQL tự generate
- Plugin: Smaller ecosystem hơn WordPress nhưng growing
- Use case: Blog + ecommerce light + multi-platform (web + mobile)
Sanity.io — UX editor đẹp nhất
- Pricing: Free tier 3 user, paid $99-949/tháng
- Tech: Hosted SaaS, không self-host
- API: GROQ (query language riêng) + GraphQL
- Bonus: Real-time collab (như Google Docs), preview built-in
- Use case: Brand site có team content > 3 người
Contentful — enterprise headless
- Pricing: Free 5 user, $300+/tháng paid
- Tech: Hosted SaaS, dùng bởi Adidas, Spotify, BMW
- Strengths: SLA enterprise, integration mạnh
- Use case: Enterprise có budget + cần SLA 99.9%
Payload CMS — TypeScript-first
- Pricing: Free self-host, $35/seat/tháng cloud
- Tech: Node.js + TypeScript, schema-as-code
- Bonus: Tích hợp Next.js sâu, có thể embed trong same Next.js app
- Use case: Dự án Next.js có dev senior, muốn config code không UI
Directus — database-first headless
- Pricing: Free self-host, $99-1500/tháng cloud
- Tech: Connect existing SQL database, auto-generate admin
- Unique: Schema = database. Bạn có DB sẵn → Directus add admin UI lên
- Use case: Migrate from legacy DB, không muốn re-design schema
Page Builder — visual CMS
Page Builder = vẽ web visual (drag-drop) + nhập content cùng UI. Lai giữa CMS + no-code.
Webflow — pro page builder
- Pricing: $14-39/site/tháng
- Output: HTML/CSS clean (designer-friendly)
- CMS built-in: Yes, không cần plugin
- Hosting tích hợp: Yes (Webflow CDN)
- Use case: Marketing site, portfolio, agency client work
Wix — easiest for non-tech
- Pricing: $16-159/tháng
- Templates: 800+ templates
- Use case: Small business owner self-build
- Trade-off: HTML không clean như Webflow, SEO ok không xuất sắc
Squarespace — middle ground
- Pricing: $16-49/tháng
- Sweet spot: Photography portfolio, e-commerce nhỏ
- Strengths: Templates đẹp đồng nhất
Framer — modern visual builder
- Pricing: Free + $5-25/tháng
- Strengths: Animation cực mạnh, responsive design tốt
- Use case: SaaS landing page, design portfolio
Git-based CMS — middle ground hot trend
Git-based CMS = editor UI commit content vào git repo, không có DB separate.
Decap CMS (cũ Netlify CMS)
- Pricing: Free
- Workflow: Edit UI → Decap commit file Markdown lên GitHub → trigger build Next.js/Astro
Tina CMS
- Pricing: Free OSS, $29+/tháng cloud
- Workflow: Visual editing direct trên web (live preview), commit lên git
Keystatic
- Pricing: Free OSS
- Workflow: Schema TypeScript, admin UI tích hợp Next.js/Astro app same repo
Use case git-based
- Blog dev có git workflow rồi (Decap, Tina)
- Documentation site cho product (Keystatic)
- Wiki như wiki.vietcodex.com — tuy không dùng UI mà commit .mdx trực tiếp qua vibe coding
Decision matrix
Bạn cần build gì?
| Use case | Khuyến nghị CMS |
|---|---|
| Blog cá nhân | WordPress.com (hosted) hoặc Ghost |
| Blog company + SEO mạnh | WordPress.org + Yoast |
| Brochure 5-20 trang | Webflow hoặc Wix |
E-commerce <1k SP | WooCommerce hoặc Shopify |
| E-commerce >1k SP custom | Custom Next.js + Strapi/Sanity |
| SaaS marketing site | Webflow hoặc Framer + custom dashboard |
| News site high-traffic | Strapi/Sanity + Next.js (ISR) |
| Multi-language site | Strapi i18n hoặc WordPress WPML |
| Documentation/wiki dev | Markdown + Astro/Next.js (git-based) |
| Enterprise content team >10 người | Contentful hoặc Sanity |
Bạn có dev không?
- Không có dev → Webflow / Wix / WordPress.com
- Có dev junior → WordPress self-host + theme bought
- Có dev senior → Headless (Strapi/Sanity) + Next.js
- Có dev senior + 2026 AI tools → Custom MDX với vibe coding (như vietcodex.com)
Ví dụ thực tế: 3 web VN dùng CMS khác nhau
1. VnExpress.net (báo lớn nhất VN)
- Stack: Custom CMS in-house + multi-CDN
- Reason: Scale 1M+ article + 50M visits/ngày cần custom
2. Tinhte.vn (forum/tin công nghệ)
- Stack: XenForo (specialized forum CMS) + WordPress cho blog
- Reason: Forum cần feature đặc thù (thread, reaction, badge)
3. wiki.vietcodex.com (cái bạn đang đọc)
- Stack: Next.js 16 + MDX in git + next-mdx-remote
- Reason: Static-first cho SEO, version control via git, vibe coding workflow
Cái gì có thể sai
| Vấn đề | Triệu chứng | Cách fix |
|---|---|---|
| WordPress chậm dù không nhiều traffic | Plugin xung đột, theme nặng | Disable plugin 1-by-1, dùng WP Rocket + Cloudflare |
| Webflow CMS limit 100 collection item | Free tier limit | Upgrade plan hoặc migrate content sang Airtable + custom |
| Strapi update major version vỡ schema | Breaking change v3 → v4 → v5 | Test trên staging trước, đọc migration guide |
| Sanity bill cao bất ngờ | API call > free tier | Bật CDN cache + reduce per-page queries |
| Page builder tạo HTML rác | Elementor/Divi nặng nề | Migrate Webflow hoặc custom theme |
| Editor commit sai vào git | Decap conflict file | Train team git basic hoặc dùng Tina (UI-friendly hơn) |
| Headless CMS preview không work | Frontend không setup draft mode | Add ?preview=true route + secret token |
Tóm tắt 1 dòng
CMS = phần mềm cho editor quản content qua UI. 3 loại: Traditional (WordPress — 40% web toàn cầu, plugin mạnh), Headless (Strapi/Sanity/Payload — chỉ API, frontend riêng), Page Builder (Webflow/Wix — visual builder). Blog content-heavy → WordPress. Brand modern → Webflow. SaaS Next.js → Strapi/Sanity headless. Static wiki dev → MDX git-based. Match CMS với team skill + budget + scale, đừng over-engineer.
Đọc tiếp
- No-code vs Low-code vs Custom code — chọn đường nào theo budget — overlap với page builder
- Framework là gì? React, Vue, Next.js — bộ Lego cho lập trình viên — frontend pair với headless CMS
- API là gì? Tại sao mọi app, mọi web hiện đại đều cần — headless CMS gọi qua REST/GraphQL API
- Database là gì? So sánh dễ hiểu với Excel — CMS lưu content trong DB
Câu hỏi thường gặp
WordPress đã ra đời từ 2003 — có còn relevant 2026 không?
Có — 40%+ web toàn cầu vẫn dùng WordPress. Nhưng đã thay đổi: (1) WordPress.com (hosted) cho non-tech, free tier với subdomain wordpress.com; (2) WordPress.org self-host với plugin ecosystem 60.000+ — vẫn là standard cho blog content-heavy; (3) Headless WordPress (WP làm backend + Next.js frontend) đang lên — combine flexibility WP + performance Next.js. WordPress tốt cho blog, brochure site, e-commerce nhỏ-vừa (WooCommerce). YẾU cho SaaS, real-time app, custom workflow phức tạp.
Headless CMS là gì? Khác WordPress thường ở đâu?
WordPress 'thường' = backend + frontend cùng 1 chỗ (admin + theme PHP). Headless CMS = chỉ có backend (admin + API), không tự render frontend. Bạn build frontend riêng bằng Next.js/Nuxt/Astro fetch data qua REST/GraphQL. Lợi: (1) Performance tốt hơn (frontend là static + CDN); (2) Reuse content trên web + mobile + email; (3) Choose UI framework tự do. Đại diện: Strapi, Sanity, Contentful, Payload, Directus. Trade-off: phức tạp setup hơn, cần 2 deploy (CMS + frontend).
Strapi vs Sanity vs Payload — chọn cái nào?
Strapi: open-source, self-host miễn phí, REST + GraphQL, plugin ecosystem. Mature nhất nhưng UI hơi cũ. Sanity: SaaS, free tier 3 user, query language GROQ độc đáo, real-time collab built-in. UI đẹp nhất, nhưng vendor lock-in. Payload: TypeScript-first, self-host, code-as-config (schema trong TS), Next.js native. Mới hơn nhưng đang lên nhanh 2025-2026. Quy tắc: blog content + budget 0 → Strapi. Brand công ty + budget có + cần UX editor đẹp → Sanity. TypeScript stack + Next.js + tight control → Payload.
Webflow CMS có phải headless không?
Không — Webflow là 'visual + CMS' tích hợp. Designer build UI trong Webflow Designer, content stored trong Webflow CMS, Webflow auto-render frontend (hosted bởi họ). Bạn có thể fetch data qua Webflow API để dùng ngoài, nhưng main use case vẫn là hosted bởi Webflow. So với Strapi/Sanity (chỉ là backend), Webflow là 'mini Wix' phiên bản pro. Pricing $14-39/site/tháng. Phù hợp marketing site có editor non-tech update content.
Markdown/MDX có phải CMS không?
Không phải CMS theo nghĩa truyền thống — nhưng là 'git-based CMS' nếu kết hợp đúng. Pattern: viết content .md/.mdx trong git repo → Next.js build static pages từ files. Lợi: (1) Version control built-in (git history); (2) Diff dễ review; (3) Không cần admin UI separate; (4) Performance tối đa (static). Nhược: editor không phải dev gặp git khó. Giải pháp middle-ground: dùng git-based CMS UI như Decap CMS (cũ Netlify CMS), Tina CMS, Keystatic — editor UI nhưng commit lên git. wiki.vietcodex.com dùng MDX trong git (vibe coding workflow).
WooCommerce vs Shopify — chọn cái nào cho e-commerce?
WooCommerce (plugin WordPress): free, self-host, tùy biến cao, 100+ payment gateway VN qua plugin. Nhược: maintain server + security update mỗi tuần, plugin conflict, slow nếu nhiều SP. Phù hợp: shop nhỏ-vừa < 1k SP, budget tight, có dev hoặc agency support. Shopify: SaaS hosted, $29-299/tháng, no maintain, app store có sẵn 80% feature. Phù hợp: shop scale fast, fashion/lifestyle, founder không có dev. Hạn chế VN: payment VN cần workaround (Casso, manual VNPay), GST policy mọi giao dịch phải qua Shopify Payments hoặc Stripe.
CMS có ảnh hưởng SEO không? Cái nào tốt nhất cho SEO?
Có — rất lớn. SEO friendliness ranking (tốt → kém): (1) Static site (MDX + Next.js): control 100%, performance tối đa, custom schema. (2) Headless CMS + Next.js: tương đương static với data dynamic. (3) WordPress + Yoast SEO plugin: good defaults, plugin SEO mạnh nhất ecosystem. (4) Webflow: good SEO settings tích hợp UI. (5) Wix/Squarespace: SEO basic OK, không control sâu. (6) Bubble: SEO kém vì HTML không tối ưu, JS-rendered. Quy tắc: content-driven SEO project → WordPress hoặc Static MDX. Marketing campaign → Webflow OK. SaaS dashboard không cần SEO.