Ótimo trabalho! Obtivemos alguns dados e os exibimos com sucesso para o usuário. No entanto, encontramos um problema. O problema decorre do nosso dashboard estático, o que significa que quaisquer atualizações nos dados não serão refletidas na aplicação.

Vamos explorar os conceitos de renderização estática e dinâmica.

Renderização Estática

Renderização estática significa preparar e exibir o conteúdo antes mesmo que o usuário o solicite. É como preparar vários sanduíches antes das pessoas chegarem a uma festa.

Exemplo

Imagine que você está organizando um piquenique. Em vez de fazer sanduíches quando os convidados chegam, você prepara vários sanduíches com antecedência e os coloca em uma mesa. Quando as pessoas chegam, elas pegam um sanduíche já pronto. Isso torna tudo mais rápido e fácil para todos.

Benefícios

• Sites mais rápidos: Assim como sanduíches prontos, o conteúdo pré-preparado pode ser servido de forma rápida e fácil aos usuários;
• Menos trabalho para o servidor: Como tudo é preparado antecipadamente, o servidor não precisa fazer sanduíches (gerar conteúdo) para cada pessoa conforme ela chega;
• Melhor posicionamento em mecanismos de busca: Os mecanismos de busca conseguem entender e ranquear mais facilmente o conteúdo pré-gerado, semelhante a uma mesa de piquenique bem organizada.

Casos de uso

A renderização estática é ideal para conteúdos como posts de blog estáticos ou páginas de produtos, onde o conteúdo permanece praticamente o mesmo e é igual para todos.

Renderização Dinâmica

Renderização dinâmica significa criar conteúdo no momento em que os usuários o solicitam. É como um chef preparando pratos personalizados para cada cliente em um restaurante.

Exemplo

Pense em um restaurante onde o chef cozinha as refeições conforme o pedido de cada cliente. O chef recebe os pedidos, prepara a refeição e serve tudo fresco. Isso se assemelha à renderização dinâmica, onde o conteúdo é gerado para cada usuário que acessa uma página.

Benefícios

• Atualizações em Tempo Real: Assim como um chef pode preparar um prato com ingredientes frescos, a renderização dinâmica permite que sua aplicação exiba dados em tempo real ou frequentemente atualizados;
• Conteúdo Personalizado: Como um chef preparando pratos de acordo com as preferências do cliente, a renderização dinâmica é ideal para exibir conteúdo personalizado, como dashboards ou perfis de usuário;
• Acesso a Informações Específicas do Usuário: É como um chef perguntando as preferências dos clientes antes de cozinhar – a renderização dinâmica permite acessar informações específicas de cada usuário, como cookies ou parâmetros de busca na URL.

Casos de Uso

A renderização dinâmica é útil para aplicações onde os dados mudam com frequência ou onde o conteúdo personalizado é importante, como feeds de redes sociais ou dashboards em tempo real.

De Volta ao Projeto

Para nosso aplicativo, sempre preferimos exibir as informações mais atualizadas.

Ao usar @vercel/postgres, as regras de cache não são predefinidas, o que nos dá flexibilidade para decidir como os dados serão tratados – sejam estáticos ou dinâmicos.

Para tornar o dashboard dinâmico, podemos usar um recurso do Next.js chamado unstable_noStore. Ele permite pular a renderização estática. Veja como:

No arquivo data.ts, inclua a linha import unstable_noStore from next/cache no início. Em seguida, utilize-a nas funções de busca de dados para personalizar como os dados serão tratados.

Na Prática