Strapi y Astro

Strapi es un headless CMS de código abierto y personalizable.

Integración con Astro

Esta guía creará una función wrapper para conectar Strapi con Astro.

Prerrequisitos

Para comenzar, necesitarás tener lo siguiente:

Un proyecto de Astro - Si aún no tienes un proyecto de Astro, nuestra guía de instalación te ayudará a poner en marcha en poco tiempo.
Un servidor de Strapi CMS - Puedes configurar un servidor de Strapi en un entorno local.

Agregando la URL de Strapi en el archivo `.env`.

Para agregar la URL de Strapi a Astro, crea un archivo .env en la raíz de tu proyecto (si aún no existe) y agrega la siguiente variable:

STRAPI_URL="http://127.0.0.1:1337" # o usa tu dirección IP

Reinicia el servidor de desarrollo para utilizar esta variable de entorno en tu proyecto Astro.

Si deseas tener IntelliSense para tu variable de entorno, puedes crear un archivo env.d.ts en el directorio src/ y configurar ImportMetaEnv de la siguiente manera:

interface ImportMetaEnv {
  readonly STRAPI_URL: string;
}

Ahora tu directorio raíz debería incluir el/los nuevos archivo(s):

Directorysrc/
- env.d.ts
.env
astro.config.mjs
package.json

Creando el wrapper de la API

Crea un nuevo archivo en src/lib/strapi.ts y agrega la siguiente función envolvente para interactuar con la API de Strapi:

interface Props {
  endpoint: string;
  query?: Record<string, string>;
  wrappedByKey?: string;
  wrappedByList?: boolean;
}

/**
 * Obtiene datos de la API de Strapi.
 * @param endpoint - El endpoint para realizar la consulta
 * @param query - Los parámetros de consulta para agregar a la URL
 * @param wrappedByKey - La clave para desempaquetar la respuesta
 * @param wrappedByList - Si la respuesta es una lista, desempaquétala.
 * @returns
 */
export default async function fetchApi<T>({
  endpoint,
  query,
  wrappedByKey,
  wrappedByList,
}: Props): Promise<T> {
  if (endpoint.startsWith('/')) {
    endpoint = endpoint.slice(1);
  }

  const url = new URL(`${import.meta.env.STRAPI_URL}/api/${endpoint}`);

  if (query) {
    Object.entries(query).forEach(([key, value]) => {
      url.searchParams.append(key, value);
    });
  }
  const res = await fetch(url.toString());
  let data = await res.json();

  if (wrappedByKey) {
    data = data[wrappedByKey];
  }

  if (wrappedByList) {
    data = data[0];
  }

  return data as T;
}

Esta función requiere un objeto con las siguientes propiedades:

endpoint - El endpoint desde el cual estás obteniendo datos.
query - Los parámetros de consulta para agregar al final de la URL.
wrappedByKey - La clave data en el objeto que envuelve tu Response.
wrappedByList - Un parámetro para “desempaquetar” la lista devuelta por Strapi y devolver solo el primer elemento.

Opcional: Creando la interfaz Article

Si estás utilizando TypeScript, crea la siguiente interfaz Article en el archivo src/interfaces/article.ts para que coincida con los tipos de contenido de Strapi:

export default interface Article {
  id: number;
  attributes: {
    title: string;
    description: string;
    content: string;
    slug: string;
    createdAt: string;
    updatedAt: string;
    publishedAt: string;
  };
}

Directorysrc/
- Directoryinterfaces/
  - article.ts
- Directorylib/
  - strapi.ts
- env.d.ts
.env
astro.config.mjs
package.json

Mostrando una lista de artículos

Actualiza tu página de inicio src/pages/index.astro para mostrar una lista de publicaciones de blog, cada una con una descripción y un enlace a su propia página.

Importa la función wrapper y la interfaz. Agrega la siguiente llamada a la API para obtener tus artículos y devolver una lista:

---
import fetchApi from '../lib/strapi';
import type Article from '../interfaces/article';

const articles = await fetchApi<Article[]>({
  endpoint: 'articles', // el tipo de contenido a obtener
  wrappedByKey: 'data', // la clave para descomponer la respuesta
});
---

La llamada a la API solicita datos desde http://localhost:1337/api/articles y devuelve articles: un array de objetos JSON que representan tus datos:

[
  {
    id: 1,
    attributes: {
      title: "What's inside a Black Hole",
      description: "Maybe the answer is in this article, or not...",
      content: "Well, we don't know yet...",
      slug: "what-s-inside-a-black-hole",
      createdAt: "2023-05-28T13:19:46.421Z",
      updatedAt: "2023-05-28T13:19:46.421Z",
      publishedAt: "2023-05-28T13:19:45.826Z"
    }
  },
  // ...
]

