Introduction

Traditional WordPress sites render both backend and frontend using PHP themes. This works for simple sites but can limit performance and modern application requirements. The headless (decoupled) approach uses WordPress purely as a content management system and serves data to a separate React.js frontend using the built-in WordPress REST API.

Why Choose Headless WordPress + React?

The benefits are significant:

• Lightning-fast frontend performance using static generation or SSR
• Complete separation of backend content from UI code
• Deliver content on multiple platforms — Web, Mobile, Digital Screens
• Better security — database and PHP are fully hidden from the public
• Developers get to use tools like TypeScript, Tailwind, Vite, etc.
• Frontend can be updated or replaced anytime without touching WordPress

However, there are trade-offs:

• Custom solution needed for draft preview
• Higher setup complexity — two separate applications
• Heavy JavaScript dependency
• Deployment of backend and frontend needs proper planning

Architecture Overview

A typical no-plugin headless setup consists of:

• WordPress Backend – Manages content and media
• REST API – WordPress built-in API for structured data
• React Frontend – Handles UI rendering and routing
• Separate Hosting Environments for backend and frontend

WordPress (Head) ←→ REST API ←→ React Frontend (Body)
       ↑                 ↓               ↑
   Content          JSON Data        Fast UI + SSR
    

Headless WordPress + React Data Flow

WordPress → REST API → React → Browser Flow

WordPress provides JSON responses for posts, pages, menus, custom content — enabling a modern frontend to render the content efficiently.

Custom Authentication Flow

For protected content or admin-only preview, developers can implement a custom token-based authentication using WordPress REST endpoints and custom code — no plugins required.

Setting Up the WordPress Backend

Requirements without plugins:

• Enable built-in REST API (enabled by default)
• Create custom endpoints using register_rest_route in functions.php
• Add post meta and custom fields using core WordPress features
• Implement authentication using custom REST handlers

Example REST API Request

GET: https://yourdomain.com/wp-json/wp/v2/posts?slug=your-post
    

Building the React Frontend

Recommended stack: React.js + TypeScript + Tailwind CSS (or Next.js for SSR)

Fetching Data from REST API

export async function getPost(slug) {
  const res = await fetch(
    `https://yourdomain.com/wp-json/wp/v2/posts?slug=${slug}`
  );
  const post = await res.json();
  return post[0];
}
    

Rendering Content

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);

  return (
    <article>
      <h1>{post.title.rendered}</h1>
      <div dangerouslySetInnerHTML={{__html: post.content.rendered }} />
    </article>
  );
}
    

Handling Preview & Authentication

To preview drafts without plugins:

• Create custom REST endpoint that returns draft content for authorized users
• Set a secret preview token in WordPress admin
• Use middleware or API routes in React to validate access

Performance & SEO Best Practices

Conclusion