Using WordPress as a Headless CMS for your Next React ProjectJanuary 14, 2019
Earlier last year, I gave a talk at WordCamp San Diego, about using WordPress is a headless CMS for a react project, and I finally got a chance to practice what I preach.
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
For those of you that don’t know, a Headless CMS separates the backend data from what you see in the browser. The beauty of this is that you can now completely separate your backend 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 etc based on either markdown files you can 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.
Netlify: CI Tool + Host Baked in One
I’m also using Netlify to host the front-end of the site. The beauty of Netlify is that it’s a CI(continuous integration) tool and a static site host baked in one. 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
Triggering Builds with Web-hooks
The really amazing part of Netlify is that I can now trigger a new build based on web-hooks I connect to the repo. In this case, I’m using a web-hook in my WordPress backend that 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
I used for 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 and client testimonials), so I reached for Advanced Custom Fields and the Custom Post Types UI plugin.
Digital Ocean: VPS Hosting
Anytime I need to use hosting for a PHP-based project 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’s also a ton of different things you can do with headless. You can create dynamically re-built static sites like me or even develop full blown native apps on iOS/Andoird 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
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 hundreds of 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.
Want Some Help Making your Website Lightning Fast?
Book a free 15-minute consultation to see how I can help you migrate your site to a lightning fast Headless CMS build!