- \n
- Defini\u00e7\u00e3o<\/li>\n\n\n\n
- Vantagens e desvantagens<\/li>\n\n\n\n
- Quando usar?<\/li>\n\n\n\n
- Conclus\u00e3o<\/li>\n<\/ol>\n\n\n\n
Defini\u00e7\u00e3o do site est\u00e1tico<\/h2>\n\n\n\n
![\"O](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/07\/O-que-e-site-estatico-scaled.jpg\")
Fonte: Reposit\u00f3rio de imagens<\/figcaption><\/figure>\n\n\n\n Antes de falar do tipo est\u00e1tico em si, \u00e9 importante entendermos o que normalmente forma um site para entender o que faz dele din\u00e2mico ou n\u00e3o. Um site \u00e9 um conte\u00fado que no fim ser\u00e1 sempre um c\u00f3digo HTML para a defini\u00e7\u00e3o de conte\u00fado e estrutura da p\u00e1gina, aliado ao CSS que far\u00e1 a estiliza\u00e7\u00e3o, ou seja, a est\u00e9tica da p\u00e1gina.<\/p>\n\n\n\n
Assim, temos o HTML como o “esqueleto” do site, e o CSS atuando como a “pele”. Por mais que sites possam ser escritas em diferentes linguagens de programa\u00e7\u00e3o, quase sempre o resultado final ser\u00e1 um HTML + CSS sendo enviados ao usu\u00e1rio, e processado pelo navegador. Como diferentes linguagens atuam de formas diferentes, \u00e9 poss\u00edvel manipular o HTML e CSS que s\u00e3o enviados ao usu\u00e1rio, gerando assim um dinamismo nas p\u00e1ginas. <\/p>\n\n\n\n
Pense na p\u00e1gina de “Minha conta” de uma loja, por exemplo. Quando acessamos essa p\u00e1gina sem estarmos logado, ela nos redireciona para fazer login, mas assim que fazemos esse login a p\u00e1gina \u00e9 carregada de forma diferente, mostrando as informa\u00e7\u00f5es de nossa conta. Isso acontece quando um site \u00e9 din\u00e2mico, renderizando HTML com base em condi\u00e7\u00f5es predefinidas, e permite que o HTML adicione informa\u00e7\u00f5es vindas de um banco de dados, por exemplo.<\/p>\n\n\n\n
Por outro lado, um site est\u00e1tico sempre ir\u00e1 executar o exato mesmo HTML definido previamente, independentemente da a\u00e7\u00e3o do usu\u00e1rio. Isso significa que toda a navega\u00e7\u00e3o dos usu\u00e1rios sempre mostrar\u00e1 os exatos mesmos conte\u00fados, que precisar\u00e3o estar definidos dentro do c\u00f3digo HTML.<\/p>\n\n\n\n
Vantagens e desvantagens<\/h2>\n\n\n\n
A grande vantagem do HTML \u00e9 n\u00e3o precisar de processamento extra das informa\u00e7\u00f5es j\u00e1 que tudo o que o c\u00f3digo ir\u00e1 executar j\u00e1 est\u00e1 escrito, devendo apenas o navegador do usu\u00e1rio processsar as informa\u00e7\u00f5es e renderizar para o usu\u00e1rio final.<\/p>\n\n\n\n
No caso de sites din\u00e2micos, h\u00e1 um esfor\u00e7o do servidor em processar os dados para ent\u00e3o montar o HTML que vai ser usado por aquele usu\u00e1rio, o que tem um custo de processamento que pode tornar o carregamento da p\u00e1gina um pouco mais lento (mas normalmente n\u00e3o ser\u00e1 algo muito percept\u00edvel).<\/p>\n\n\n\n
O grande trunfo do site est\u00e1tico \u00e9, tamb\u00e9m, o seu “problema”. Por n\u00e3o permitir a entrega de conte\u00fado din\u00e2mico, \u00e9 necess\u00e1rio manter todo o c\u00f3digo pronto do jeito que ele ser\u00e1 visto no final, gerando um resultado imut\u00e1vel.<\/p>\n\n\n\n
Quando usar?<\/h2>\n\n\n\n
Como explicamos aqui, o site est\u00e1tico \u00e9 incapaz de alterar o conte\u00fado exibido para o usu\u00e1rio final, por isso \u00e9 recomendado que esse tipo s\u00f3 seja usado quando n\u00e3o houver a necessidade de apresentar informa\u00e7\u00f5es din\u00e2micas.<\/p>\n\n\n\n
Um benef\u00edcio importante disso \u00e9 a redu\u00e7\u00e3o dr\u00e1stica no consumo de recursos, permitindo executar o seu site mesmo em uma hospedagem mais simples sem preju\u00edzos no desempenho, uma vez que o conte\u00fado do site j\u00e1 est\u00e1 “montado”. Assim, uma boa aplica\u00e7\u00e3o seria no caso de landing pages, sites institucionais, portfolios, etc. <\/p>\n\n\n\n