Todo proprietário de site compartilha um objetivo comum: um site incrivelmente rápido, seguro e com um design verdadeiramente único. Usar uma configuração de WordPress Headless é uma das maneiras modernas de alcançar isso.
Este método oferece o melhor dos dois mundos. O editor de conteúdo poderoso e familiar do WordPress que você usa hoje não vai a lugar nenhum.
O que muda é que seu conteúdo é entregue a um front-end completamente separado e personalizado. É isso que dá ao seu site sua velocidade e sensação única.
Essa separação pode desbloquear um novo nível de desempenho e liberdade criativa para sua presença online. Ajuda seu site a se destacar da multidão.
Vamos explorar os prós e contras juntos. Nosso objetivo é ajudá-lo a se sentir confiante sobre se este é o caminho certo para você.
Aqui está um breve resumo dos tópicos que abordaremos neste guia:
- O que é WordPress Headless?
- Como Funciona o WordPress Headless?
- Quais são as Vantagens de Usar o WordPress Headless?
- Quais são as Desvantagens de um Site WordPress Headless?
- Você Deveria Usar um Site WordPress Headless?
- Como Criar um Site WordPress Headless
- Perguntas Frequentes sobre WordPress Headless
O que é WordPress Headless?
WordPress Headless é um termo para qualquer site que usa o WordPress como software de back-end para gerenciar dados e conteúdo, mas usa tecnologias separadas para exibir os dados no front-end.
O back-end é o termo usado para a área de administração de um site. É onde você cria conteúdo como posts e páginas, instala plugins, gerencia comentários e muito mais.
O front-end é a área publicamente visível do seu site.
Isso é o que os usuários veem quando visitam seu site em seus navegadores.
O WordPress normalmente lida com ambos os componentes em um poderoso pacote de software. Você pode simplesmente exibir seu site usando qualquer tema do WordPress.
No entanto, alguns desenvolvedores e proprietários de sites podem ter requisitos diferentes e podem precisar usar outras tecnologias, como React.js, Angular.js, Faust.js e outras, para criar um front-end personalizado para seus sites.
O WordPress Headless permite que eles usem essas tecnologias enquanto ainda utilizam o WordPress no back-end para facilitar o gerenciamento de conteúdo.
Como Funciona o WordPress Headless?
O WordPress vem com uma área de administração fácil de usar onde você cria conteúdo e gerencia seu site. Ele também inclui um mecanismo de template para exibir o front-end do seu site usando temas.
Para mais detalhes, veja nosso artigo sobre como o WordPress funciona nos bastidores.
O WordPress também vem com uma API chamada WordPress REST API.
Essa API fornece uma interface de programação para que os desenvolvedores acessem os dados do site WordPress em formato JSON.
Ao criar um site WordPress Headless, os desenvolvedores usam a REST API para buscar dados do WordPress. Depois disso, eles podem usá-los em seus aplicativos ou outras tecnologias de front-end como React.js, Angular.js, Faust.js e mais para criar um site personalizado.
Quais são as Vantagens de Usar o WordPress Headless?
O WordPress Headless pode ser benéfico em alguns cenários específicos. Falaremos sobre algumas das vantagens de usar o WordPress Headless nesses casos.
1. O WordPress Headless Pode Ser Mais Rápido Que um Site WordPress Regular
Muitos desenvolvedores acreditam que o WordPress Headless pode ser usado para criar um site WordPress muito mais rápido.
Ao separar o front-end do site usando tecnologias como React.js, muitos desenvolvedores tentam entregar um código mais eficiente do que a maioria dos temas do WordPress.
No entanto, em nossa experiência, técnicas mais simples de otimização de desempenho do WordPress funcionam tão bem quanto o WordPress headless para a maioria dos sites e casos de uso de pequenas empresas.
2. Integre Dados do WordPress Headless em Outros Aplicativos
Digamos que você tenha um aplicativo móvel e agora queira integrar seu blog ou outra seção do seu site WordPress a esse aplicativo.
O WordPress headless pode ajudá-lo a trazer seus dados do WordPress para outros aplicativos, e você pode usar diferentes tecnologias para criar uma experiência de usuário perfeita.
Da mesma forma, se você tem um site estático e precisa de uma seção dinâmica apenas para uma seção específica, como um blog, avaliações ou loja online, o WordPress headless pode integrar dados do WordPress ao seu site estático.
3. Publique em Múltiplas Plataformas via WordPress Headless
O WordPress headless torna seus dados do WordPress portáteis para que você possa levá-los a qualquer lugar.
Você pode usar os dados em suas campanhas de marketing, postar em plataformas de mídia social, usá-los em dispositivos IoT, como smart speakers, alimentar uma ferramenta de inteligência artificial, conectar-se a assistentes virtuais e muito mais.
4. O WordPress Headless é muito mais acessível do que CMS headless proprietários
O WordPress headless é muito mais acessível e poderoso do que soluções proprietárias de "CMS corporativo" como o Contentful, que facilmente custarão dezenas de milhares apenas para hospedagem (sem incluir custos de desenvolvimento).
Quais são as Desvantagens de um Site WordPress Headless?
Criar um site WordPress headless também pode colocar seu site em certas desvantagens. Vamos dar uma olhada em algumas delas.
1. O WordPress Headless é Mais Caro em Comparação com Sites WordPress Tradicionais
Você precisará contratar um desenvolvedor para criar um front-end personalizado para o seu site. Isso pode facilmente custar dezenas de milhares de dólares.
Se você é um desenvolvedor, gastará um tempo valioso criando um front-end personalizado.
Mesmo que você esteja usando um framework de desenvolvimento front-end, levaria mais tempo e esforço do que usar um tema WordPress pronto com cache adequado no nível do servidor / DNS.
2. Alguns Plugins do WordPress Podem Não Funcionar
Plugins são como aplicativos para o seu site WordPress. Eles permitem que você adicione novos recursos e expanda a funcionalidade do seu site.
Um site WordPress headless pode não ser capaz de aproveitar alguns dos plugins do WordPress.
Por exemplo, alguns dados de plugins do WordPress podem não ser acessíveis usando a REST API, ou os recursos do plugin podem exigir um tema WordPress para funcionar corretamente.
Dito isso, plugins populares do WordPress como AIOSEO têm uma extensão REST API que permite criar sites WordPress headless otimizados para SEO.
3. Dores de Cabeça de Manutenção
Você basicamente usará plataformas separadas para o front-end e o back-end do seu site, e precisará mantê-los separadamente.
Ocasionalmente, as coisas podem falhar em um dos lados. Você precisará depender de desenvolvedores para resolver esses problemas, ou você gastará seu tempo valioso corrigindo-os.
A complexidade adicional tornará as coisas mais difíceis à medida que seu negócio cresce.
Você Deveria Usar um Site WordPress Headless?
Na nossa opinião, a maioria dos usuários do WordPress não precisa usar um site WordPress headless ou outros tipos de framework headless.
É caro, desnecessariamente complicado e inadequado para a grande maioria dos proprietários de sites, blogueiros, pequenas empresas ou lojas online.
Por exemplo, se velocidade e desempenho são suas principais preocupações, seu site WordPress existente pode facilmente superar qualquer site WordPress headless.
Todos os principais plugins de cache do WordPress vêm com cache de página, pré-carregamento de cache, cache de objeto e recursos de compressão gzip.
Ativar esses recursos pode aumentar significativamente a velocidade do seu site sem a necessidade de contratar desenvolvedores.
Combine isso com uma poderosa CDN e firewall de aplicativos web como Cloudflare ou Sucuri, e seu site ficará ainda mais rápido.
Veja o estudo de caso de como tornamos o WPBeginner mais rápido do que sites headless.
Quanto às integrações, existem mais de 59.000 plugins do WordPress oferecendo integrações com quase todas as plataformas de terceiros disponíveis.
Existem até ferramentas como Uncanny Automator que permitem integrações com sites WordPress e ferramentas de terceiros usando Zapier.
Se você precisar de uma integração que não esteja disponível por meio de um plugin WordPress existente, talvez deva contratar um desenvolvedor para escrever um plugin personalizado.
Isso custará muito menos, e você pode até ganhar dinheiro online vendendo-o como um download digital para outros usuários do WordPress.
Quem Deve Usar o WordPress Headless?
Acreditamos que o WordPress headless só deve ser usado em cenários muito específicos.
Primeiro, você precisa avaliar se há uma necessidade genuína para um CMS headless.
Por exemplo, uma empresa que construiu um site ou aplicativo personalizado. Eles podem precisar do WordPress para recursos de gerenciamento de conteúdo mais fáceis e, nesse cenário, faz sentido usar o WordPress headless.
Em segundo lugar, você deve ter o orçamento para contratar e manter desenvolvedores ou ter as habilidades necessárias para manter um CMS headless.
Lembre-se, um CMS WordPress headless é usado para criar um novo aplicativo personalizado, ou um que usa o WordPress para facilitar a criação e o gerenciamento de conteúdo.
Coisa Importante a Observar com o WordPress Headless
Como proprietário de uma empresa sem conhecimentos técnicos, às vezes é difícil saber se você realmente precisa do WordPress headless.
Alguns desenvolvedores e agências WordPress tentarão empurrar sites headless para você, e você precisa saber no que está se metendo. Lembre-se que o incentivo deles é cobrar mais dinheiro.
Se o único motivo pelo qual eles propõem o WordPress headless é velocidade ou SEO, você deve perguntar o que eles já fizeram para otimizar a velocidade do seu site e qual o impacto que a mudança para o WordPress headless pode ter. Se você não obtiver uma resposta concreta, deve procurar uma segunda opinião.
Você ficará surpreso ao saber que, para a grande maioria dos sites, as melhorias são insignificantes, mas o custo para desenvolver e manter sites WordPress headless é muito maior.
Faça o que fizer, não deixe que ninguém o convença a mudar do WordPress para algo como o Contentful. Você ficará muito decepcionado.
Ouvimos inúmeros proprietários de empresas mudarem apenas para perceberem o erro que cometeram e, em seguida, voltarem para o WordPress.
Dito isso, se você está 100% convencido de que precisa de um site WordPress headless, então abaixo está um guia rápido passo a passo.
Como Criar um Site WordPress Headless
Dependendo das ferramentas que você deseja usar para o front-end, existem muitas maneiras de criar um site WordPress headless.
Para este tutorial, mostraremos como criar um site WordPress headless usando apenas as páginas estáticas geradas pelo WordPress. Esta NÃO é a maneira mais flexível de criar um site WordPress headless, mas é a maneira mais fácil para iniciantes.
Primeiro, você precisa criar um site WordPress que você deseja usar como seu CMS headless.
Este precisa ser um site ativo em seu próprio nome de domínio e conta de hospedagem web.
Recomendamos SiteGround. Eles são uma das empresas de hospedagem WordPress mais rápidas e um provedor oficialmente recomendado .
Os servidores da SiteGround são alimentados pelo Google Cloud, que possui muitas ferramentas de otimização de desempenho integradas.
Alternativamente, se você puder gastar um pouco mais de tempo, dê uma olhada na WP Engine. O plano Atlas deles é feito para grandes sites WordPress headless e é voltado para desenvolvedores.
O Atlas vem com uma conta sandbox gratuita, conteúdo modular personalizado, blueprints pré-configurados para acelerar seu fluxo de trabalho e uma integração mais profunda com o plugin WPGraphQL.
Você também pode criar um site WordPress local em seu próprio computador.
Depois disso, você pode começar a trabalhar em seu site adicionando posts e páginas. Você também pode escolher um tema WordPress e personalizá-lo.
Assim que seu site estiver pronto, você precisará instalar e ativar o plugin Simply Static. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.
Após a ativação, você precisará visitar a página Simply Static » Settings para configurar o plugin.
A partir daqui, você pode escolher o caminho de URL que deseja usar em seus arquivos estáticos.
Por exemplo, se você souber o URL ou o nome de domínio onde hospedará seus arquivos estáticos, poderá fornecer esse URL no campo 'Absolute URLs'.
Se você não tiver certeza, poderá usar a opção 'Relative URLs'.
Em seguida, mude para a aba 'Include/Exclude'. A partir daqui, você pode adicionar páginas adicionais para incluir ou excluir.
Você também pode usar expressões regex para excluir URLs que correspondam a um padrão específico.
Não se esqueça de clicar no botão 'Salvar Alterações' para armazenar suas configurações.
Agora, você está pronto para gerar arquivos estáticos para seu site headless. Simplesmente vá para a página Simply Static » Generate e clique no botão 'Generate Static Files'.
O plugin então começará a rastrear seu site e armazenar arquivos estáticos em uma pasta temporária. Isso pode levar algum tempo, dependendo de quantas páginas seu site possui.
Ao terminar, você verá uma notificação de sucesso com um link para baixar os arquivos para o seu computador em formato de arquivo zip.
Após baixar o arquivo zip, você precisará extraí-lo.
Agora você está pronto para fazer o upload dos arquivos extraídos para o seu site ou para o servidor onde deseja hospedar seu site headless.
Você pode se conectar ao seu site usando um cliente FTP ou o aplicativo gerenciador de arquivos no painel de controle de hospedagem.
Uma vez conectado, faça o upload dos arquivos estáticos extraídos que você baixou anteriormente para o seu site.
Depois disso, você pode visitar seu site estático para vê-lo em ação.
Observação: Para atualizar seu site estático, você precisará criar novo conteúdo em sua instalação do WordPress e, em seguida, repetir todo o processo novamente para substituir os arquivos estáticos que estão sendo servidos aos seus usuários.
É importante notar que esta não é a maneira mais flexível de criar um site WordPress estático.
Quando você usa uma solução WordPress headless como o WP Engine Atlas, você obtém melhores ferramentas para desenvolvedores, modelos de sites iniciais, guias práticos, soluções de implantação de produção mais inteligentes e muito mais.
Para sites maiores e soluções empresariais, recomendamos o uso do WP Engine Atlas juntamente com o WPGraphQL para desbloquear todo o poder do CMS WordPress headless.
Dito isso, se você é proprietário de uma pequena empresa e leu em algum lugar que precisa de um site WordPress headless para melhorar seu SEO, esse é um conselho errado. Você pode obter resultados semelhantes melhorando o desempenho do seu site seguindo nosso guia sobre como acelerar o WordPress.
Perguntas Frequentes sobre WordPress Headless
Entendemos que o conceito de WordPress headless pode gerar muitas dúvidas. Para ajudar você a ter uma visão mais clara, reunimos respostas para algumas das perguntas mais comuns que ouvimos de usuários como você.
1. Qual é a principal diferença entre o WordPress regular e o WordPress headless?
A principal diferença é como seu site é exibido aos visitantes. O WordPress regular lida com tudo em um único pacote: gerenciamento de conteúdo (o backend) e o design do site (o tema de front-end). O WordPress headless separa esses dois, usando o WordPress apenas para o gerenciamento de conteúdo do backend, enquanto uma tecnologia completamente diferente é usada para construir um front-end personalizado.
2. Um site WordPress headless é mais caro para construir e manter?
Sim, significativamente. Construir um front-end personalizado para um site headless exige a contratação de desenvolvedores qualificados, o que pode ser muito caro. Você também tem dois sistemas separados para manter (o backend do WordPress e o front-end personalizado), o que adiciona complexidade e potenciais custos futuros se algo precisar ser corrigido ou atualizado.
3. O WordPress headless é melhor para velocidade e SEO?
Não necessariamente. Embora um site headless possa ser muito rápido, o que é bom para SEO, você pode frequentemente alcançar desempenho semelhante ou até melhor desempenho em um site WordPress tradicional. Usando uma boa hospedagem, um plugin de cache de qualidade e uma CDN, você pode tornar um site padrão incrivelmente rápido sem o custo e a complexidade adicionais. Além disso, esteja ciente de que alguns recursos de plugins de SEO podem não funcionar sem um tema tradicional.
4. Ainda posso usar meus plugins favoritos do WordPress com uma configuração headless?
Depende. Muitos plugins, especialmente aqueles que adicionam recursos ao front-end do seu site (como construtores de formulários ou construtores de páginas), podem não funcionar corretamente porque dependem do sistema de temas do WordPress. Embora alguns plugins populares ofereçam suporte à API REST para funcionar com headless, você pode perder o acesso a uma grande parte do ecossistema de plugins do WordPress que torna o WordPress tão poderoso.
5. Então, quando devo realmente considerar usar o WordPress headless?
Você deve considerar o WordPress headless apenas para situações muito específicas. Por exemplo, se você já tem um aplicativo móvel e deseja integrar o conteúdo do seu blog a ele, ou se precisa enviar o conteúdo do WordPress para várias plataformas e dispositivos diferentes ao mesmo tempo. Para a grande maioria das pequenas empresas, blogs e lojas online, uma configuração tradicional do WordPress é mais prática, acessível e fácil de gerenciar.
Esperamos que este artigo tenha ajudado você a aprender sobre o WordPress headless e se você deve usá-lo para o seu site. Você também pode querer ver nosso guia sobre como fazer um teste de velocidade do WordPress ou nossa seleção especializada das hospedagens WordPress mais rápidas.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
David Lim
Outro tópico sobre o qual eu nem tinha ouvido falar nas notícias. Mas agora que foi falado, é como se eu já tivesse visto sites com front-end autodesenvolvido antes. Acho que o Moz também é assim. Não foi feito com um WordPress comum, mas com algo desenvolvido internamente.
Dennis Muthomi
Um ponto que eu enfatizaria é a importância de avaliar cuidadosamente suas necessidades específicas antes de pular para uma configuração headless.
Como você sugeriu, muitos problemas de desempenho e integração podem ser resolvidos com configurações tradicionais do WordPress usando plugins e técnicas de otimização.
Por exemplo, tive grande sucesso usando o WP Rocket para cache e o Cloudflare como CDN para melhorar drasticamente a velocidade do site sem a necessidade de uma arquitetura headless.
Ah, e obrigado pelo aviso sobre agências que promovem soluções headless desnecessariamente. É crucial que os proprietários de sites entendam as implicações e os custos a longo prazo associados à manutenção de uma configuração headless.
Seu artigo serve como um excelente recurso para tomar uma decisão informada.
Kushal Phalak
Como designer e desenvolvedor frontend, é muito interessante ver essas mudanças. É incrível que eu possa usar o WordPress como CMS e usar NextJS no frontend, com os benefícios de maior desempenho e flexibilidade. É uma pena que alguns plugins não sejam suportados atualmente, mas acho que serão no futuro próximo. Embora possa não ser adequado para quem não entende de código.
WPBeginner Support
Não é uma solução para todos, então não há garantias de que todos os plugins adicionarão suporte para isso no futuro.
Admin
Jiří Vaněk
Obrigado pelo artigo. Eu não tinha ideia de que algo como o WordPress headless existia, e nem me ocorreu que o backend não estaria necessariamente conectado ao frontend. Mais uma vez, aprendi algo novo. Incrível.
WPBeginner Support
Glad we could share
Admin
James Winfield
WordPress sem cabeça (headless) é uma solução interessante se você é um engenheiro/desenvolvedor e quer aprender tecnologias como NextJS e GraphQL, que você pode usar para criar sites de carregamento rápido no estilo React.
Não tenho certeza se há muito benefício de desempenho (embora o Lighthouse adore os dois sites que fiz com o template headless do NextJS), embora você também possa implantar via Vercel, que é gratuito, até um certo limite. Estou adorando essa tecnologia, e é uma ótima maneira para mim praticar as habilidades mais requisitadas de um engenheiro f/e.
Caso contrário, concordo com seus comentários, especialmente se não desenvolvedores forem empurrados para isso por agências/desenvolvedores!
WPBeginner Support
Thanks for sharing your experience
Admin