Jamstack

Jamstack ou Javascript, API e Markup Stack é um novo paradigma na forma de desenvolver aplicativos web rápidos. Jamstack já existe há algum tempo mas a rápida evolução recente dos Geradores de Sites Estáticos levaram o Jamstack a ser uma das escolhas de stack favoritas de muitos desenvolvedores.

O que é Jamstack?

Jamstack é um conjunto de tecnologias somado a um fluxo de trabalho onde a forma de construir sites com comportamentos dinâmicos é fornecido por Javascript, ou seja, os dados são alimentados apenas por APIs e a marcação fornece a estrutura / espaço reservado necessários para o conteúdo (que pode ser estático ou dinâmico).

A ideia principal é que a marcação estática sempre será mais rápida do que a marcação gerada dinamicamente pelo servidor

Portanto, serviremos primeiro o conteúdo estático e usaremos Javascript para adicionar conteúdo dinâmico por meio de APIs.

Uma variação muito comum é o SSR (Server Side Rendering), onde para o conteúdo dinâmico geramos páginas estáticas de antemão. Quando um cliente solicitar a página, entregaremos o conteúdo estático e atualizamos os dados novamente através do Javascript da página combinado com a marcação.

Beneficios

Ultra rápido: como a etapa de geração de conteúdo pelo servidor não é mais dinamica, ela pode ser removida. Dessa forma, as páginas solicitadas podem ser entregues assim que o servidor encontrar o conteúdo já pronto pra ser entregue.
Baixo custo de servidor: O custo do servidor é baixo, pois não gastamos tempo e recursos do servidor para gerar a marcação dinamicamente a cada visita.
Back-ends para front-end (BFF): Agora o back-end pode se concentrar em atender às necessidades do front-end com APIs ao invés de gastar energia cuidando do que será exibido.
Melhor cache: Como o conteúdo estático tem menos probabilidade de mudar, o cache pode ser mais extenso para acelerar a entrega de conteúdo. A vida útil do conteúdo em cache pode ser mais longa.
Aproveitamento de CDN: CDN (Content Delivery Networks) pode ser aproveitado para fornecer a marcação estática também e não apenas para os arquivos de mídia.

Problemas

Da mesma forma que existem ótimos benefícios, também há algumas dificuldades que precisam ser resolvidas ao escolher trabalhar com Jamstack:

TTI ou Time to Interactive: Mais TTI s podem ser uma grande dor de cabeça se o JS não tiver um bom desempenho ou não for agrupado de forma otimizada.
Otimização: A entrega de Javascript e CSS precisa ser otimizada e existem ferramentas para fazer isso automaticamente, mas a responsabilidade em adotar é dos desenvolvedores.
JS Parsing Overhead: Como toda a dinâmica é movida para JS, o usuário tem que esperar que o JS torne a página funcional e pronta para uso e esse tempo de análise do JS é outro gargalo. Para evitar isso, o JS entregue aos clientes deve ser otimizado, pequeno em tamanho e deve conter apenas os trechos que serão necessários imediatamente.
SEO: SEO não é um grande problema pois os Crawlers podem executar todo o JS necessário - embora seja uma etapa extra para os rastreadores executarem. SSR e Snapshots HTML podem corrigir esse problema mas esta é uma etapa extra para a construção do site.

Como usar "Jamstack"?

Como dito antes, Jamstack é composto por três partes:

Javascript
APIs
Markup

A marcação é sempre HTML e o Javascript sempre estará lá para adicionar interatividade a página. Cada API é um desafio totalmente diferente entre si mas vamos considerar que a maioria delas segue as práticas recomendadas.

Ferramentas e Fluxo de Publicação

A publicação de um site Jamstack é feita de forma modular e tem 3 categorias/etapas principais:

CMS (Content Management System)

CMS é o local onde gerenciaremos o conteúdo de uma aplicação web. Isso não é necessário para todos os sites Jamstack, embora nos sites em que a API se destina ao conteúdo a escolha do CMS seja uma parte crucial.

Para que um CMS funcione bem com Jamstack, ele deve ser capaz de ser executado em modo headless, ou seja, separado do front-end do site. Com um CMS Headless ganhamos uma maior flexibilidade na forma de publicar nosso conteúdo, que - agora servido por API - pode ser o mesmo em diversas midias diferentes - Sites, Apps, etc - alimentados pelo mesmo CMS.

Algumas das escolhas populares são:

Netlify CMS
Contentful
Ghost
Wordpress (Headless Mode)
Mais headless CMS em headlesscms

SSG (Static Site Generators)

SSGs são as ferramentas responsáveis pela geração da das páginas estáticas. Existem SSGs que utilizam as mais variadas linguagens de programação ou que são otimizadas para certos fins como criação de blogs, landing pages, sites de documentação, etc.

Alguns dos geradores mais usados são:

Build e Deploy

As tarefas de Build e Deploy também são conhecidas como CI (Continuous Integration) e CD (Continuous Deployment). É na etapa de Build que os SSGs mencionados irão gerar as páginas para em seguida publicá-las no servidor. Nessa etapa também são executados testes automatizados a procura de erros ou inconsistencias, esses testes podem prevenir a publicação de uma atualização problemática ou apontar pontos de melhoria.

Ferramentas CI / CD populares no mercado:

Conclusão

JAMStack é muito rápido quando feito corretamente. Há cada dia mas opções para se construir uma solução rápida com Jamstack onde as vantagens são muito grandes em relação a modelos mais tradicionais.