5 novos recursos para experimentar no Astro 2.5

AstroJS é uma fantástica ferramenta baseada em JavaScript usada para criar sites estáticos super-rápidos. Ele permite que você crie sites usando várias estruturas JavaScript como React, Vue e Svelte. O Astro 2.5 traz um novo conjunto de recursos, alguns dos quais serão abordados aqui.

1. Coletas de dados

O Astro 2.5 agora oferece suporte ao armazenamento de JSON e YAML em coleções. O novo tipo: a propriedade 'data' permite essa funcionalidade. Para demonstrar isso, crie uma coleção de dados 'writers' na pasta src/content, onde JSON ou YAML arquivos podem ser adicionados.

Em seguida, configure as coleções em src/content/config.ts usando o defineCollection e z utilitários de astro: conteúdo módulo e definindo o tipo para dados.

importar { z, defineCollection } de"astro: conteúdo";
const escritores = defineCollection({
tipo: "dados",
esquema: z.objeto({ nome: z.corda() }),
});

Por fim, exporte o objeto de coleção para registrar suas coleções.

exportarconst coleções = {escritoras:escritoras}

2. Minificação de HTML

O Astro 2.5 apresenta a opção compressHTML que remove todos os espaços em branco (e quebras de linha) do seu HTML. Os componentes são compactados apenas uma vez pelo compilador Astro e depois durante a compilação. Isso é feito para reduzir os custos de desempenho.

Ativar esta opção em seu projeto é fácil. Basta adicionar as seguintes linhas ao seu arquivo de configuração. A Minificação HTML só funciona com componentes escritos no formato de arquivo .astro.

exportarpadrãodefineConfig({compactarHTML:verdadeiro})

3. Renderização Paralelizada

A renderização de componentes em paralelo é um recurso há muito esperado no Astro. Nos casos em que componentes filhos em diferentes subárvores buscam dados, o Astro 2.5 melhora os tempos de carregamento buscando dados em paralelo.

Isso permite que um componente mais abaixo na árvore seja renderizado sem ser bloqueado por um componente de busca de dados mais acima na árvore. No momento, a renderização paralela não funciona corretamente com array.map fragmentos assíncronos.

O Astro 2.5 também traz um novo conjunto de recursos experimentais que são abordados abaixo.

4. Renderização Híbrida

O Astro 2.5 agora permite que você defina uma nova opção de saída do servidor em seu arquivo de configuração que substitui o comportamento padrão de pré-renderização do SSR.

Para aproveitar a renderização híbrida, defina saída híbrida para true na seção experimental de sua configuração e adicione um adaptador.

Fazer isso pré-renderizará todo o site por padrão, mas você pode desativar esse comportamento definindo o pré-renderizar exportação de qualquer rota ou página para false:

exportarconst pré-render = falso;

5. Diretivas personalizadas do cliente

O Astro 2.5 apresenta a API addClientDirective para controle personalizado de hidratação de componentes do lado do cliente usando cliente:* diretivas.

Para usar este recurso, Ative experimental.customClientDirectives no arquivo de configuração e mantenha os pontos de entrada de diretiva mínimos para evitar qualquer impacto negativo na hidratação do componente.

Uma função do tipo ClienteDiretiva deve ser exportado de seu arquivo de diretiva de cliente. Por exemplo, o código a seguir hidrata o componente no primeiro clique na janela.

importar { ClientDirective } de"astro";
const clickDirective: ClientDirective = (carregar, optar, el) => {
janela.addEventListener(
"clique",
assíncrono () => {
const hidratar = aguardam carregar();
aguardam hidrato();
 },
 { uma vez: verdadeiro }
 );
};
exportarpadrão cliqueDiretiva;

Agora cliente: clique pode ser usado em seus componentes com suporte de tipo completo.

Como instalar Astro

O Astro fornece uma interface de linha de comando (CLI) chamada criar astro para você começar. Você precisa ter NodeJS 16+ e npm instalados em sua máquina.

npm criar astro@mais recente

Isso irá criar um novo projeto Astro a partir do zero. Siga as instruções na tela para configurar as coisas (se você não tiver certeza do que escolher, basta seguir as opções recomendadas). Próximo, cd na pasta do projeto e execute:

npm run dev

Você pode adicionar estruturas como React, usando astro adicionar. Se tudo estiver instalado corretamente, você pode abrir host local: 3000 em sua máquina, e você verá uma mensagem "Bem-vindo ao Astro".

Se você não gosta do NPM, pode optar por outros Gerenciadores de pacotes JavaScript como Yarn e PNPM.

Melhorando a experiência do desenvolvedor com o Astro

Estruturas completas como o Astro tornam o desenvolvimento de sites rápidos o mais suave possível. É fantástico, a natureza independente da interface do usuário significa que você pode trabalhar com qualquer estrutura JavaScript popular de sua escolha sem problemas.