TinaCMS & Next.js

Hầu hết các Headless CMS dạng SaaS quản lý dữ liệu trên cơ sở dữ liệu đám mây riêng và thu phí định kỳ theo số lượng editor, dung lượng hoặc số ngôn ngữ. TinaCMS chọn một hướng đi khác: một Headless CMS mã nguồn mở theo mô hình Git-backed, tích hợp trực tiếp vào mã nguồn của dự án Next.js.

Tại Perxel, TinaCMS là một trong những giải pháp cốt lõi được nghiên cứu và ứng dụng thực tế để giải bài toán về trải nghiệm biên tập trực quan và chi phí duy trì dài hạn cho doanh nghiệp. Cần nói rõ: TinaCMS trước hết là một visual editor, phần tính năng CMS xung quanh (content modeling, quản trị, rollback) chỉ ở mức cơ bản, không sâu bằng một Headless CMS thương mại như Prismic.

Trải nghiệm Click-to-Edit ngay trên giao diện

Điểm khác biệt lớn nhất của TinaCMS so với đa số Headless CMS truyền thống là khả năng Visual Editing. Thay vì nhập văn bản vào một ô form trong trang quản trị riêng biệt rồi mở tab preview để xem thử, quản trị viên đăng nhập vào TinaCMS và chỉnh sửa trực tiếp trên giao diện của website.

Người dùng chỉ cần nhấp vào tiêu đề, đoạn văn hoặc hình ảnh trên trang để chỉnh sửa. Mọi thay đổi phản hồi ngay lập tức trên màn hình. Trải nghiệm này gần giống các công cụ no-code như Webflow hay Framer, nhưng vẫn giữ nguyên khả năng tối ưu hiệu năng và tùy biến mã nguồn của Next.js.

Chỉnh sửa trực tiếp trên giao diện thật, minh họa từ dự án Atlas Robotics.

Kiến trúc Git-backed: dữ liệu nằm trong mã nguồn dự án

Khác với các Headless CMS lưu dữ liệu trong cơ sở dữ liệu SQL hoặc NoSQL bên thứ ba, TinaCMS hoạt động theo cơ chế Git-backed. Mỗi lần người dùng bấm Publish, hệ thống thực hiện một Git commit để lưu thay đổi dưới dạng tệp JSON hoặc Markdown ngay trong kho mã nguồn GitHub của dự án.

Vì dữ liệu nội dung sống cùng mã nguồn, website có thể biên dịch tĩnh (SSG) và triển khai lên hạ tầng Edge Network như Cloudflare Workers hoặc Vercel mà không cần duy trì cơ sở dữ liệu hay dịch vụ hosting media riêng. Doanh nghiệp cũng sở hữu toàn bộ lịch sử thay đổi nội dung qua Git history.

Mỗi trang là một tệp Markdown riêng, quản lý trực tiếp trong repository của dự án.

Những lợi thế cốt lõi

• Không giới hạn ngôn ngữ. Vì dữ liệu lưu trực tiếp trong repository, TinaCMS cho phép cấu hình 3, 5 hay nhiều ngôn ngữ hơn mà không bị ràng buộc bởi chi phí nâng cấp gói theo locale.
• Không tính phí theo băng thông. Nội dung phục vụ từ chính hạ tầng biên dịch tĩnh của website, không qua một CDN riêng của CMS tính phí theo lượt tải.
• Chi phí duy trì tối giản. Gói miễn phí của TinaCMS hỗ trợ 2 tài khoản editor, đủ dùng cho phần lớn website doanh nghiệp vận hành bởi 1 đến 2 người phụ trách nội dung. Khi team lớn hơn, gói Team trả phí (khoảng $24/tháng) nâng lên 3 tài khoản editor.

Nội dung từng ngôn ngữ tách riêng theo thư mục: en, vi, zh, minh họa từ dự án Atlas Robotics.

Đánh giá thực tế: 8/10 cho marketing website

