Headless CMS: o que é, como funciona e por que você precisa dele

Desenvolvimento e Produção

Headless CMS: o que é, como funciona e por que você precisa dele 

April 3, 2023 • by Osmar Demozzi Junior • 5 minutes read

Afinal, o que é Headless CMS?

Um Headless CMS é um sistema de gerenciamento de conteúdo (CMS) apenas de back-end construído desde o princípio como um repositório, que torna o conteúdo acessível por meio de uma API RestFull ou API GraphQL para exibição em plataformas web, aplicativos e sistemas.

O termo surgiu do conceito de cortar a "cabeça" do "corpo", desconectar o front-end do back-end possibilitando deixar as coisas mais independentes sem entraves. Um Headless CMS permanece com uma interface para gerenciar conteúdo e utiliza API RestFull ou GraphQL para entregar conteúdo onde você precisar no seu front-end. 

E aqui está o pulo do gato. 

Um Headless CMS não tem preocupações de como e onde seu conteúdo é exibido. Ele tem apenas o foco de armazenar, fornecer conteúdo estruturado e permitir que os editores de conteúdo colaborem com novos conteúdos. Em diversos tipos de plataformas ou sistemas, um exemplo clássico é você usar o conteúdo do seu site em e-commerce como Shopify, criando artigos de Blog e nessa mesma página você consegue vincular produtos do seu e-commerce levando o usuário direto para a tela de checkout. 

Já os CMS tradicionais de CMS monolítico, regular ou acoplado, tem alguns pontos que diferenciam do CMS Headless sendo: 

  • Um banco de dados para o conteúdo a ser lido e gravado.
  • Integração de leitura e escrita.
  • Interface administrativa para permitir que os editores gerenciem o conteúdo.
  • O front-end real que combina os dados do banco de dados com HTML.
  • É necessário que o front-end seja padronizado com recursos da plataforma.
  • Não é possível utilizar os recursos de conteúdo dinâmicos em diversas fontes externas.

Mas é possível converter um site construído da forma tradicional, em um Headless CMS?


A resposta é: depende! Para que o site consiga aproveitar o seu máximo, é necessário remover o recurso de modelo tradicional, ou seja, desconectar da sua atual construção e fazer com que a sua consulta seja feita por uma API RestFull ou GraphQL.

Dessa forma a construção do site começa a utilizar os recursos externos e usa o CMS apenas para o gerenciamento do conteúdo, tornando uma aplicação limpa escalável e de alta performance e é claro, sem 5000 plug-ins que fazem com que o site se torne lento e obsoleto, instável e inseguro.

Um resumo prático da construção Headless

Criar um site por conta própria parece ser uma grande tarefa, mas ao separar o CMS do front-end, um desenvolvedor pode escolher qualquer tecnologia com a qual já esteja familiarizado e não precisa aprender a tecnologia desse CMS específico.

O grande benefício nesse tipo de construção e utilizando o CMS como fonte do conteúdo através de API, é a flexibilidade em criar sites escaláveis de fácil manutenção otimizando para o Pagespeed e Core Web Vitals do Google, e o melhor, usar tecnologia de ponta sem se preocupar em perder o conteúdo existente. Pois através da renderização do conteúdo em código temos uma aplicação desacoplada, mas ao mesmo tempo dinâmica. 

De bônus a correção e atualização de eventuais Bug's são seguras de tal forma, que o versionamento das informações ajudam no caso de alguma inconsistência enviada para o site que está no ar.

Qual a necessidade de um Headless CMS?

Hoje em dia, gerenciar conteúdo textual, multimídia, também implica em poder distribuí-lo em diferentes plataformas, seja na Web, comércio eletrônico, aplicativo móveis, smartwatches ou sistemas de sinalização em lojas ou shoppings. Ademais, o conteúdo pode ser personalizado de acordo com o usuário, suas preferências, comportamentos, idioma e localização. Por isso, o conteúdo deve ser um pouco desvinculado e o mais independente possível. 

