O problema do WordPress tradicional
WordPress alimenta 43% da web. Mas o WordPress tradicional tem problemas sérios de performance:
- TTFB alto: PHP precisa processar cada request no servidor
- Plugins pesados: cada plugin adiciona CSS/JS
- Temas bloated: temas populares carregam 500KB+ de assets desnecessários
- Database queries: 50-200 queries por page load é comum
Resultado: LCP de 4-8 segundos em muitos sites WordPress.
A solução: WordPress Headless + Astro
A ideia é simples:
- WordPress como CMS (back-end) — autores escrevem conteúdo normalmente
- Astro como front-end — gera HTML estático no build
- API REST conecta os dois
Resultado
- TTFB < 50ms (arquivo estático servido pelo CDN)
- LCP < 1s
- Zero JavaScript por padrão
- Core Web Vitals perfeitos
Configuração do WordPress como Headless
1. Instalar WordPress normalmente
Pode ser em um subdomínio: admin.seusite.com ou cms.seusite.com.
2. Habilitar a API REST
A API REST já vem habilitada por padrão desde o WordPress 4.7. Endpoints principais:
GET /wp-json/wp/v2/posts → lista de posts
GET /wp-json/wp/v2/posts/{id} → post individual
GET /wp-json/wp/v2/pages → páginas
GET /wp-json/wp/v2/categories → categorias
GET /wp-json/wp/v2/media → mídia (imagens)3. Configurar campos personalizados
Instale o ACF (Advanced Custom Fields) para campos extras:
- SEO title e description
- Imagem Open Graph
- Schema markup customizado
// functions.php — expor ACF na API REST
add_filter('acf/settings/rest_api_format', function() {
return 'standard';
});4. Desabilitar o front-end do WordPress
// functions.php — redirecionar front-end para o Astro
add_action('template_redirect', function() {
if (!is_admin() && !wp_doing_ajax()) {
wp_redirect('https://seusite.com', 301);
exit;
}
});Configuração do Astro
1. Criar projeto Astro
npm create astro@latest meu-site
cd meu-site2. Buscar posts do WordPress
// src/lib/wordpress.ts
const WP_API = 'https://cms.seusite.com/wp-json/wp/v2';
export async function getPosts(perPage = 100) {
const res = await fetch(
`${WP_API}/posts?per_page=${perPage}&_embed`
);
return res.json();
}
export async function getPostBySlug(slug: string) {
const res = await fetch(
`${WP_API}/posts?slug=${slug}&_embed`
);
const posts = await res.json();
return posts[0] || null;
}3. Gerar páginas estáticas
---
// src/pages/blog/[slug].astro
import { getPosts, getPostBySlug } from '../../lib/wordpress';
import BaseLayout from '../../layouts/BaseLayout.astro';
export async function getStaticPaths() {
const posts = await getPosts();
return posts.map((post) => ({
params: { slug: post.slug },
}));
}
const { slug } = Astro.params;
const post = await getPostBySlug(slug);
---
<BaseLayout title={post.title.rendered}>
<article set:html={post.content.rendered} />
</BaseLayout>Deploy e rebuild automático
Webhook no WordPress
Quando um post é publicado/atualizado, o WordPress dispara um webhook que rebuilda o Astro:
// functions.php — webhook no save_post
add_action('save_post', function($post_id) {
if (wp_is_post_revision($post_id)) return;
wp_remote_post('https://api.netlify.com/build_hooks/SEU_HOOK', [
'body' => json_encode(['trigger' => 'wordpress']),
]);
}, 10, 1);Tempo de rebuild
Com 100 posts, o build do Astro leva ~15 segundos. Com 1.000 posts, ~60 segundos. Aceitável para a maioria dos casos.
SEO no Astro (o que o WordPress faz nativamente)
O que você precisa reimplementar no Astro:
| Funcionalidade | WordPress (Yoast) | Astro |
|---|---|---|
| Meta title/description | Automático | Manual ou componente |
| Sitemap.xml | Plugin | @astrojs/sitemap |
| Schema.org | Plugin | Componente manual |
| Canonical | Automático | Manual no <head> |
| Open Graph | Plugin | Componente manual |
| robots.txt | Plugin | Arquivo estático |
Quando NÃO usar headless
- Equipe não-técnica que precisa de preview visual WYSIWYG
- E-commerce com WooCommerce — a complexidade de checkout headless é alta
- Sites simples com 5-10 páginas — usar Astro puro é mais simples
- Orçamento limitado — a manutenção de dois sistemas custa mais
Performance comparativa
Dados de um projeto real (blog com 85 posts):
| Métrica | WP Tradicional | WP Headless + Astro |
|---|---|---|
| TTFB | 1.2s | 0.04s |
| LCP | 3.8s | 0.9s |
| CLS | 0.15 | 0 |
| JavaScript | 380KB | 0KB |
| Lighthouse score | 62 | 100 |
WordPress: The Missing Manual
Guia completo de WordPress, incluindo API REST e configurações avançadas para desenvolvedores.
Ver na Amazon#anúncio · Link de afiliado Amazon. Ao comprar por este link, você apoia o site sem custo adicional.
Conclusão
WordPress headless com Astro é a melhor combinação para quem quer a facilidade editorial do WordPress com a performance de um site estático. O setup inicial é mais complexo, mas o resultado em SEO e experiência do usuário compensa — especialmente para blogs e sites de conteúdo com equipe editorial.