Sau nhiều năm dùng WordPress làm CMS chính, Perxel chấm TinaCMS 8/10 cho các dự án marketing website. Kiến trúc Git-backed là điểm cộng lớn, nhưng hai điểm trừ dưới đây là giới hạn thực tế cần biết trước khi triển khai.

• Khả năng mở rộng admin panel còn hạn chế (-1). Perxel từng thử xây dựng một dashboard riêng để theo dõi SEO và số liệu đa ngôn ngữ ngay trong TinaCMS, chạy tốt ở local nhưng không hoạt động khi lên production. Tài liệu cho các tùy biến nâng cao còn thiếu, và việc khó override giao diện admin hoặc chèn thêm trang tùy chỉnh khiến trải nghiệm kém thân thiện hơn với người dùng không rành kỹ thuật.
• Asset caching chưa tối ưu (-1). Media phục vụ qua assets.tina.io hiện chưa có cơ chế cache phù hợp. Cache chưa tối ưu này không làm hỏng điểm PageSpeed, nhưng cũng không giúp điểm số bứt phá: trên dự án Atlas Robotics, điểm Performance dừng ở mức chấp nhận được, không cao bằng khi dùng Prismic. Perxel vẫn chưa tìm ra giải pháp khắc phục triệt để, và chưa rõ đây có phải là giới hạn riêng của gói miễn phí hay không.

PageSpeed Insights, bản mobile.

PageSpeed Insights, bản desktop.

Thách thức về setup và giải pháp từ Perxel

Sự tự do và tiết kiệm chi phí lâu dài của TinaCMS đi kèm với thời gian thiết lập ban đầu lớn hơn khá nhiều so với các SaaS CMS thông thường. Lập trình viên phải định nghĩa toàn bộ schema nội dung, thiết lập kết nối giữa GitHub và Next.js, đồng thời tối ưu các component để tính năng Click-to-Edit hoạt động mượt mà mà không ảnh hưởng tốc độ tải trang.

Nhận thấy rào cản này, Perxel đã đầu tư giai đoạn R&D để đóng gói sẵn một bộ khung tiêu chuẩn cho Next.js kết hợp TinaCMS. Năng lực làm chủ kỹ thuật này được chứng minh qua chứng nhận Certified Developer từ TinaCMS. Nhờ bộ khung đã tối ưu sẵn, chi phí thời gian setup không bị tính vào ngân sách của khách hàng.

Khi nào nên chọn TinaCMS?

• Khi team vận hành nội dung ưu tiên trải nghiệm Click-to-Edit trực tiếp trên giao diện trang.
• Khi website cần từ 3 ngôn ngữ trở lên và muốn tránh chi phí đăng ký gói doanh nghiệp theo locale.
• Khi doanh nghiệp muốn cắt giảm tối đa chi phí máy chủ và phí CMS định kỳ hàng tháng.

Lời kết

Perxel lần đầu biết đến TinaCMS và triển khai thành công chỉ trong 3 ngày cho dự án Growtrics, một creative website có animation GSAP phức tạp. Khách hàng, vốn là một team kỹ thuật, không hề yêu cầu CMS, nhưng Perxel vẫn tích hợp thêm và họ rất hài lòng khi có thể tự quản lý nội dung sau đó.

Từ dự án đó, Perxel xây dựng Atlas Robotics để kiểm chứng giới hạn thực tế của stack: hỗ trợ 3 ngôn ngữ, lưu trữ vài GB hình ảnh và video, demo trực tiếp tại atlas-robotics.perxel.com. Website vận hành ổn định, với điểm PageSpeed ở mức chấp nhận được như đã nêu ở trên, dù chưa vượt qua Prismic ở cùng tiêu chí.

TinaCMS mang lại một lựa chọn thay thế WordPress với chi phí hạ tầng thấp cho các website marketing mà Perxel xây dựng.

Tìm hiểu chi tiết về dịch vụ Website Next.js & Headless CMS của Perxel, hoặc đọc bài viết So sánh TinaCMS và Prismic nếu vẫn còn phân vân giữa hai lựa chọn.

Footnotes

1. TinaCMS
2. TinaCMS: Pricing