Fala, galera! Aqui é o Professor Ricardo Pedroni e vamos juntos para mais uma aula fantástica 🎉
🎥 Não esqueça de ver essa aula e muitas outras no nosso Canal do YouTube!
Na aula passada, ao longo de nossa linda viagem ao longo da história da internet, falamos sobre as técnicas que possibilitam criamos aplicações do lado do cliente, alavancando tecnologias como o AJAX (Asynchronous JavaScript and XML) para habilitar o uso de SPA (Single Page Applications), como visto em aplicações React, Angular e Vue.
Ao passo que essas tecnologias nos permitem criar aplicações complexas com tamanhos iniciais de página mínimos e respostas rápidas de navegação entre páginas, existem algumas limitações também. No final da aula, levantamos alguns pontos que podem ser problemáticos às suas necessidades, como o impacto em SEO e as páginas iniciais em branco, já que o JS vai popular a página só depois de carregar tudo do servidor.
Ou seja, com cada ferramenta que temos, existem pontos fortes e fracos a serem considerados.
Nesse momento na história da web, as soluções de renderização caem basicamente em duas categorias:
- O servidor fornece um documento pronto, usando especialmente SSR onde um documento vai ser devolvido, sendo renderizado pelo servidor a cada requisição;
- O servidor devolve um documento mínimo, apenas com HTML básico e as “conexões” dos scripts JS necessários para depois construir a página e hidratar a aplicação com a funcionalidade necessária.
É importante destacar que existe uma desvantagem ambas essas tecnologias vigentes comparadas com como a Web 1.0 e os documentos estáticos funcionavam — para qualquer requisição, é necessário que o servidor ou o cliente façam algum tipo e processamento adicional para que o documento ou página chegue num estado final.
Com isso em mente, a pergunta que muitos se fizeram foi: “Será que é possível ter as vantagens de performance de documentos estáticos e prontos com a possibilidade de customizar o que vai ser entregue ao cliente?”
E eis que o conceito de Geração Estática apareceu.
Static Site Generation (SSG)
Geração Estática (mais conhecida pelo seu nome bonito em inglês, Static Site Generation) é um conceito relativamente simples:
Se o conteúdo que irá aparecer na sua página/site/documento muda relativamente pouco, gere esse documento uma única vez invés de renderizá-lo para toda requisição
Ou seja, invés de cada cliente pedir o documento e o servidor precisar puxar as informações todas as vezes (e.g. ler um banco de dados, abrir um arquivo), faça essa operação de leitura uma única vez e construa o documento com essa informação já embutida nele. Pode-se fazer uma analogia com “compilar” seu documento já que a ferramenta que vai fazer isso precisa analisar o que está sendo pedido e gerar um resultado, que é o documento estático.
O momento que essa “compilação” vai acontecer depende da ferramenta mas tipicamente isso vai ser o momento de build do projeto — normalmente antes de fazer o upload dos arquivos para algum servidor, por exemplo.
Todo esse processo pode ser feito manualmente ou podemos construir algo que faria isso mas existem excelentes ferramentas que já possuem essa capacidade, como o Gastby e o Next.js. Tipicamente essas ferramentas, além de serem capazes de analisar seus documentos e gerar estaticamente o que for possível, também tem suporte para a criação de projetos mistos, onde alguns documentos são estáticos e outros são dinâmicos, podendo inclusive usar o React para montar suas páginas.
Um bom exemplo de uma aplicação que funciona bem com o uso do SSG é um blog. Por mais prolífero que possa ser como autor, normalmente haverão dias entre um post e outro (a menos que seja blog tipo BuzzFeed que solta post a cada 15 minutos tipo “10 Coisas Que Seu Signo Diz Sobre Sua Vida Sexual). Nesse caso, se um usuário acessar seu blog agora e outro daqui 10 horas, o conteúdo devolvido será exatamente o mesmo. Para evitar que o servidor precise ler de um CMS ou banco de dados para montar o documento, faz sentido gerar uma versão estática do blog e devolver o mesmo documento para ambos os leitores.
Já se sua aplicação trabalhar com dados em tempo real ou tem informações que atualizam constantemente, o SGG certamente não será uma solução prática uma vez que é necessário “compilar” seu projeto toda vez que desejar gerar um documento novo aos seus usuários.
Mas… e se invés de gerar um documento estático manualmente, fosse possível que o servidor regenerasse esse documento de tempos em tempos, gerando um documento atualizado cada vez? Excelente pergunta, jovem 👌 Eis que apresento a Regeneração Estática Incremental.
Incremental Static Regeneration (ISR)
A Regeneração Estática Incremental (credo como esses nomes ficam mais feio em pt-BR) ou ISR é virtualmente a mesma coisa que o SSG com uma pequena diferença — o ISR gera os documentos estáticos toda vez que um gatilho é acionado. Esse gatilho pode ser um determinado de tempo, uma url específica visitada ou uma flag setada em algum lugar. Não importa muito qual é a fonte do gatilho mas, sim, que uma vez acionado, um novo documento estático será gerado, possuindo as informações atualizadas nele.
Voltando ao exemplo do blog (agora modelo BuzzFeed e seu conteúdo de qualidade) e supondo que um novo post é criado a cada 1 hora, usando um gatilho de tempo de 1 hora, o ISR vai gerar um novo documento estático com os posts mais atualizados a cada 1 hora mas qualquer visita dentro desse intervalo vai ser respondida com o documento estático previamente gerado.
Olhando dessa forma, é natural achar que o ISR é sempre melhor que o SSG. Só lhe digo uma coisa:
Repare que o ISR necessita de um servidor “inteligente” (Node, PHP, etc.) que possa ler as informações de alguma fonte (e.g banco de dados, CMS) e que então pode criar um novo documento estático com essas informações estáticas. Já no caso do SSG, um servidor que simplesmente devolve documentos para uma dada url resolve (como um CDN). Então leve isso em consideração na hora de escolher sua solução.
Para Onde Agora?
Com todas essas técnicas e ferramentas em mãos, a lista de perguntas que se pode fazer para determinar o que é melhor para sua aplicação começa a ficar bem grande. Meu conteúdo muda bastante ou pouco? Preciso personalizar o que é devolvido ou não? Minha aplicação é toda privada ou tem partes públicas? SEO importa ou não? Métricas como First Meaningful Paint são essenciais para meu projeto? Existe vida após a morte? Quais são as 10 coisas que meu signo afetam na minha vida sexual?
Perguntas importantes.
Mas bacana também que existem ferramentas que resolvem boa parte desses problemas, como o Next.js — que por coincidência será o tópico na próxima aula. Abraço e até lá!
Espero que esse post tenha te ajudado!
Ficou com dúvida ou quer mandar uma real? Deixa nos comentários!
Ah, e me acompanhe também no YouTube ✌
TLDR;
- Documentos estáticos possuem a vantagem de “estarem prontos” — quando são requisitados, o servidor simplesmente devolve o próprio documento;
- A Web 1.0 já oferecia documentos estáticos mas sem nenhuma configuração ou personalização;
- A Web 2.0 passou a um modelo dinâmico, onde o servidor tipicamente renderiza o conteúdo a ser mostrado a cada requisição;
- Uma potencial evolução para isso é gerar documentos estáticos mas puxando informação de fontes dinâmicas (e.g. bancos de dado, CMS);
- SSG (Static Site Generation) é uma técnica que faz justamente isso — no momento de compilação ou construção da sua aplicação, o conteúdo é lido e as partes estáticas são geradas;
- ISR (Incremental Static Regeneration) funciona de forma similar, porém gerando o documento estático a cada período determinado.
