Using WordPress as a Headless CMS for your Next React Project
December 6, 2017
A React Site Powered by WordPress
The site you’re reading this blog post on is built entirely in React, and the platform which I wrote this blog post is WordPress, and the React site is on a completely different hosting server than the one that houses the WordPress backend. Best of all, the entire experience is lightning-fast ⚡️ partly due to the fact that this site is a static site that automatically gets rebuilt when there are any changes in the backend like a new blog post or case study.
Headless CMS: A Decoupled Experience
A Headless CMS is a content management system that separates the backend data from the front-end (what you see in the browser). The beauty of this is that you can now completely separate your backend environment from your front-end, hosting your backend on a secure SSD hosting service like DigitalOcean, and hosting your front-end anywhere else for free like Netlify or GitHub pages.
The Front-end: Gatsby + Netlify
Gatsby: The Gateway Drug to React
GatsbyJS is a static-site generator that lets you create lightning fast static sites based in React. It automatically generates pages and other data based on either markdown files you write, or external data sources you hook up to it, which in my case, is the WordPress REST API. I’m planning on using Gatsby a LOT more this year, especially for brochure sites. So if you’re looking for Gatsby development help, you can hire me for your project.
Netlify: CI Tool + Host Baked in One
I’m also using Netlify to host the front-end. The beauty of Netlify is that it also has a Continuous Integration (CI) tool built-in. This means that I can just hook it up to my GitHub repo, and it watches for any pushes to the branch I want, and automatically triggers a build (which I’ve set to gatsby build).
Triggering Builds with Web-hooks
Another really amazing part of Netlify is that it has webhooks built-in that I can trigger a new build with. In this case, I’m using my WordPress site to fire off a request to the Netlify to triggers a build whenever I create or edit any posts or pages in my WordPress admin area.
The Backend: WordPress + DigitalOcean
WordPress: Best Blogging Platform out there
For the backend, I used the tried-and-true platform that I started my web development career on, WordPress. Since I use the best platform for the job at hand (e.g. using Shopify for eCommerce), I reached for WordPress because I’m planning on blogging quite a bit and writing case studies for projects I’ve worked on, and in my opinion, there simply isn’t a better platform for blogging out there. In addition to the native capabilities, I also needed to add custom fields and post types (for Case Studies, client testimonials, and some data for the home page), so I installed for Advanced Custom Fields and the Custom Post Types UI plugin.
Digital Ocean: VPS Hosting
Anytime I need to use hosting for a project that requires server-side logic, I reach for Digital Ocean, which provides SSD-based VPS hosting, which is a fancy way of saying its lightning fast hosting that gives you complete control of the server-space.
On top of that, their droplets (or server instances) start at just $5/month, which I won’t grow out of anytime soon for my this site since I’m not rendering any html or php, just providing data to my Gatsby front-end.
Thinking Outside the WordPress Front-end Context
Rebuilding my site was a great use-case for a headless experience, but there are also a ton of different things you can do with headless. You can create dynamically built static sites like this, or even develop full blown native apps on iOS/Android that used WordPress for the blog, or create a brochure site that can use Netlify CMS that your client can update from time to time.
Remember you don’t have to completely decouple your website
You don’t have to start form scratch and create a completely decoupled website to utilize WordPress’ REST API. You can use the REST api sparingly on the same WordPress theme you’ve built. For instance, instead of the wordpress blog loop, you can populate a page with posts, and have a load more button or pagination using JavaScript. Another really cool example would be having a real time post ‘like’ count update like twitter for your blog posts.
The Future of Headless
This is only my personal site, and I’ve already seen huge improvements in my site speed and significant reduction in bounce rate. Imagine the gains to be achieved when a much more popular blog or an e-Commerce store are migrated to a headless CMS platform to utilize the lightning fast site speeds and experience we can now achieve. Even a few seconds of page load time reduction could mean thousands of dollars in additional revenue for certain businesses. My personal goal for 2019 is to do a LOT more headless sites, with an emphasis on Headless Shopify stores.
Headless CMS Resources
Here are some resources to things I mentioned above or you will find useful:
– WordPRess REST API Docs
– ACF to REST API — This plugin inputs your custom fields into the WordPress API
– GatsbyJS: Gatsby is a static-site generator powered by React. It’s what I’m using for this site.
- GatsbyWordpress Source Plugin: This plugin lets your query WordPress API data through GraphQL
- Gatsby GraphQl Tutorials
– WP GraphQl: This WordPress plugin lets you query the WP API data through Graphql, which is perfect if you don’t want to use Gatsby.