Olá, Web Developers!

Muitos já devem ter ouvido falar de geradores de sites estáticos (SSG - Static Site Generators). Mas o que eles fazem e porque usar um?

Bom, é sobre isso que falarei aqui hoje!

Sites dinâmicos

Quando criamos uma página, não importa se é um site ou blog, teremos componentes repetidos, como o cabeçalho, menu, rodapé, etc.

Para não ficarmos repetindo o HTML em cada arquivo, o melhor seria deixar cada um desses componentes em arquivos separados. Se estivermos usando PHP, por exemplo, basta chamar estes arquivos onde queremos utilizá-los.

Neste exemplo, precisamos então de um servidor que suporte PHP. Quando um usuário acessa uma página, o código PHP é executado e ele vai montando a página e a envia para o usuário o HTML.

Se quisermos criar um blog, por exemplo, podemos aproveitar o mesmo HTML e simplesmente alterar o texto que será jogado no arquivo. O texto ficará armazenado em um banco de dados.

Curso Next.js - Fundamentos

Conhecer o curso

O problema dos sites dinâmicos

Seguindo o exemplo anterior, temos o seguinte:

Cada vez que uma mesma página é acessada, ela é criada do zero. Para seu conteúdo ser pego, é feito um acesso novo ao banco de dados. Isso gera um certo trabalho para o servidor;
Como a página é criada a cada requisição, leva-se um pouco de tempo antes do servidor enviá-la para o usuário, já que ela ainda está sendo “montada”;
Temos que cuidar bem da segurança para nosso site e banco de dados não serem invadidos;

Sites estáticos

Uma página estática é feita puramente com HTML. Seu conteúdo não muda. Como o arquivo HTML já está pronto, assim que requisitado, o servidor já envia o arquivo para o usuário. Não há o trabalho de acessar o banco de dados e montar o arquivo.

Mas e se meu site tiver muitas páginas, terei que ficar repetindo pedações de HTML? Não, é aqui que entram os geradores de sites estáticos!

Geradores de sites estáticos

Os geradores de sites estáticos nos permitem trabalhar como se estivéssemos criando páginas dinâmicas, ou seja, podemos criar pedaços de HTML que ficarão em arquivos separados.

A diferença é que, ao invés de gerar uma página quando o usuário requisitar, os geradores já geram todos os arquivos HTML. Assim, quando alguém requisitar uma página, ela já estará pronta para ser entregue.

Se você precisar alterar o rodapé do seu site, o gerador irá gerar novamente todas as páginas, e seu site estará com o nova rodapé.

Quer criar um blog? Apenas crie um arquivo com o conteúdo, e o gerador irá gerar a página com cabeçalho, rodapé, etc, e o seu conteúdo lá dentro, do mesmo jeito que o PHP faria se tivesse que acessar um banco de dados com o seu texto.

Você tem total controle do layout e, assim como ferramentas como o WordPress, há várias templates prontas disponíveis na web.

Parecem ferramentas simples, mas assim que você começa a estudá-los a fundo, verá que há muitas opções avançadas.

Um exemplo feito com Hugo: eu tenho um site onde publico jogos online e produtos. Alguns desses jogos estão disponíveis na Google Play. Então eu criei uma template para exibir esses jogos.

Quando quero publicar um jogo novo, eu simplesmente crio um arquivo novo dentro da categoria “games” com a URL do jogo dentro de uma variável. A template cuida do resto. E caso eu inclua uma variável com uma URL do jogo na Google Play, um botão para o Google Play é adicionado à página.

Caso eu queira publicar um novo produto, crio um novo arquivo na categoria “store” e ele já redireciona para a minha loja. Essas categorias, claro, fui eu que criei. Você tem total flexibilidade para montar seu site como você quiser.

Possuo um outro site que funciona do mesmo jeito, com jogos e vídeos do YouTube, mas feito com WordPress.

Cada um tem suas vantagens e desvantagens na manutenção e atualização.

Vantagens de sites estáticos

As páginas não precisam ser “montadas”, então você tem um pequeno ganho no tempo de envio do arquivo;
Como todas as páginas já estão criadas com o seu conteúdo, não há necessidade de banco de dados;
Menos preocupação com a segurança, pois o você não terá banco de dados e só entrega HTML puro;
Hospedagem de sites estáticos costuma ser mais barata. Há lugares que são de graça. Eu pessoalmente gosto do próprio Github e Gitlab;

Um exemplo é o famoso site Tableless. Ele era em WordPress e agora é totalmente estático, usando o gerador Hugo:

https://tableless.com.br/site-tableless-estatico/

Como pode-se ver, ainda dá para ter sistema de comentários na página, já que os comentários estão sendo servidos pelo Disqus, e não pelo próprio Tableless.

Se ninguém contasse, nem daria para saber que agora trata-se de um site estático.

Desvantagens de sites estáticos

Como vimos, não teremos uso de banco de dados, então páginas que necessitam de coisas como Login ou algum processamento no servidor não são possíveis com sites estáticos.

Você provavelmente irá armazenar seu site em algum repositório. Se você tem um blog com vários autores, cada um deles irá precisar ter acesso a esse repositório.

Como as alterações serão feitas mais “manualmente”, torna-se inviável criar sites para pessoas leigas dessa maneira. É muito mais simples para elas aprender a criar um Post em algo como o WordPress.

Além disso, como a cada alteração você terá que gerar todas as páginas novamente, você terá que fazer um novo deploy. Portanto, a atualização do seu conteúdo irá demorar mais do que se você simplesmente tivesse inserido um novo conteúdo em um banco de dados.

Então, quando usar?

Pelos pontos levantados, podemos ter uma noção de quando é bom usar ou não.

Eu sugiro que você experimente estudar alguma ferramenta dessas, como Hugo ou Jekyl. Assim você terá uma noção melhor de como essas ferramentas funcionam e onde seriam vantajosas para você.

Digo isso porque antes de eu realmente experimentar criar algo com o Hugo, mesmo já sabendo na teoria o que é um gerador de sites estáticos, todos os sites que me entregavam não pareciam fazer sentido com algo que não fosse com HTML puro, só PHP ou WordPress.

Hoje está mais claro para mim quando os SSG são úteis em um projeto.