Páginas Estáticas vs Páginas Dinâmicas

Páginas Estáticas vs Páginas Dinâmicas

O que são e qual utilizar

Obs: Essa carta faz parte do conteúdo da Plataforma Front Academy.

​Caro Aluno,

Para compreender o motivo mesmo da existência do React (e das demais bibliotecas e frameworks) é preciso entender o que são páginas estáticas e páginas dinâmicas.

​​​Páginas Estáticas

Uma página estática, como o próprio nome diz, é uma página que não muda.

Independente de quem ou quando entrar nela, o conteúdo será sempre o mesmo.

São páginas que tem o propósito apenas de exibir algum conteúdo, como textos e imagens e são criadas usando em maior parte HTML e CSS, podendo ter JavaScript.

Como exemplo, podemos pegar a própria página da Front Academy. Sempre que você entrar nela, o conteúdo será o mesmo - a não ser é claro, que façamos uma alteração no código fonte da página.

​​Páginas Dinâmicas

​​Por outro lado, páginas dinâmicas são páginas que exibem conteúdos diferentes dependendo de quem está acessando, além de responder a interações do usuário.

Podemos citar como exemplo uma rede social, como o Instagram ou o Facebook. Você tem interações do tipo: fazer um login; publicar fotos; deixar comentários; dar likes; etc.

Esse tipo de página possui uma complexidade maior e em geral utiliza-se uma boa quantidade de JavaScript para dar essa "dinamicidade" na página.

Esse JavaScript pode ser escrito utilizando-se JavaScript puro - carinhosamente chamado de Vanilla Js - ou com o apoio de uma biblioteca ou framework, como React, Vue, Svelte, An​gular e muitos outros.

​​​Qual usar?

O que vai dizer se a sua página é estática ou dinâmica é o que você fizer dela.

Se você precisa de uma página que só tenha conteúdo estático, sua página será estática. Se você precisa de uma página com conteúdo dinâmico, sua página será dinâmica.

Nesse momento dos seus estudos, você já deve ser capaz de criar conteúdos estáticos utilizando HTML e CSS, então a grande questão agora é: como adicionar "dinamicidade" a uma página?

Como fazer a sua página interagir com o usuário, apresentar dados diferentes, adicionar publicações, etc?

O principal conceito que deve-se entender para conseguir adicionar essas interações no React é o ​state​.​

Nas próximas aulas vamos continuar elaborando nossos conhecimentos sobre esse assunto.

​​Conclusão

​Para adicionar interações a uma página, utiliza-se JavaScript. E embora possa-se utilizar JavaScript puro, podemos também contar com o auxílio de ferramentas como o React, que nos ajudam e - com sorte - facilitam esse processo.