01. O que é o Astro?
Astro é um framework com foco em criação de websites orientados a conteúdo e web apps.
02. Por que o Astro?
MPA
O diferencial do Astro é que, ao invés de implementar o conceito de SPA (Single-Page Application) como outros frameworks, ele utiliza o conceito de Multi-Page Application. Por conta disso, ele tem um tempo de carregamento inicial reduzido por padrão, já que apenas a página acessada será carregada.
Agnóstico a plataformas
Outra coisa muito interessante é que o astro é platform agnostic. Isso significa que ele possui várias integrações com vercel, netlify, cloudflare, entre outras, de forma a extrair o melhor de cada uma delas.
Agnóstico a bibliotecas de componentes
Astro foi criado para também ser agnóstico a bibliotecas de componentes, então ele aceita componentes react, preact, vue, entre outros. Apesar disso, ele também tem seu próprio modelo de escrita de componentes, que é bem simples e costuma ser suficiente na maior parte dos casos.
Integrações
Isso, na minha opinião, é o que faz o astro ser extremamente avançado em termos de experiência do desenvolvedor (DX). A facilidade para adicionar funcionalidades e comportamentos no Astro é fora do comum. Você pode adicionar suporte ao tailwind, mdx, partytown, sitemap, entre outros. Basta executar um comando:
astro add <nome da integração>
Recomendo olhar a página de Integrações do astro
03. Server-side Rendering
O Astro utiliza server-side rendering por padrão. Ele se baseia no conceito de “interactive islands”, ou ilhas interativas. Isso significa que ele só irá enviar para o cliente o javascript que for realmente necessário para promover alguma interatividade. Isso faz com que o bundle da aplicação seja extremamente reduzido, tornando o site mais performático, e te dando alguns pontinhos no score do Lighthouse.
04. Cache de CDN
Algumas integrações do astro possuem suporte para cache de CDN. Nesse caso, eu utilizei a vercel, mas o netlify também suporta cache, por exemplo.
O cache de CDN possibilita que tenhamos uma cópia estática do site em um servidor fisicamente próximo ao usuário, reduzindo consideravelmente o tempo de requisição. Também podemos adicionar o tempo que esse cache permanecerá válido em segundos. Após esse tempo, a requisição será feita no servidor principal, e a versão atualizada da página será cacheada em CDN novamente.
Para isso, basta adicionar a seguinte linha:
Astro.response.headers.set(‘CDN-Cache-Control’, ‘public, max-age=43200, must-revalidate’);
Onde max-age é o tempo em segundos que o cache continuará válido. Nesse caso, 12 horas.
Para mais informações, recomendo ver a página de Server-side Rendering da documentação do astro
05. Otimização de Imagens
Muitas vezes você está buscando imagens de alguma integração externa em que você não tem controle se elas estão otimizadas, o que pode atrapalhar muito o desempenho do seu site ou aplicação.
Para isso, o astro possui um componente de imagem que pode ser importado de astro:assets
, possibilitando a configuração de tamanhos diferentes de imagens para telas diferentes, além de automaticamente converter o formato da imagem para webp.
<Image
alt="
src={video.thumbnail.url}
widths={[300, 370, video.thumbnail.width || 480]}
sizes={`
(max-width: 370px): 300px,
(max-width: 440px): 370px,
${video.thumbnail.width || 480}px
`}
width={video.thumbnail.width || 480}
height={video.thumbnail.height || 480}
/>
06. Edge Middleware
Este ponto é um pouco mais específico para as integrações com a Vercel, Netlify e Cloudflare. Essas plataformas possuem o recurso de executar funções serverless na borda. Isso significa que o processamento que realiza a renderização do lado do servidor será executado, fisicamente falando, o mais próximo possível do usuário. Isso faz com que o tempo de resposta do servidor seja reduzido, já que a latência da transferência de dados é reduzida.
Vale conferir a documentação para cada integração separadamente, mas o padrão é adicionar na configuração de adapter o atributo:
edgeMiddleware: true
07. Algumas considerações finais
É claro que, quanto mais interativo for seu site, mais javascript será enviado ao cliente, e menos performático ele será. É uma questão de entender o que é melhor para cada caso.
Lembre-se sempre rodar o Lighthouse em uma guia anônima, pois, caso você tenha alguma extensão instalada no navegador, ela pode prejudicar muito o resultado.
O Lighthouse é apenas um guia para encontrar pontos de melhoria. Não ter uma nota 100 não significa nada, assim como ter uma nota 100 também não significa muita coisa. No fim, o real objetivo é promover uma boa experiência do usuário.
Top comments (0)