Static vs Dynamic Websites: Uma Comparação Abrangente – techsyncer

Quando muitas pessoas pensam em um site, o conceito de sites estáticos vs. dinâmicos nunca entra em jogo. Afinal, o site simplesmente aparece, certo? Tecnicamente sim, mas há muito acontecendo nos bastidores.

Para alguém que planeja criar ou migrar um site, conhecer esses dois tipos de sites é essencial. O tipo de site que você escolhe afetará como os desenvolvedores gerenciam e atualizam o site, além dos possíveis custos operacionais e de manutenção.

Neste artigo, você aprenderá sobre as diferenças entre sites estáticos e dinâmicos. Você verá como os desenvolvedores criam sites estáticos e dinâmicos, como seu navegador os renderiza e muitas outras comparações úteis.

O que são Sites Estáticos e Dinâmicos?

Como o nome sugere, os elementos de um site estático são fixos ou codificados diretamente. O conteúdo de um site estático nunca muda, independentemente do navegador que você usa.

A static website only serves HTML, CSS, and Javascript client-side code. It doesn’t have to process any kind of computations once a reader accesses the page. The browser handles any code for dynamic content such as buttons or input.

A maioria dos sites estáticos tem natureza informativa. Considere blogs pessoais, por exemplo, onde a intenção é exibir informações para os leitores. Em um blog pessoal, os usuários geralmente apenas navegam pelo conteúdo do site.

Ao contrário, um site dinâmico vai além do código do lado do cliente. Em última análise, um site dinâmico é baseado em HTML e CSS, assim como um site estático. No entanto, para que um site dinâmico funcione, ele requer linguagens do lado do servidor, como PHP, ASP.net, ou JavaScript para gerar código HTML dinamicamente.

Os sites dinâmicos usam o termo CRUD, que significa Criar, Ler, Atualizar, Deletar. CRUD representa operações realizadas contra um banco de dados. E se você adivinhou que sites dinâmicos usam bancos de dados, então você acertou!

Diferenças na Renderização de Sites

Como os servidores web entregam sites estáticos e dinâmicos aos navegadores dos leitores?

Sites Estáticos Entregam Exatamente o Código no Servidor Web

Lembre-se de que sites estáticos contêm documentos HTML codificados de forma fixa com arquivos CSS e JS opcionais. Qualquer código que você carregue em um servidor web é precisamente o código que será servido aos usuários que navegam no seu site.

Por exemplo, abaixo está um projeto de site estático de amostra no Visual Studio Code que contém três arquivos. A página inicial deste site estático exibe apenas um cabeçalho e um botão.

Ao clicar em um botão nesta página da web simples, uma palavra será revelada.

Static Website Project in Visual Studio Code

Aqui está o código do arquivo index.html. Isso serve como a página inicial do site estático.

<!-- index.html -->
<html>
    <head>
        <title>Static Site Test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Static Web Test</h1>
        <div>
            <button>Click to see what happens</button>
        </div>
        <p style="display: none;">Surpise!!!</p>
        <script src="button.js"></script>
    </body>
</html>

O próximo código abaixo é para o arquivo style.css. Este arquivo CSS define o estilo de como os elementos da página inicial aparecem no navegador.

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
    background: lightgrey;
    color: black;
    border: 1px solid darkgray;
    font: inherit
}

Por fim, o código abaixo é o código para button.js que contém o código JavaScript que o navegador acionará quando um leitor clicar no botão.

// button.js
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
    document.querySelector('p').style.display = 'block'
})

Suponha que o site estático esteja funcionando agora, o demo abaixo é como ele ficaria. Em seguida, se você abrir o código-fonte da página, deverá ver que o código da página é exatamente o mesmo que o código-fonte do arquivo index.html.

Nota: Este exemplo de site estático foi testado usando a extensão HTTP Server / HTML Preview no Visual Studio Code.

