Building a Headless CMS with WordPress and React (Next.js)

Chào các bạn dev trẻ! Lại là tôi đây, người đã từng “ăn ngủ” cùng WordPress và giờ đây lại đang say mê với thế giới Front-end hiện đại. Chắc hẳn bạn đã nghe nhiều về việc WordPress đang “già cỗi” và không còn phù hợp với các ứng dụng web tốc độ cao, đúng không?

Thực ra, điều đó không hoàn toàn đúng đâu. WordPress vẫn là một CMS (Hệ thống quản lý nội dung) vô đối về sự dễ dùng và hệ sinh thái plugin đồ sộ. Vấn đề là cách chúng ta sử dụng nó. Thay vì dùng WordPress theo kiểu truyền thống (Front-end và Back-end dính liền), tôi sẽ chỉ cho bạn một con đường mới: biến WordPress thành Headless CMS, rồi dùng React (cụ thể là Next.js) để xây dựng giao diện Front-end “bay bổng”.

Đây chính là câu trả lời cho từ khóa wordpress with react mà bạn đang tìm kiếm – một giải pháp mà tôi tin rằng sẽ mở ra rất nhiều cơ hội cho các bạn.

1. Headless CMS là gì? “Đầu” đi đâu mất rồi?

Hình dung thế này: WordPress truyền thống như một con búp bê đầy đủ cả người (Back-end) và cái đầu (Front-end). Khi bạn truy cập website, WordPress render cả hai phần cùng lúc.

Headless CMS có nghĩa là chúng ta “cắt đầu” con búp bê đó đi. WordPress lúc này chỉ còn là “cái thân” – chuyên làm nhiệm vụ quản lý, lưu trữ nội dung (bài viết, ảnh, user…). Còn cái “đầu” (giao diện Front-end) sẽ do một framework hiện đại như React đảm nhiệm.

Tại sao lại phải cắt đầu?

• Tốc độ “xé gió”: React app chạy cực nhanh vì nó không phải tải toàn bộ WordPress mỗi lần.
• Bảo mật đỉnh cao: Front-end và Back-end tách biệt hoàn toàn. Kể cả Front-end có bị tấn công, Back-end của WordPress vẫn an toàn.
• Linh hoạt vô đối: Bạn có thể dùng một Back-end WordPress để cấp nội dung cho Web App, Mobile App (React Native), Smartwatch, hay thậm chí là TV thông minh.

2. Cách WordPress và React “nói chuyện” với nhau

Nếu WordPress không còn tự render giao diện, vậy làm sao React có thể lấy nội dung từ nó? Rất đơn giản, họ sẽ “nói chuyện” qua API. Có hai cách chính:

• REST API (mặc định của WordPress): Đây là cách truyền thống, WordPress sẽ “phơi bày” dữ liệu của bạn qua các đường link (endpoint) như /wp-json/wp/v2/posts. React chỉ việc gửi yêu cầu (fetch) đến những đường link này để lấy dữ liệu.
• GraphQL (recommended): Đây là cách tôi khuyến khích các bạn dùng. GraphQL như một “người quản lý” thông minh. Bạn chỉ cần “hỏi” đúng những trường dữ liệu bạn cần (ví dụ: “Cho tôi tiêu đề và ảnh đại diện của 5 bài viết gần nhất”), và GraphQL sẽ trả về chính xác như vậy, không thừa không thiếu. Điều này giúp giảm tải rất nhiều cho mạng và tăng tốc độ. Để dùng GraphQL, bạn sẽ cần cài plugin như WPGraphQL.

3. Next.js: “Đôi cánh” cho Headless WordPress của bạn

Tại sao tôi lại chọn Next.js mà không phải React thuần?

• SSR (Server-Side Rendering) & SSG (Static Site Generation): Hiểu nôm na là Next.js có thể tạo ra các trang HTML sẵn sàng trên server trước khi gửi về trình duyệt. Điều này giúp Google Search Engine “đọc hiểu” website của bạn tốt hơn (SEO thân thiện) và hiển thị trang siêu nhanh ngay từ lần đầu truy cập.
• Routing dễ dàng: Next.js có hệ thống router dựa trên folder. Bạn chỉ cần tạo file pages/about.js là đã có trang /about mà không cần cấu hình phức tạp.
• API Routes: Thậm chí bạn có thể xây dựng thêm các API nhỏ ngay trong Next.js để xử lý các tác vụ Front-end mà không cần đụng đến WordPress.

Bắt đầu dự án WordPress with React (Next.js) đầu tiên:

1. Cài đặt WordPress: Một instance WordPress “trần” trên server hoặc Docker.
2. Cài plugin WPGraphQL: Kích hoạt để WordPress có thể “nói chuyện” GraphQL.
3. Tạo dự án Next.js:Bashnpx create-next-app my-headless-blog cd my-headless-blog
4. Fetch dữ liệu từ WordPress: Trong file pages/index.js của Next.js, bạn sẽ dùng thư viện như graphql-request hoặc Apollo Client để gọi dữ liệu từ WordPress backend của bạn.JavaScript// Ví dụ đơn giản về việc lấy 5 bài viết mới nhất export async function getStaticProps() { const response = await fetch('YOUR_WORDPRESS_GRAPHQL_ENDPOINT', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: ` query NewestPosts { posts(first: 5) { nodes { id title slug excerpt } } } `, }), }); const data = await response.json(); return { props: { posts: data.data.posts.nodes, }, revalidate: 10, // Cập nhật lại dữ liệu sau mỗi 10 giây }; } function HomePage({ posts }) { return ( <div> <h1>Bài viết mới nhất</h1> <ul> {posts.map((post) => ( <li key={post.id}> <h2>{post.title}</h2> <div dangerouslySetInnerHTML={{ __html: post.excerpt }} /> </li> ))} </ul> </div> ); } export default HomePage; Đây chỉ là một đoạn code mẫu để bạn hình dung. Thực tế sẽ có nhiều công đoạn hơn để hiển thị hình ảnh, phân trang, và các thành phần phức tạp khác.

4. Những thách thức (và cách tôi đã vượt qua)

• Tối ưu hình ảnh: WordPress tự động resize ảnh, nhưng React cần các component tối ưu (next/image). Tôi thường dùng Cloudinary hoặc Imgix để xử lý hình ảnh dynamic.
• SEO: Với SSR/SSG của Next.js, SEO đã tốt hơn rất nhiều. Tuy nhiên, bạn vẫn cần cấu hình next-sitemap và đảm bảo các thẻ meta được điền đầy đủ.
• Preview nội dung: Làm sao để người biên tập WordPress xem trước bài viết trên giao diện React trước khi publish? Đây là một tính năng phức tạp hơn, thường yêu cầu setup webhook và preview mode của Next.js.

Lời kết: Đừng ngại thử những điều mới!

Tôi biết việc chuyển từ WordPress truyền thống sang wordpress with react có vẻ “khó nhằn” lúc đầu. Nhưng tin tôi đi, cảm giác khi bạn thấy website của mình load nhanh như chớp, với điểm PageSpeed gần 100, đó là một phần thưởng xứng đáng cho công sức bạn bỏ ra. Nó mở ra cánh cửa cho việc xây dựng những ứng dụng web thực sự hiện đại và mạnh mẽ.

Bạn đã sẵn sàng để “nâng cấp” WordPress của mình chưa? Hay bạn đang gặp khó khăn ở bước nào khi bắt đầu với Headless? Hãy chia sẻ với tôi ở phần bình luận nhé, tôi rất muốn nghe câu chuyện của bạn!