Alexsandro Assis
← Diário de Construção
WordPress 6 min

WordPress como Repositório de Dados: Usando o WP Apenas para Alimentar o Astro

Como utilizar a interface administrativa consolidada do WordPress como um Headless CMS para fornecer dados via REST API para um frontend moderno em Astro.

Echo Show 5 | Smart display com Alexa
Indicado Echo Show 5 | Smart display com Alexa
Fire TV Stick HD
Indicado Fire TV Stick HD
Kindle E-reader de 11ª Geração
Indicado Kindle E-reader de 11ª Geração

O WordPress é inigualável quando o assunto é gerenciamento de conteúdo. Editores, redatores e administradores de sites estão habituados com sua interface (wp-admin), suas ferramentas de agendamento e seu ecossistema de blocos. No entanto, usar o WordPress para servir o site público diretamente costuma introduzir gargalos de performance, custos de infraestrutura e vulnerabilidades de segurança constantes.

Uma solução robusta para contornar esses problemas sem forçar a equipe editorial a migrar de plataforma é utilizar o WordPress como um Headless CMS, extraindo os dados de posts e páginas via API para alimentar um frontend moderno e ultrarrápido em Astro.

Por que desacoplar o WordPress?

No modelo tradicional do WordPress, a renderização das páginas ocorre de forma dinâmica no servidor a cada requisição de visitante (ou depende de plugins de cache complexos que criam arquivos estáticos locais no servidor PHP). Ao desacoplar o sistema:

  1. A segurança é drasticamente aumentada: O seu servidor WordPress pode ser colocado atrás de uma rede privada ou de regras rígidas de Firewall, impedindo que o wp-admin e o motor PHP fiquem expostos à internet pública.
  2. Performance máxima: O Astro consome os posts da API do WordPress apenas no momento do build e gera arquivos HTML/CSS estáticos puros. O site público final é entregue diretamente de uma CDN (como Cloudflare Pages), resultando em tempos de carregamento instantâneos.
  3. Hospedagem barata ou gratuita: Como o site final é estático, você pode servi-lo sem custos de hospedagem tradicionais, enquanto o seu painel do WordPress pode rodar em uma infraestrutura menor e local ou numa VPS de baixo custo.

Configurando o WordPress como Headless CMS

O WordPress já possui uma REST API nativa e robusta habilitada por padrão. Qualquer instalação expõe o endpoint /wp-json/wp/v2/posts com todos os posts publicados.

Para preparar o WordPress para este cenário, algumas boas práticas ajudam:

  • Desabilitar temas públicos: Instale um tema em branco ou utilize plugins que redirecionem todos os acessos do frontend tradicional diretamente para uma página estática ou para o painel administrativo.
  • Utilizar plugins de Custom Fields (como ACF): Se precisar de metadados específicos para seus artigos (como links de fontes consultadas, tempo de leitura personalizado ou campos de SEO), o plugin Advanced Custom Fields expõe essas variáveis na REST API facilmente.

Consumindo os dados no Astro

No Astro, nós consumimos os posts de maneira síncrona durante o build. Podemos criar uma função auxiliar em TypeScript para buscar esses dados e renderizá-los dinamicamente nas páginas.

Exemplo de chamada direta:

// 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://seu-wordpress-privado.com/wp-json/wp/v2/posts?per_page=100');
  if (!res.ok) throw new Error('Falha ao buscar posts do WordPress');
  return res.json();
}

E no seu arquivo de rotas dinâmicas do Astro (ex: src/pages/blog/[slug].astro), você mapeia os posts do WordPress para rotas estáticas:

---
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} />

Otimizações de performance e segurança na REST API

Como o Astro fará requisições para a API do WordPress toda vez que o site for compilado, você deve otimizar esse canal de comunicação:

  • Campos Reduzidos: Por padrão, a API do WordPress envia dezenas de campos que você provavelmente não usará (como dados de tags aninhadas, links de metadados internos, etc.). Utilize o parâmetro _fields na query string (ex: ?_fields=author,id,title,slug,content,date) para economizar banda e acelerar a resposta do servidor.
  • Cache de API: Se o seu site tiver milhares de artigos, as chamadas podem sobrecarregar o banco de dados. Configure o Cloudflare ou um cache local (como Redis) na frente da API do WordPress para agilizar as compilações.

Conclusão

Unir o poder editorial do WordPress com a excelência técnica do Astro é uma das melhores soluções arquiteturais para portais de conteúdo e blogs de médio a alto tráfego. Você não joga fora o investimento na usabilidade do WordPress, mas ganha um site extremamente veloz, seguro e de baixo custo operacional.

Tecnologias e Conceitos