WordPress headless é um tipo de arquitetura de aplicação web onde a aplicação WordPress é responsável apenas em gerenciar o back-end da aplicação e fornecer uma API para consumo de dados por uma aplicação front-end independente do WordPress.
Esse tipo de aplicação tem uma série de vantagens que podem beneficiar o seu projeto WordPress. Mas o melhor caso para explicar as vantagens de uma aplicação WordPress headless é fazendo uma comparação com a estrutura tradicional do WordPress.
Arquitetura Tradicional vs. WordPress Headless
Antes de falar sobre o que é WordPress Headless, primeiro cobriremos a arquitetura tradicional do WordPress, a maioria dos sites WordPress rodam nessa estrutura. Onde na mesma estrutura desenvolvedores e criadores de conteúdo trabalham numa aplicação monolítica.
Esse tipo de arquitetura pode ter uma vantagem da sua arquitetura simplificada onde você gerencia apenas uma estrutura, mas pode ser o seu ponto fraco, pois uma única falha pode tirar toda a sua aplicação do ar. Outro ponto relacionado a performance, o seu WordPress pode ficar sobrecarregado por gerenciar front e back-end da duas aplicação.
Como funciona a arquitetura WordPress Headless
Vamos utilizar um gráfico simplificado para representar a arquitetura WordPress headless. A sua principal vantagem é a divisão de responsabilidades da aplicação e segurança, pois com essa estrutura os usuários não sabem que estão a utilizar uma aplicação WordPress, pois a camada de front-end abstrai toda a estrutura do WordPress.
Os criadores de conteúdo continuam a adicionar conteúdo no WordPress e os desenvolvedores trabalha no front-end da aplicação que é uma estrutura diferente do WordPress. Assim temos uma estrutura diferente, toda a parte de deploy da aplicação front-end fica independente do WordPress. Caso algo aconteça com o back-end do WordPress, a aplicação front-end pode fazer um cache das últimas requisições a API do WordPress e continuar funcionando.
Outro ponto Importante, o WordPress headless pode servir a sua API com duas opções, com REST API ou GraphQL e essa camada pode possuir otimizações de performance. Além do WordPress não precisar usar processamento para montar o front-end da aplicação.
Porque você deve utilizar uma arquitetura headless?
Implementação de uma arquitetura headless possui diversas vantagens. Performance e segurança já mencionamos aqui, mas agora iremos entrar em mais detalhes.
Performance – Front-end da aplicação fica livre para uso de vários frameworks Javascript, muito deles possuem eu otimização de performance, assim, ajudando no core web vitals de seu site. Por exemplo, nextjs tem gerador de sites estáticos, técnicas de pre-carregamento de páginas e otimização de carregamento de fontes e imagens.
Aumento da segurança – Uma vez que você tem seu WordPress somente para fornecer a API de dados, podemos restringir o acesso ao administrador, assim colocando mais uma camada de segurança. Outro ponto importante, a aplicação front-end irá rodar com JavaScript assim o usuário irá ter acesso à estrutura tradicional do WordPress.
Experiência de desenvolvimento – Ponto interessante de se trabalhar com frameworks JavaScript é que não temos a estrutura de desenvolvimento tradicional do WordPress baseado em Template. Neste caso podemos definir as nossas próprias rotas e a organização do projeto passa a ser baseada em componente no lugar de templates.
Write Once, Publish Everywhere – É um conceito que a sua tradução significa escreva uma vez e publique em qualquer lugar. Neste caso, um WordPress headless pode se conectar com qualquer tipo de aplicação, web, iOS, Android, IoT ou qualquer tipo de aplicação que aceite os protocolo HTTP e consiga ler um json.
Desenvantagens de utilizar headless CMS
A implementação de um site WordPress headless pode ter um custo maior caso necessite implementar código personalizado no lado do CMS assim criando a necessidade de manutenção de duas aplicações diferentes. Outra desvantagem pode ser a maior complexidade na infraestrutura da sua aplicação, duas aplicações rodando em paralelo, tem o benefício da performance, mas aumenta o custo de manutenção.
Outro ponto que pode ser negativo é o aumento da sua stack de desenvolvimento, muitas empresas preferem ficar apenas sobre o guarda-chuva do PHP. Com headless você terá uma necessidade maior sobre conhecimento JavaScript ou outra linhagem para seu front-end.
Como habilitar Headless no WordPress?
Você pode habilitar Headless no WordPress de diversas formas, você pode utilizar o WordPress com a estrutura tradicional e acessar apenas a API, ou Instalar um plugin que deixa apenas a API acessível publicamente.
No primeiro caso você precisa entender que o conteúdo ficará exposto como o tema funcionando normalmente, pode ser uma vantagem caso queira usar como ambiente de teste. Mas além de consumir o processamento do seu servidor WordPress, você também precisa informar aos motores de busca que o conteúdo do WordPress Headless não precisa ser indexado.
Já a segunda opção com o plugin, removendo toda a interface pública do WordPress é a mais recomendada, assim só a aplicação javascript é responsável por exibir o front-end da sua aplicação, e você não corre nenhum risco com conteúdo duplicado. Existem vários plugins que habilitam o seu site ficar full headless, lembrando uma vez instalado todo o tema do seu site será desabilitado.
- Faust
- Headless Mode
- Headless CMS
Como conectamos com uma aplicação WordPress Headless
A forma de conectar a sua aplicação com um WordPress Headless é através de uma API, atualmente WordPress fornece duas opções. GraphQL e REST API. As duas APIs tem comportamentos diferentes, mas o resultado final é um arquivo JSON onde podemos ler os dados com qualquer tipo de aplicação que suporte esse formato.
GraphQL API
GraphQL significa Graph Query Language. Gráfico, que significa “Gráfico de dados do aplicativo”. Portanto, GraphQL é uma especificação para uma linguagem de consulta para interagir com dados de API como um gráfico de dados.
O GraphQL não está vinculado a nenhum banco de dados específico ou tecnologia de back-end, em vez disso, o GraphQL pode ser usado com código e dados existentes. No caso do WordPress podemos trabalhar com o plugin WPGraphQL, ele permite realizar consultas com GraphQL no banco de dados do WordPress.
Uma das vantagens de se trabalhar com GraphQL é a capacidade de filtrar somente as informações necessárias, então podemos agrupar diferentes tipos de dados e filtrar.
REST API
REST é uma arquitetura focada na criação de endpoints onde cada endereço de irá fazer uma chamada para uma consulta de dados como posts, páginas, categorias, autores. FULL REST API é um passo extra onde podemos além de consultar dados, podemos incluir e alterar dados via endpoints.
A REST API no WordPress não precisa de plugin isso sendo uma vantagem referente a GraphQL. O WordPress fornece suporte a REST API no seu core a mais de cinco anos. REST API com WordPress é um recurso estável, onde podemos consultar qualquer tipo de dados e ainda adicionar filtros sobre o conteúdo das consultas.
Atualmente o WordPress possui dezenas de rotas para REST API, mas esse número pode aumentar conforme a quantidade de plugins instalados. Uma das desvantagens da REST API referente a GraphQL é para consultas que envolve diferentes tipos precisas requisitar.
Mas com essas duas opções podemos conectar com o nosso WordPress.
Conclusão
Headless é um conceito que vem crescendo bastante, empresas estão começando a aumentar a procura por profissionais que tenham conhecimento sobre essa arquitetura, muito por conta dos benefícios que essa arquitetura fornece. Então se você é um desenvolvedor vale a pena aprender mais sobre a arquitetura e conhecer diferentes projetos que se integram com essa arquitetura. Para mais conteúdo relacionado sobre o assunto confira os posts sobre:
Deixe um comentário