Como você pode ver no demo acima, mesmo que o usuário interaja com a página clicando em um botão, o código subjacente nunca muda. Esse é o comportamento de um site estático; o navegador lida com tudo.

Websites Dinâmicos Lêem um Banco de Dados Primeiro

Em oposição a um site estático, um site dinâmico usa o processamento do lado do servidor para gerar o código. Isso significa que o código subjacente por trás da página pode mudar a qualquer momento, dependendo do design.

Por exemplo, abaixo está um projeto de site dinâmico Node.js contendo apenas um arquivo JavaScript.

Dynamic Website Project in Visual Studio Code

O código para dynamicsite.js é mostrado abaixo. Este código é um script do lado do servidor que exibe a hora atual do computador toda vez que a página é carregada.

// dynamicsite.js
var web = require('http');

web.createServer(function (req, res) {
    let xTime = new Date().toISOString().match(/(\d{2}:){2}\d{2}/)[0]
    res.end(
        '<h1 style="font-family:verdana">Dynamic Site Test</h1>' +
        '<p style="font-family:verdana">The time now is: <b>' + xTime + '</b></p>'
    );
}).listen(8080);

O demo abaixo mostra como o site dinâmico é exibido. O código HTML subjacente muda cada vez que a página é atualizada.

Nota: Este exemplo de site dinâmico é testado usando Node.js.

Agora esse é um exemplo básico de como um site dinâmico se comporta por baixo dos panos.

Site Estático vs Dinâmico: Como os Conteúdos são Gerenciados?

Agora você sabe como sites estáticos e dinâmicos são renderizados e servidos. E sobre adicionar, atualizar ou deletar conteúdo? Suponha que você tenha um site pessoal de blog estático, como você adiciona novos posts? Se você tem um site de e-commerce dinâmico, como você adiciona novos produtos no seu catálogo?

O tipo de site que você escolhe define como gerenciar o conteúdo do seu site. Abaixo estão as opções típicas para gerenciamento de conteúdo.

Codificação Rígida de Páginas Estáticas

Sempre que um site ou seu conteúdo precisa ser atualizado, isso quase sempre envolve alterações no código. O método fundamental e provavelmente o mais antigo é a codificação rígida. Esse método envolve a edição do código-fonte do site usando qualquer editor de texto.

Esse método pode ser o mais tedioso e demorado, pois cada aspecto do site deve ser codificado manualmente. No entanto, isso também confere aos sites estáticos flexibilidade sobre o design, pois cada página pode ser diferente.

Alguns sites com design e função simples podem aproveitar escrevendo seu conteúdo em Markdown. Em seguida, converta esses documentos Markdown em HTML, produzindo assim páginas da web que podem ser carregadas no servidor web.

Por exemplo, o site estático abaixo tem três páginas; index.html, page1.html e page2.html. Embora esses arquivos façam parte de um site estático, eles foram escritos para ter designs ou temas diferentes.

Example of a static website with different page themes

Geradores de Sites Estáticos

Em vez de escrever código manualmente, os geradores de sites estáticos oferecem a capacidade de criar um site estático inteiro, seja do zero ou a partir de modelos predefinidos. Novas postagens ou páginas geralmente são escritas em Markdown, e arquivos HTML são gerados durante o processo de construção do site.

Os arquivos resultantes podem então ser carregados em um servidor web para dar vida ao site. Em alguns geradores de sites estáticos, também é possível escrever conteúdo em outros formatos, como HTML direto e JSON.

Abaixo está a lista de alguns dos geradores de sites estáticos mais populares que você pode explorar.

O site de exemplo abaixo foi gerado usando o Jekyll sem precisar digitar uma única linha de código.

Sistema de Gerenciamento de Conteúdo (CMS)

Agora, você já ouviu falar do WordPress. E sobre Drupal, Joomla, e Netlify? Esses são os nomes dos sistemas de gerenciamento de conteúdo mais populares, ou CMS.

