Pular para o conteúdo

Modos de Renderização

O código do seu projeto Astro deve ser renderizado como HTML para ser exibido na Web.

As páginas, rotas e endpoints de API do Astro podem ser pré-renderizadas em tempo de build ou renderizadas sob demanda por um servidor quando uma rota é solicitada. Com ilhas Astro, você também pode incluir alguma renderização no lado do cliente quando necessário.

No Astro, a maior parte do processamento ocorre no servidor, e não no navegador. Isso geralmente torna seu site ou aplicativo mais rápido do que a renderização no lado do cliente quando visualizado em dispositivos menos potentes ou em conexões de internet mais lentas. O HTML renderizado no servidor é rápido, compatível com SEO e acessível por padrão.

Modos de output do servidor

Seção intitulada Modos de output do servidor

Você pode configurar como suas páginas são renderizadas na configuração de output.

Pré-renderização

Seção intitulada Pré-renderização

O modo de renderização padrão é output: 'static', que cria o HTML para todas as rotas de página em tempo de build.

Nesse modo, todo o seu site será pré-renderizado e o servidor terá todas as páginas criadas com antecedência e prontas para serem enviadas ao navegador. O mesmo documento HTML é enviado ao navegador para cada visitante, e um novo processo de build completo do site é necessário para atualizar o conteúdo da página. Esse método também é conhecido como geração de site estático (SSG).

Por padrão, todos os projetos Astro são configurados para serem pré-renderizados em tempo de build (gerados estaticamente) para proporcionar a experiência de navegador mais leve. O navegador não precisa aguardar a criação do HTML porque o servidor não precisa gerar nenhuma página sob demanda. Seu site não depende do desempenho de uma fonte de dados de backend e, uma vez criado, permanecerá disponível para os visitantes como um site estático enquanto o servidor estiver funcionando.

Sites estáticos podem incluir ilhas Astro para componentes de UI interativos (ou até mesmo aplicações inteiras renderizadas no lado do cliente!) escritos no framework de UI de sua preferência em uma página estática e pré-renderizada.

A API de Transições de Visualização do Astro também está disponível no modo static para animações e persistência de estado na navegação entre páginas. Os sites estáticos também podem usar middlewares para interceptar e transformar os dados de resposta de uma requisição.

Renderização sob demanda

Seção intitulada Renderização sob demanda

Os outros dois modos de saída do Astro podem ser configurados para permitir a renderização sob demanda de algumas ou de todas as suas páginas, rotas ou endpoints de API:

  • output: 'server' para sites altamente dinâmicos com a maioria ou todas as rotas sob demanda.
  • output: 'hybrid' para sites principalmente estáticos com algumas rotas sob demanda.

Como são geradas por visita, essas rotas podem ser personalizadas para cada usuário. Por exemplo, uma página renderizada sob demanda pode mostrar a um usuário autenticado as informações de sua conta ou exibir dados recém atualizados sem exigir um novo build completo do site. A renderização sob demanda no servidor no momento da solicitação também é conhecida como renderização no lado do servidor (SSR).

Considere ativar o modo server ou hybrid em seu projeto Astro se você precisar do seguinte:

  • Endpoints de API: Criar páginas específicas que funcionam como endpoints de API para tarefas como acesso a banco de dados, autenticação e autorização, enquanto mantém dados sensíveis ocultos do cliente.

  • Páginas protegidas: Restringir o acesso a uma página com base nos privilégios do usuário, gerenciando o acesso do usuário no servidor.

  • Conteúdo que muda frequentemente: Gerar páginas individuais sem exigir um novo build estático do site. Isso é útil quando o conteúdo de uma página é atualizado com frequência, por exemplo, exibindo dados de uma API chamada dinamicamente com fetch().

Os modos de saída server e hybrid permitem que você inclua ilhas Astro para interatividade (ou até mesmo aplicações inteiras renderizadas no lado do cliente!) no seu framework de UI de preferência. Com middlewares e a API de Transições de Visualização do Astro para animações e persistência de estado na navegação entre rotas, até mesmo aplicações altamente interativas são possíveis.