Static vs Dynamic Website

Frequentemente ouvimos os termos "Static website"(site estático) e “Dynamic website”(site dinâmico) e este artigo tenta esclarecer como ambos os tipos se comportam.

Static Website

Quando do servidor após um requisição é simplesmente enviado um arquivo pronto para ser mostrado ao usuário.

E este arquivo basicamente contém HTML, CSS, Javascript, Image…

O navegador pega no arquivo e vai renderizar para o usuário do mesmo modo que recebeu o arquivo.

Sendo assim, não existe qualquer tarefa sendo executada no servidor.

Uma questão que incomoda o pessoal é, Existe código javascript no site, isso não torna o site dinâmico?
Bem, no contexto front-end isso pode ser uma verdade, mas no contexto do navegador, dinâmico nada tem a ver com o facto de haver alguma animação de botão ou algo assim parecido, mas sim a forma como o website é gerado no servidor.

Um exemplo comum de static website são as landing page.

Dynamic Website

Sempre que uma solicitação é feita, o site é compilado no servidor.
Basicamente, um site dinâmico consiste em um banco de dados, um aplicativo como o Nodejs que processa os dados do Banco de dados e com a ajuda de um template pré definido compilam dinamicamente cada página que o usuário requisita com os dados gerando um arquivo(html, css, js) que é enviado para o navegador. Todo esse processo é chamado de renderização do lado do servidor(server-side rendering).

Conforme os dados existentes no banco de dados e a operação do usuário, diferentes páginas serão geradas, daí o nome dynamic.

Vai ouvir bastante falar de Web Application, é quase a mesma coisa. Sendo que web application se refere a um dynamic website com algumas funcionalidades como login, singup, searching e outras.

Nos últimos anos, graças à evolução dos navegadores no client-side vemos mais e mais website que são baseados em APIs.

Mas esse assunto vai ficar para uma outra altura.