Gatsby é um SSG (Static Site Generator) baseado em React e alimentado pelo GraphQL. Tudo bem, mas o que tudo isso significa? Isso quer dizer que o Gatsby é um framework que tem o objetivo de juntar as melhores funcionalidades do React como webpack, react router, recursos do GraphQL e outras diversas ferramentas para desenvolvedores front-end em um mesmo pacote, facilitando assim a criação de sites e aplicações web.
Com este framework você pode desenvolver em React e quando fizer o "build" de seu código ele irá gerar arquivos estáticos que serão acessados pelos usuários. Isto traz diversas vantagens para seus sites em React como suporte a SEO, uma velocidade incrível, sistema de cache, entre diversos outros itens que você pode comparar nesta página. Além de oferecer diversos plugins e sites pré-desenvolvidos para que você possa iniciar com meio caminho andado.
Porque precisei usar Gatsby?
Bem, eu estava desenvolvendo um sistema iniciando com create-react-app e o SEO era extramamente necessário neste caso, porém só fui descobrir que o React não tinha uma boa compatibilidade com o Crawler do Google na hora do deploy, uma tragédia né? Como o create-react-app trabalha principalmente com CSR (Client Side Rendering) ele não consegue uma boa indexação pois quando o bot do Google acessa o site ele teoricamente não "existe" o que dificulta na indexação de algumas páginas.
Basicamente o fluxo que o crawler estava fazendo era Acessa o site > O app solicita informações da API (back-end) > As informações são dispostas na tela > Indexa a página > não visualiza nenhum link ou páginas extras > sai do site, assim a única página indexada foi a home (index), as 300+ páginas restantes simplesmente não existem para o Google.
Tentei de diversas maneiras fazer o SEO funcionar com CSR, porém não obtive sucesso. Talvez por falta de experiência ou não há uma forma eficiente mesmo.
Questionei em alguns forúns e me indicaram trabalhar com SSR (Server Side Rendering) utilizando o Next.js, confesso que iniciei a migração de todo o sistema para este modelo, mas diversos fluxos ficavam muuuito diferentes e eu teria que recriar muita coisa. E foi neste momento que me indicaram o Gatsby.
Estou fazendo a migração do sistema para este framework e até o momento ele está atendendo muito bem e creio que irá suprir diversas necessidades, além de eu conseguir trabalhar com novas tecnologias como o GraphQL que está se mostrando muito eficiente. Até o momento estou com SEO funcional, sistema mais rápido e um fluxo similar ao app inicial.
Provavelmente farei mais alguns posts sobre o Gatsby, estou finalizando a leitura completa da documentação para ter uma base melhor e talvez comece a utilizá-lo para novos projetos como padrão.
Recomendo dar uma olhada no post do Grayson: What is Gatsby?
Se tiver alguma dúvida ou sugestão é só comentar abaixo!
Até mais.