← Construction Diary

WordPress as a Data Repository: Using WP Only to Feed Astro

How to use the consolidated administrative interface of WordPress as a Headless CMS to provide data via REST API for a modern frontend in Astro.

WordPress is unmatched when it comes to content management. Editors, writers, and site administrators are accustomed to its interface (wp-admin), its scheduling tools, and its block ecosystem. However, using WordPress to serve the public site directly often introduces performance bottlenecks, infrastructure costs, and constant security vulnerabilities.

A robust solution to bypass these problems without forcing the editorial team to migrate platforms is to use WordPress as a Headless CMS, extracting posts and pages data via API to feed a modern, ultra-fast frontend in Astro.

Why decouple WordPress?

In the traditional WordPress model, page rendering occurs dynamically on the server at each visitor request (or relies on complex caching plugins that create local static files on the PHP server). By decoupling the system:

  1. Security is drastically increased: Your WordPress server can be placed behind a private network or strict Firewall rules, preventing wp-admin and the PHP engine from being exposed to the public internet.
  2. Maximum Performance: Astro consumes the posts from the WordPress API only at build time and generates pure static HTML/CSS files. The final public site is delivered directly from a CDN (like Cloudflare Pages), resulting in instant load times.
  3. Cheap or Free Hosting: Since the final site is static, you can serve it without traditional hosting costs, while your WordPress panel can run on a smaller, local infrastructure or a low-cost VPS.

Configuring WordPress as a Headless CMS

WordPress already has a robust native REST API enabled by default. Any installation exposes the /wp-json/wp/v2/posts endpoint with all published posts.

To prepare WordPress for this scenario, some best practices help:

  • Disable Public Themes: Install a blank theme or use plugins that redirect all traffic from the traditional frontend directly to a static page or the admin panel.
  • Use Custom Fields Plugins (like ACF): If you need specific metadata for your articles (such as source links, custom reading time, or SEO fields), the Advanced Custom Fields plugin easily exposes these variables in the REST API.

Consuming data in Astro

In Astro, we consume posts synchronously during the build. We can create a helper function in TypeScript to fetch this data and render it dynamically on the pages.

Example of a direct call:

// src/lib/wordpress.ts
export interface WPPost {
  id: number;
  title: { rendered: string };
  slug: string;
  content: { rendered: string };
  excerpt: { rendered: string };
  date: string;
}

export async function getWordPressPosts(): Promise<WPPost[]> {
  const res = await fetch('https://your-private-wordpress.com/wp-json/wp/v2/posts?per_page=100');
  if (!res.ok) throw new Error('Failed to fetch posts from WordPress');
  return res.json();
}

And in your Astro dynamic routing file (e.g., src/pages/blog/[slug].astro), you map WordPress posts to static routes:

---
import { getWordPressPosts } from '../../lib/wordpress';

export async function getStaticPaths() {
  const posts = await getWordPressPosts();
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
---
<h1>{post.title.rendered}</h1>
<article set:html={post.content.rendered} />

Performance and security optimizations in the REST API

Since Astro will make requests to the WordPress API every time the site is built, you should optimize this communication channel:

  • Reduced Fields: By default, the WordPress API sends dozens of fields you probably won’t use (such as nested tags data, internal metadata links, etc.). Use the _fields parameter in the query string (e.g., ?_fields=author,id,title,slug,content,date) to save bandwidth and speed up server response.
  • API Caching: If your site has thousands of articles, calls can overload the database. Configure Cloudflare or a local cache (like Redis) in front of the WordPress API to speed up builds.

Conclusion

Uniting the editorial power of WordPress with the technical excellence of Astro is one of the best architectural solutions for content portals and medium to high-traffic blogs. You don’t throw away the investment in WordPress usability, but you gain an extremely fast, secure, and low-cost operational site.

Technologies and Concepts