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.
Obra.ag
Osmar Demozzi Junior, Um pouco de tudo na Obra.ag