How to Fetch Data from Strapi API in AstroJS

Have you ever wondered how to create a blazing-fast website using AstroJS while managing your content with Strapi? You’re in the right place! Today, we’ll explore how to fetch data from a Strapi API in your AstroJS project, making your content management a breeze.

Setting Up Your Environment

Before we dive in, make sure you have both AstroJS and Strapi projects up and running. If you’re starting from scratch, you can create a new AstroJS project using:

npm create astro@latest

Creating the API Connection

First, let’s set up our environment variables. Create a .env file in your AstroJS project root:

PUBLIC_STRAPI_URL=http://localhost:1337

Fetching Data from Strapi

Let’s create a utility function to handle our API calls. Create a new file called lib/strapi.js:

export async function fetchApi(endpoint) {
  try {
    const response = await fetch(`${import.meta.env.PUBLIC_STRAPI_URL}/api/${endpoint}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching from Strapi:', error);
    return null;
  }
}

Now, let’s use this in one of our Astro pages. Here’s how you can fetch and display blog posts:

---
import { fetchApi } from '../lib/strapi';

const response = await fetchApi('posts');
const posts = response.data;
---

<div class="posts-grid">
  {posts.map((post) => (
    <article class="post-card">
      <h2>{post.attributes.title}</h2>
      <p>{post.attributes.description}</p>
    </article>
  ))}
</div>

Handling Images and Media

When working with images from Strapi, you’ll need to construct the full URL. Here’s a helper function:

export function getStrapiMedia(url) {
  if (!url) return null;
  return `${import.meta.env.PUBLIC_STRAPI_URL}${url}`;
}

Best Practices and Tips

1. Always implement error handling for your API calls
2. Use TypeScript interfaces for better type safety
3. Consider implementing caching for better performance
4. Use loading states to improve user experience

Remember that Astro’s partial hydration feature can help you optimize your site’s performance by only sending JavaScript where it’s needed!

And there you have it! You’ve successfully connected your AstroJS application to a Strapi backend. This powerful combination gives you the flexibility of a headless CMS with the performance benefits of Astro’s static site generation. Happy coding!