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.
Atualização 09/19
Houve uma análise falha no item de cima onde eu fiquei totalmente travado com o Gatsby pela limitação do software deles. Vou explicar os pontos abaixo para que você possa entender a situação e analisar se realmente seu projeto necessita de Gatsby e pode utilizar ele como stack principal.
No mês 06 quando eu criei este post creio que o conhecimento em minha mente ainda estava muito vago e não consegui compreender totalmente os conceitos, e sim eu refiz o sistema inteiro novamente em NextJS e era ele quem eu realmente precisava.
Um ponto que deve ser compreendido é que o Gatsby precisa rodar uma build para gerar todas as páginas do site e depois você deixa elas online, super rápidas e eficientes. É uma abordagem interessante, mas tem um problema, e se você quiser atualizar alguma informação nas páginas geradas? Uma solução para isso é o cliet-data-fetching mas isso faz com que seu app seja um app react normal, axios -> get -> retornar informações da api -> popula o state -> mostra os dados. E foi nesse momento que travou tudo, eu precisava atualizar +2000 páginas que já estavam geradas e então precisaria fazer build novamente várias vezes, e uma build deste tamanho no Gatsby leva alguns minutos... Eu deveria ter compreendido isso, afinal o slogan deles é "Gatsby is a blazing fast modern static site generator for React.", mas é errando que se aprende.
A atualização de um sistema desta maneira fica improdutiva e consome muito recurso. E neste momento eu voltei ao NextJS para entender mais a fundo o conceito de SSR e foi com ele que resolvi meu problema, vi alguns videos como:
Creio que prestando atenção nesses vídeos você consegue diferenciar qual a necessidade de seu projeto. Resumidamente:
GatsbyJS
- Arquivos estáticos gerados na build: Todo o site estará disponivel em HTML/CSS/JS após a build em uma pasta de itens estáticos que já consumiram as informações do GraphQL na geração de seu conteúdo.
- Normalmente é necessário rodar a build novamente para atualizar itens ou criar novos posts/páginas. *Se souber algum forma eficiente de fazer isso me ensine nos comentários*
- SEO e Velocidade impecáveis: Como o site já está "pronto" o acesso dos usuários e motores de busca acontece em uma velocidade incrível
- Simplicidade no desenvolvimento: A documentação e forma de desenvolver o projeto é muito bem conduzida, além de diversos plugins oficiais que facilitam em muitos pontos
- GraphQL para consumir os dados: Nunca tinha utilizado o GraphQL e no Gatsby fui "forçado" a utilizar e confesso que gostei bastante, uma sintaxe limpa, comandos didáticos e um painel para testar consultas.
NextJS
- Arquivos estaticos que não possuem getInitialProps são gerados na build e arquivos dinâmicos são renderizados pelo servidor (SSR) na primeira consulta. Essa funcionalidade foi lançada enquanto eu batia a cabeça no projeto em julho/19 (Automatic Static Optimization)
- Complexidade no desenvolvimento: Em algum momento você irá esbarrar em algo que exige mais conhecimento na parte de servidor (back-end) para que consiga gerar recursos mais eficientes, neste quesito o Gatsby é muito mais simples. Por exemplo, como gerar um sitemap no SSR?
- A velocidade do site em um geral é extremamente rápida e a parte de SEO pode ser simplificada com alguns pacotes da comunidade como next-seo
Tanto o Gatsby quando o Next são ótimas ferramentas de trabalho, geram sites muito rápidos e eficientes, porém possuem finalidades bem distintas.
Espero que meu erro possa servir de exemplo para que aprenda e entenda a sua real necessidade. E ele não foi de todo mal, agora eu sei mexer em GatsbyJS e NextJS 😂
Recomendo dar uma olhada no post do Grayson: What is Gatsby?
Se tiver alguma dúvida ou sugestão é só comentar abaixo!
Até mais.