Tornar a gestão de conteúdos o mais independente possível do meio de distribuição significa ter de implementar soluções em que a parte de gestão de informação esteja dissociada da parte de front-end. Os CMSs que lidam apenas com  a parte de gerenciamento de conteúdo são chamados de Headless CMSs. Portanto, a parte do CMS está focada em funcionalidades de conteúdo, como gerenciamento de conteúdo para estrutura, componentes reutilizáveis, controle de versão, estágios de fluxo de trabalho, backup, confiabilidade, predefinições, colaboração, segurança e assim por diante. 

A dissociação do front-end e da parte de gerenciamento de conteúdo significa que a equipe de desenvolvimento pode escolher sua própria solução, sem restrições  ou requisitos especiais vindo de parte CMS, focando apenas no UX e UI, reduzindo o tempo de comercialização e custos. 

Confira alguns comparativos entre os tipos de construção:

CMS tradicional CMS sem cabeça

Independência da plataforma - x

Estrutura de tecnologia substituível - x

Suporte ominichannel - x

Primeira abordagem da API - x

Apocalipse de plugins x -

Localização        x         x

Manutenção do código         -         x

Quando posso usar o Headless CMS?

  • Separar o Front-end e o Back-end de tecnologia do seu site para poder se mover mais rapidamente.
  • Sites, aplicativos da web que usam estruturas JavaScript.
  • Aplicativos móveis nativos (iOS, Android, Windows Phone).
  • Sites criados com geradores de sites estáticos, como Jekyll, Gatsby, Middleman ou Hugo.
  • Use-o para sinalizadores de recursos de seu próprio produto para agendar lançamentos de novos recursos.
  • Como uma interface de configuração para sua solução de automação residencial.
  • Enriqueça o comércio eletrônico (Shopify, BigCommerce, Commercetools, Hybris, Magento2 ou outros) com um CMS adequado para sua equipe de marketing.
  • Ou, apenas para gerenciar conteúdo para sua intranet. Como SAP, e Sales Force

A tecnologia é somente para sites?

Um Headless CMS pode entregar seu conteúdo por meio de uma API diretamente para onde você precisar. Devido à abordagem Headless, o conteúdo pode ser usado em um aplicativo iOS, em um aplicativo Android ou em qualquer plataforma e tecnologia que você imaginar, portanto é uma opção poderosíssima para os desenvolvedores móveis e da web.

Opções de Headless CMS

Listamos aqui algumas opções de Headless CMS:

  • Storyblok
  • Contentful
  • Prismic
  • Sanity
  • Netlify CMS
  • Abobe Marketing CMS

Existem também outras opções, mas olhando para os recursos e conceitos, essas são as plataformas que você deve dar uma olhada. O WordPress e o Drupal, já estão trabalhando para, pelo menos, oferecer uma abordagem de API. Ambas tentam fazer o CMS funcionar de uma forma para a qual não foram inicialmente projetados.

Recentemente tivemos um projeto em que utilizamos o WordPress API para criar um portal de notícias que incorporava tecnologias Serverless e Headless. Isso resultou em um impressionante aumento de desempenho que estava de acordo com as últimas atualizações do Google Core Web Vitals. Usando a API conseguimos conectar junto ao Airtable uma estrutura para atualização das páginas institucionais do site e WordPress está sendo utilizado apenas para os conteúdos de artigos imagens e textos. O resultado você pode conferir no site da Disque

Caso ainda reste alguma dúvida fico a disposição para um bate-papo sobre essa tecnologia e sobre seu projeto.

Resumo

Não existe um CMS 100% certo para cada caso de uso. Mas utilizar a tecnologia Headless para construção de sua aplicação, seja ela Web, App ou e-commerce, só traz benefícios e escalabilidade. 

Não somente para reutilizar seu conteúdo com muito mais facilidade, mas também se quiser mudar de tecnologia e não precisar se preocupar com a plataforma que você escolheu restringindo o Design e engessando a forma como sua empresa relaciona com conteúdo Web, mobile e Offline.

Share this post

desenvolvimento
Osmar Demozzi Junior

Obra.ag

Osmar Demozzi Junior, Um pouco de tudo na Obra.ag

Related Posts