How to Fetch WordPress Posts in AstroJS Using REST API

Combining the power of WordPress as a headless CMS with AstroJS’s blazing-fast performance is becoming increasingly popular among developers. Today, I’ll walk you through how to fetch WordPress posts using the REST API in your AstroJS project – a perfect solution for those looking to leverage WordPress’s content management capabilities while enjoying the benefits of a modern static site generator.

Setting Up Your Project

First things first, let’s create a new AstroJS project if you haven’t already. Your WordPress site needs to be up and running with the REST API enabled (it’s enabled by default in modern WordPress installations).

The WordPress REST API endpoint we’ll be using is /wp-json/wp/v2/posts. This endpoint gives us access to all published posts on your WordPress site.

Creating the Integration

Let’s dive into the actual implementation. We’ll create a simple yet effective setup to fetch and display your WordPress posts.

Here’s how you can fetch posts from your WordPress site:

---
const response = await fetch('https://your-wordpress-site.com/wp-json/wp/v2/posts');
const posts = await response.json();
---

One of the beautiful things about AstroJS is its built-in support for server-side rendering. This means your WordPress content will be fetched at build time, resulting in blazing-fast page loads for your users.

Displaying Your Posts

Once you’ve fetched your posts, displaying them is straightforward. Here’s how you might structure your posts page:

---
const response = await fetch('https://your-wordpress-site.com/wp-json/wp/v2/posts');
const posts = await response.json();
---

<div class="blog-grid">
  {posts.map((post) => (
    <article class="post-card">
      <h2>{post.title.rendered}</h2>
      <div set:html={post.excerpt.rendered} />
      <a href={`/blog/${post.slug}`}>Read More</a>
    </article>
  ))}
</div>

Advanced Features and Optimization

Remember to handle pagination and loading states for a better user experience. The WordPress REST API supports pagination out of the box using query parameters like per_page and page.

You might also want to consider implementing caching strategies to minimize API calls and improve performance. AstroJS’s built-in asset handling makes this process smooth and efficient.

And there you have it! You’ve successfully integrated WordPress content into your AstroJS site using the REST API. This setup gives you the best of both worlds: WordPress’s robust content management system and AstroJS’s modern development experience and performance benefits.

Remember to properly handle errors, implement loading states, and consider caching strategies for production environments. Happy coding!