A CMS is a tool used for creating content on a website without having to write a single line of code. Think of it as the GUI editor where you can create your content without understaning the underlying code.

Normalmente, sites dinâmicos se conectam a um CMS. Na verdade, quando você compra um pacote de hospedagem na web, ele já inclui construtores de sites e CMS que podem ser implantados com apenas um clique (ou alguns cliques) do mouse. O CMS é provavelmente a razão pela qual os sites dinâmicos são a escolha popular.

Websites estáticos podem ser configurados para usar CMS também. Por exemplo, a Netlify tem suporte de integração com geradores de sites estáticos como Jekyll, Hugo e NextJS. Embora a configuração da integração do CMS com essas plataformas geralmente envolva mais trabalho em comparação com sites dinâmicos.

Quando usar um site estático versus um site dinâmico

Se você está se perguntando quando a pergunta da era antiga será respondida, “Qual é o melhor?”, você pode continuar esperando. Provavelmente não haverá um vencedor definitivo. A escolha entre um site dinâmico e estático é subjetiva e depende dos seus requisitos.

Há muito a considerar ao escolher o tipo de site. Abaixo estão apenas alguns dos fatores a serem considerados.

Factor	Static Website	Dynamic Website
Cost	Static sites are typically cheaper to host. They can even be hosted for free using GitHub Pages.	Because of the expected extra processing requirement, dynamic websites may need a more capable hosts. Higher host specs usually means higher cost.
Content Management	To update content, coding skills will be required to write HTML or Markdown (and other languages). There are established and emerging headless CMS options that support static websites.	Established and popular content management systems already exists such as WordPress, Drupal, and Joomla. Updating content may never need a developer’s involvement. Users would be able to manage content on their own. This could translate to development or maintenance cost savings in the long run.
Extensibility	Add-ins may not be available to static websites. But, third party services may be integrated into a static website. Some examples are Disqus and MailChimp.	There are tools and add-ins that can extend the functionality and optimization of dynamic websites.
Security	Securing a static website can be more complex due to JavaScript running on the browser and can be exploited. This is not to say that static websites cannot be secured. It’s just that developers need to be more creative for security.	Dynamic website security may be easier to achieve as there are already best practices, libraries and tools that are included in server-side languages.
Complexity	Knowing HTML, CSS and JavaScript are the basic coding skills for static website development. Other languages may be needed only if you use static site generators.	Typically requires more web development skills and knowledge of more programming languages.
Backup/Recovery	Only files are being backed up. If the website crashes, files can be restored to recover a static website.	There may be a need for more complex backup. In addition to backing up the website, there may be databases that need to be backed up as well.
	Static vs Dynamic Website

Conclusão

Se você já possui um site, provavelmente já sabe se ele é estático ou dinâmico. Caso contrário, você deveria ter aprendido neste artigo como distinguir entre esses dois tipos.

A static website does not mean that what you see on the page does not change at all. It only means that the content or underlying code is pre-built and never changes. Each time a reader views a page from a static website, the same code is served over and code.

A dynamic website does not mean that no homepage or HTML code is being served. Instead, the server generates the HTML page dynamically. Each request to the dynamic website may yield different content, and the HTML code behind the page typically changes.

Se você está apenas planejando construir um novo site, sua escolha dependerá em grande parte de seu propósito. Por exemplo, sites de comércio eletrônico e recrutamento podem se beneficiar mais sendo dinâmicos. Enquanto um blog ou site de portfólio pode ser suficiente como estático.

Os sites estáticos são onde tudo começou e provavelmente nunca desaparecerão. Especialmente agora que os geradores de sites estáticos estão ganhando mais popularidade. Os sites dinâmicos só vão melhorar à medida que o desenvolvimento contínuo acontece.

Leitura Adicional

Confira esses outros posts da ATA se estiver interessado em aprender mais sobre sites estáticos e dinâmicos.

Como Hospedar um Site Estático do Azure com Suporte do Cloudflare