Como implementar Headless Drupal? Nosso case de sucesso com o CMS "sem cabeça"

Publicado em 15 de dezembro de 2015 às 17:07

Recentemente, nos deparamos com um projeto em Drupal levemente fora do padrão. Como em qualquer desafio, procuramos encontrar a melhor solução possível para obtermos ganhos em usabilidade, visibilidade na web, performance e segurança.

Tínhamos no papel todos os pontos que precisávamos trabalhar:

  • Front-end complexo e com alta frequência de modificações

  • Regras avançadas de SEO, envolvendo grande necessidade de controle de tags e meta-tags

  • Painel de controle simples e sem muito envolvimento de site-builders

  • Possíveis futuras manutenções no front-end de pessoas que podem não ter conhecimentos específicos em Drupal

Com isso, chegamos ao consenso de que a melhor solução seria adotar o Drupal 7 como camada de gerenciamento de conteúdo, deixando a exibição do mesmo para o cliente (arquivos HTML estáticos fazendo chamadas ajax para o gerenciador), ou seja, Headless Drupal, ou “Drupal sem cabeça”.

Essa solução era quase ideal para prosseguirmos, só havia um único porém:

Por que diabos servir o conteúdo via javascript quando precisamos que ele esteja indexado no Google?

Obs.:  Sabemos que, em algumas situações, o Google consegue sim interpretar e executar javascript, mas só em algumas situações.

Para lidar com isso, pensamos em algumas alternativas, entre elas:

  1. Voltar para o Drupal com cabeça e incorporar a camada de temas novamente ao projeto

  2. Criar uma solução que entra nas páginas do CMS, executa todas as chamadas ajax e salva o resultado final em arquivos que futuramente serão servidos estaticamente pelo web server

Analisando os prós e contras de cada alternativa e decidimos prosseguir com a segunda opção.

Com isso, inventamos uma ferramenta que faz exatamente isso: o Frost

O Frost transforma páginas que se auto-constroem com requisições javascript em arquivos .html puros, cheios de conteúdo dentro, assim, todo nosso conteúdo agora é visível para os buscadores.

Abaixo, um desenho de como a solução funciona atualmente:


headless

  1. Periodicamente, o Frost é executado em uma rotina

  2. Em sua execução, ele entra no site indicado e aguarda as requisições Ajax terminarem.

  3. Quanto tudo estiver finalizado e o DOM totalmente preenchido, ele salva o arquivo na pasta correta de acordo com o path da URL.


Essa solução torna-se viável para transformar qualquer CMS (ou sites, aplicações e portais) em arquivos HTML estáticos. Com isso, tivemos grandes ganhos em alguns pontos:


  1. Mais performance pois o bootstrap do Drupal só é tocado quando um image style ainda não foi gerado e salvo em arquivo físico;

  2. Mais segurança pois podemos limitar o acesso do Painel (Drupal) apenas para nosso servidor estático (gerado pelo Frost) e pelos CDNs que servirão as imagens e assets do site;

  3. Front-end totalmente flexível, sem dependência de coisas como jQuery ou qualquer outro framework que o Drupal e módulos contrib necessitam para exibir o conteúdo;

  4. Portas abertas (obviamente com muito controle) para qualquer outro cliente (um app, por exemplo) servir conteúdo do gerenciador no futuro.

Abaixo, os resultados do Google PageSpeed Insights no momento da primeira entrega oficial do projeto:

desk_insight

 

mobile_insight

Contudo, ainda existem muitas melhorias que podemos fazer. Nossa meta, é transformar a ferramenta em um produto completo para que possamos resolver problemas de visibilidade na web no mundo inteiro.

E você? Conte-nos como foi seu primeiro case de sucesso utilizando um headless CMS!

Baixe nossa datasheet sobre Drupal