Neste artigo irei abordar algumas noções básicas do framework, como funciona nos bastidores, por que você pode considerar usá-lo para um projeto e também irei apresentar um case de sucesso.
O que é GatsbyJS?
É um gerador de sites moderno e incrivelmente rápido para React, o site oficial define desta forma. Mas o que eles querem dizer:
É incrivelmente rápido! Pode acreditar em mim, qualquer pessoa que visitar o seu site vai dizer Ohhhh!
É um gerador de sites moderno: você pode criar sites usando-o react.js e todo o seu conteúdo é gerado em por um build.
Mais para frente eu vou abordar um case de sucesso, mas convido você a visitarem o site da minha nano empresa que obviamente esta escrito em Gatsby: dalee.dev
Por que usar o Gatsby?
Hoje em dia, cada vez mais, os acessos e pesquisas no google estão sendo principalmente feitos pelos celulares e smartphones. No primeiro trimestre 2021: > 50% de todo o tráfego na internet é a partir de dispositivos móveis;
E também em 2021 entram no ar as novas regras para para rankeamento de sites do algoritmo do google o Core Web Vitals, que é descrita pela Google como "a chave para o sucesso de qualquer site na web".
Core Web Vitals é que um conjunto de métricas relacionadas à velocidade, capacidade de resposta e estabilidade visual. Elas se somam a outros fatores, como velocidade de carregamento da página e facilidade de uso para dispositivos móveis, para compor os fatores de rankeamento do Google.
Aí que o Gatsby entra, oferecendo uma arquitetura para os sites otimizarem carregamento, execução de scripts, otimizar imagens de acordo com cada dispositivo e por aí vai.
Como funciona?
Gatsby faz a busca dos dados usando GraphQL em tempo de construção, todos esses dados são usados para gerar os arquivos estáticos em HTML, CSS e JavaScript.
Veja como funciona o fluxo de construção do Gatsby.
Quais Vantagens
Por que você deve considerar o uso de GatsbyJs?
1. Performance
Eu já mencionei o termo 'rápido' e 'velocidade' muitas vezes nesse artigo, e claro todos sabemos que arquivos estáticos trazem essa característica.
2. Segurança
Nunca mais vou me preocupar com vulnerabilidade na minha aplicação, pois arquivos estáticos não deixam nenhuma porta aberta para ataques.
3. Plugins
Existem muitos plugins úteis disponíveis no site oficial do Gatsby, que podem ser adicionados facilmente na aplicação via npm. Alguns exemplos de plugins:
- gatsby-plugin-image: Adicionar imagens responsivas ao seu site e, ao mesmo tempo, mantendo alto desempenho;
- gatsby-source-wordpress: Obtenha dados do WordPress de forma escalável e eficiente com WPGraphQL;
- gatsby-plugin-react-helmet: Usado para gerir metatags e SEO;
- gatsby-plugin-google-tagmanager: Adiciona facilmente o Google Tagmanager ao site Gatsby.
Existem muitos plugins disponíveis que podem nos ajudar a acelerar a maior parte do trabalho e tornar nossa aplicação mais rica.
4. Starters
Os Staters do Gatsby são templates que já vem com a estrutura criada e que agiliza o processo de desenvolvimento. No site oficial tem um filtro onde você pode buscar uma template com determinada característica, por exemplo: Gatsby 3 + Bootstrap.
A documentação é super amigável, e eu definitivamente recomendo que você comece por aí se quiser aprender Gatsby.
5. Jamstack
Jamstack é a cultura de usar JavaScript, APIs e marcação para construir sites. Eles se concentram principalmente em como você pode usar essas tecnologias para construir sites que não dependem do gerenciamento de servidores, mas desacoplam o front-end e o back-end.
Construir sites com Gatsby é novamente uma forma de seguir a cultura Jamstack. Isso resulta em melhor desempenho, maior segurança, escalonamento fácil e barato e melhor experiência do desenvolvedor.
6. Baseado em ReactJs
A comunidade ReactJs é poderosa com muitos componentes existentes a um clique de distância.
7. Facilidade de integração com CMS
Nos possibilita integração com os principais gerenciadores de conteúdo do mercado, o Wordpress por exemplo, que hoje gerencia mais de 30% de toda a internet.
8. SEO
Gatsby permite que seus sites aproveitem várias técnicas de otimização de SEO. Isso faz com que seu site seja classificado em uma posição mais elevada nos mecanismos de pesquisa. Existem também muitos plug-ins que podem ajudá-lo a facilitar o trabalho
Caso de Sucesso
Como mencionei no início deste artigo, eu gostaria de trazer um exemplo de como essa tecnologia conseguiu trazer de forma concreta o aumento de performance e logo o aumento de acesso orgânico ao site de um dos meus projetos que implementamos Gatsby.
O cenário foi esse:
Fui incumbido na missão de criar uma arquitetura para um blog escrito em Wordpress, que contava com mais de 3000 acessos diários, com mais de 500 artigos escritos e com uma performance no Google Pagespeed menor que 30 pontos. A missão foi elevar a pontuação para maior que 90 pontos.
Para o nosso cliente esse seria um investimento estratégico para ser um diferencial competitivo junto aos players que geram conteúdo para o segmento.
No fim das contas conseguimos elevar a pontuação do Google Pagespeed para 99 no mesmo mês em que a ferramenta do google foi descontinuada e substituída pelo 'Core Web Vitals'.
Também é importante ressaltar que teve uma força tarefa da equipe de redação e design para padronizar as imagens, urls e linkagens.
Aqui você pode conferir o print do comparativo das pontuações do Core Web Vitals.
Você gostou do artigo, tem alguma dúvida ou sugestão, manda um email para contato@dalee.dev.
Que a força esteja com vocês!
Published May 14, 2021 by f0rmig4
