menu

SHARKLABS

Vuepress + Netlify: Os Benefícios da Arquitetura Jamstack

/
/
Vuepress + Netlify: Os Benefícios da Arquitetura Jamstack
bookmark Vuepress, Vue.js, Jamstack access_time

Jamstack: O que é?

Vou explicar de maneira bem resumida: Jamstack é um modelo de arquitetura para sites que precisam de muita performance, custo baixo, sejam altamente escaláveis e com muita segurança.

Imagine um blog que é acessado de várias partes do mundo e que precisa de muita performance, mas seu o orçamento é limitado e os gastos com hospedagem e segurança precisam ser acessíveis.

Parece um cenário quase impossível, mas com Jamstack é possível alcançar esses objetivos.

Jamstack: Como funciona?

JAM é uma abreviação para: JavaScript, API e Markup. Ou seja:

  • JavaScript para funcionalidades dinâmicas do site.
  • API para operações server-side.
  • Markup quer dizer que o site será servido com arquivos HTML previamente gerados (prerender).

Podem parecer características simples, mas a grande vantagem do Jamstack é que fazendo prerender dos arquivos HTML você facilmente pode colocar seus arquivos dentro de um CDN. Assim, o site será entregue rapidamente ao usuário (em qualquer parte do mundo), com um preço de hospedagem acessível, altamente escalável (independente se o site tem 1 ou 1.000.000 de acessos ao dia) e altamente resistente a ataques DDoS.

Para comportamentos e funcionalidades dinâmicas você deve usar JavaScript, ou seja, o código funcionará dentro do navegador do usuário.

É claro que existem algumas situações que não é recomendável fazer dentro do navegador, um exemplo seria uma requisição para um gateway de cartão de crédito. É nessas situações que usaremos as API's para nos comunicarmos com um servidor seguro.

Um ponto bem importante da arquitetura Jamstack é que somente deve ser colocado no server-side funcionalidades realmente necessárias, uma vez que em uma arquitetura convencional o servidor é a parte que mais pode comprometer o tempo de resposta ao usuário e consequentemente aumentar os gastos com cloud.

Como o uso do servidor é minimizado somente para situações específicas, as chances de invasão do servidor também diminuem.

Se quer saber mais sobre Jamstack, o site Jamstack.wtf explica esses conceitos de um jeito mais visual.

Netlify

Como citei anteriormente, sites com Jamstack podem utilizar CDN's tradicionais para distribuir seu conteúdo. Porém dependendo a quantidade de atualizações que o site tem por dia, o deploy pode ser um pouco complicado.

O Netlify é um provedor de cloud específico para arquitetura Jamstack. Basicamente você faz o deploy por meio de um repositório com Git Commits e o Netlify se encarrega de distribuir o site por meio da sua rede de CDN's. Inclusive neste link você encontra um comparativo entre o Netlify e o CDN tradicional.

Além disso, o Netlify também provê funcionalidades server-side como:

O preço do Netlify também é acessível, inclusive eles tem um plano gratuito que eu considero bem generoso. Para mais informações sobre preços clique aqui

Para usar o Netlify é muito fácil e se você não nunca usou recomendo que veja este tutorial.

Vuepress

O Vuepress é totalmente compatível com a arquitetura Jamstack, uma vez que ele faz o prerender de todos os arquivos HTML.

Como internamente ele utilizar o Vue.js, você consegue fazer funcionalidades dinâmicas com muita facilidade e também consegue acessar API's server-side.

Vuepress e Netlify também são compatíveis, uma vez que o Vuepress é uma biblioteca JavaScript publicada no NPM.

Caso você queira saber mais sobre Vuepress, recentemente escrevi alguns artigos que podem lhe ajudar:

Depois de criar seu projeto é só fazer deploy no Netlify. A partir disso o seu site com arquitetura Jamstack estará funcionando!

Dúvidas ou sugestões é só entrar em contato. Abraço.

Autor
"Any fool can write code that a computer can understand. Good programmers write code that humans can understand." Martin Fowler