Section 1: Intro to Headless
What is Headless?
Headless is an approach to building a web application where the front end (what users see) and the back end (where data and logic lives) are separate applications. A good analogy is using your phone to download and play music vs using a bluetooth speaker to play music saved on your phone.
Instead of using only WordPress to manage the front end and back end, we use separate applications and connect them through an API.
Why use a Headless approach for your WordPress site?
More control and flexibility
The front end doesn’t rely on a WordPress theme or template
It can be built modern frameworks like React, Svelte, Next.js
You don't rely on plugins to integrate your content with other tools and services
Your content isn't tied to a single medium
The WordPress back end can be connected to a Website, Web app, Mobile app and other interfaces
Better performance and SEO
Modern front end frameworks offer features like SSG and SSR that aren't built into a classic WordPress setup
These features give your application faster initial page loads and better SEO
This happens by rendering the HTML on the server, rather than using JavaScript on the client’s browser to load the page
This lets both users and search engines access your site quickly
Headless WordPress Examples
React/Redux front end
WordPress back end
GraphQL API
Benefits:
Sub-second page loads while delivering content across multiple platforms
Server-side rendering for SEO optimization
Dynamic user experiences and optimal search performance
AngularJS front end
WordPress back end
Custom API endpoints
Benefits:
Custom animation frameworks
Dynamic content loading
Sophisticated multimedia integration
React front end
WordPress back end
GraphQL API
Benefits:
Content delivery across 70+ worldwide bureaus
Personalized news experiences through their AJ Alpha mobile app
Supports multiple languages, including Arabic and Chinese