Skip to content
Português
Voltar ao diretório

astro.build

200 OK

Como o Astro transforma conteúdo em HTML e adiciona interação de forma seletiva

Developer ToolsTailwind CSS

Tecnologia detectada

A detecção informa sinais públicos visíveis e não consegue listar serviços privados.

Tailwind CSS

A detecção informa sinais públicos visíveis e não consegue listar serviços privados.

A detecção informa sinais públicos visíveis e não consegue listar serviços privados.

HTML primeiro, interação por exceção

Astro é um framework server-first para sites orientados a conteúdo. Ele renderiza o conteúdo da página como HTML e, por padrão, não envia JavaScript para o cliente; os desenvolvedores adicionam explicitamente código de navegador aos componentes que precisam de interação.

Um componente interativo dentro de uma página que, de outro modo, seria estática é chamado de ilha. Um controle de navegação, uma interface de busca ou outro widget pode ser hidratado de forma independente, enquanto títulos, parágrafos e links próximos permanecem como HTML comum.

Região da página Entrega inicial Comportamento no navegador
Conteúdo estático do Astro HTML renderizado no servidor Nenhum runtime de componentes por padrão
Ilha hidratada HTML mais o código do componente selecionado É ativada de forma independente
Múltiplas ilhas HTML mais o código selecionado para cada ilha Cada ilha pode usar sua própria prioridade de carregamento

O momento da hidratação é explícito. client:load prioriza um controle necessário imediatamente, client:idle adia o trabalho até que o navegador esteja ocioso e client:visible aguarda até que um componente se aproxime da viewport.

Integrações e conteúdo estruturado

Astro pode usar React, Preact, Svelte, Vue, Solid, HTMX, componentes web e outras abordagens de UI em regiões interativas. Isso permite reutilizar seletivamente sistemas de componentes conhecidos sem transformar o documento completo em uma única aplicação renderizada no cliente.

Áreas úteis do ecossistema identificadas pelo repositório mantido incluem:

  • Integrações de UI para React, Preact, Solid, Svelte e Vue.
  • Suporte ao runtime Node e adaptadores de implantação.
  • Ferramentas de publicação, como integrações com MDX, RSS e sitemap.
  • Integração relacionada a scripts por meio do Partytown.

As coleções de conteúdo organizam e validam Markdown e entradas relacionadas com segurança de tipos do TypeScript. Em termos práticos, uma equipe pode definir um formato consistente para artigos ou documentação, detectar campos de conteúdo inválidos e consultar uma coleção coerente em vez de tratar cada arquivo como algo sem relação com os demais.

Evidências em comparação com resultados de implementação

A documentação pública e o repositório mantido do Astro sustentam afirmações sobre renderização com HTML em primeiro lugar, hidratação opcional, abordagens de UI compatíveis e coleções de conteúdo. Eles descrevem recursos e padrões do framework, não a qualidade de todos os sites criados com Astro.

Um projeto finalizado ainda pode incluir ilhas grandes, vários runtimes de frameworks, imagens pesadas, fontes ou scripts de terceiros. Essas escolhas podem afetar o desempenho e a manutenção, portanto os visitantes devem distinguir o modelo documentado do Astro de resultados que exigem a inspeção de uma implementação específica. A mesma distinção se aplica à acessibilidade e à confiabilidade: o framework fornece ferramentas arquiteturais, enquanto a experiência concluída depende de como uma equipe as utiliza.

Continue exploring

More published records in Developer Tools.

View all alternatives

Gatsby conecta sites React a conteúdo estruturado e renderização flexível

Developer ToolsGoogle Analytics

O Next.js traz roteamento, renderização e recursos de servidor ao React

Developer ToolsGoogle AnalyticsNext.js

nuxt.com

200 OK

Crie sites e aplicações Vue com roteamento, lógica de servidor e renderização flexível

Developer ToolsNuxtVercel