Utilizando los datos del array articles devuelto por la API, muestra tus publicaciones de blog de Strapi en una lista. Estas publicaciones estarán vinculadas a sus propias páginas individuales, las cuales crearás en el siguiente paso.

---
import fetchApi from '../lib/strapi';
import type Article from '../interfaces/article';

const articles = await fetchApi<Article[]>({
  endpoint: 'articles?populate=image',
  wrappedByKey: 'data',
});
---

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Strapi y Astro</title>
  </head>

  <body>
    <main>
      <ul>
        {
          articles.map((article) => (
            <li>
              <a href={`/blog/${article.attributes.slug}/`}>
                {article.attributes.title}
              </a>
            </li>
          ))
        }
      </ul>
    </main>
  </body>
</html>

Generando páginas de artículos.

Crea el archivo src/pages/blog/[slug].astro para generar dinámicamente una página para cada artículo.

Directorysrc/
- Directoryinterfaces/
  - article.ts
- Directorylib/
  - strapi.ts
- Directorypages/
  - index.astro
  - Directoryblog/
    [slug].astro
- env.d.ts
.env
astro.config.mjs
package.json

Generación de sitios estáticos

En el modo estático predeterminado de Astro (SSG), utiliza getStaticPaths() para obtener tu lista de artículos desde Strapi.

---
import fetchApi from '../../lib/strapi';
import type Article from '../../interfaces/article';

export async function getStaticPaths() {
  const articles = await fetchApi<Article[]>({
    endpoint: 'articles',
    wrappedByKey: 'data',
  });

  return articles.map((article) => ({
    params: { slug: article.attributes.slug },
    props: article,
  }));
}
type Props = Article;

const article = Astro.props;
---

Crea la plantilla para cada página utilizando las propiedades de cada objeto de publicación.

---
import fetchApi from '../../lib/strapi';
import type Article from '../../interfaces/article';

export async function getStaticPaths() {
  const articles = await fetchApi<Article[]>({
    endpoint: 'articles',
    wrappedByKey: 'data',
  });

  return articles.map((article) => ({
    params: { slug: article.attributes.slug },
    props: article,
  }));
}
type Props = Article;

const article = Astro.props;
---

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>{article.attributes.title}</title>
  </head>

  <body>
    <main>
      <img src={import.meta.env.STRAPI_URL + article.attributes.image.data.attributes.url} />

      <h1>{article.attributes.title}</h1>

      <!-- Renderizar texto plano -->
      <p>{article.attributes.content}</p>
      <!-- Renderizar markdown -->
      <MyMarkdownComponent>
        {article.attributes.content}
      </MyMarkdownComponent>
      <!-- Renderizar html -->
      <Fragment set:html={article.attributes.content} />
    </main>
  </body>
</html>

Renderizado en el lado del servidor

Si has optado por el modo SSR con output: server o output: hybrid, genera tus rutas dinámicas utilizando el siguiente código:

Crea el archivo src/pages/blog/[slug].astro:

---
import fetchApi from '../../../lib/strapi';
import type Article from '../../../interfaces/article';

const { slug } = Astro.params;

let article: Article;

try {
  article = await fetchApi<Article>({
    endpoint: 'articles',
    wrappedByKey: 'data',
    wrappedByList: true,
    query: {
      'filters[slug][$eq]': slug || '',
    },
  });
} catch (error) {
  return Astro.redirect('/404');
}
---

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>{article.attributes.title}</title>
  </head>

  <body>
    <main>
      <img src={import.meta.env.STRAPI_URL + article.attributes.image.data.attributes.url} />

      <h1>{article.attributes.title}</h1>

      <!-- Renderizar texto plano -->
      <p>{article.attributes.content}</p>
      <!-- Renderizar markdown -->
      <MyMarkdownComponent>
        {article.attributes.content}
      </MyMarkdownComponent>
      <!-- Renderizar html -->
      <Fragment set:html={article.attributes.content} />
    </main>
  </body>
</html>

Este archivo obtendrá y representará los datos de la página desde Strapi que coinciden con el parámetro dinámico slug.

Dado que estás utilizando una redirección a /404, crea una página 404 en src/pages:

<html lang="es">
  <head>
    <title>No encontrada</title>
  </head>
  <body>
    <p>Lo siento, esta página no existe.</p>
    <img src="https://http.cat/404" />
  </body>
</html>