Por que Astro?

Astro é o framework web para a construção de websites focados em conteúdo como blogs, marketing e e-commerce. Astro é mais conhecido por ser pioneiro em uma nova arquitetura de frontend para reduzir o excesso e a complexidade do JavaScript em comparação a outros frameworks. Se você precisa de um website que carregue rápido e tenha ótimo SEO, então Astro é pra você.

Funcionalidades

Astro é um framework web tudo em um. Ele inclui tudo que você precisa para criar um website, nativamente. Há também centenas de diferentes integrações e hooks de API disponíveis para customizar um projeto para o seu exato caso de uso e necessidades.

Algums destaques incluem:

Ilhas: Uma arquitetura web baseada em componentes otimizada para websites focados em conteúdo.
UI agnóstico: Suporte a React, Preact, Svelte, Vue, Solid, Lit, HTMX, web components, e mais.
Servidor em primeiro lugar (EN): Move renderização cara para fora dos dispositivos de seus visitantes.
Zero JS, por padrão: Menos JavaScript do lado do cliente para tornar seu site mais lento.
Coleções de conteúdo: Organiza, valida e ofereçe segurança de tipos do TypeScript para seus conteúdos Markdown.
Customizável: Tailwind, MDX e centenas de integrações para escolher.

Príncipios de Design

Aqui estão cinco princípio de design centrais para ajudar a explicar porque criamos Astro, os problemas que ele existe para resolver e porque Astro pode ser a melhor escolha para seu projeto ou time.

Astro é…

Focado em conteúdo: Astro foi feito para mostrar o seu conteúdo.
Servidor em primeiro lugar: Websites são mais rápidos quando eles renderizam HTML no servidor.
Rápido por padrão: Deve ser impossível construir um website lento com Astro.
Fácil de utilizar: Você não precisa ser um especialista para construir algo com Astro.
Focado no desenvolvedor: Você deve ter os recursos que precisa pra ser bem sucedido.

Focado em conteúdo

Astro foi feito para criar websites ricos em conteúdo. Isto inclui sites de marketing, sites de publicação, sites de documentação, blogs, portfólios, páginas iniciais, sites de comunidade e sites de ecommerce. Se você tem conteúdo para mostrar, ele deve alcançar seus leitores rápido.

Em contraste, a maioria dos frameworks web modernos foram feitos para construir aplicações web. Esses frameworks funcionam melhor para construir experiências mais complexas, parecidas com aplicativos no navegador: painel de navegação de administrador logado, caixas de entrada, redes sociais, listas de afazeres e até aplicações que parecem nativas como Figma e Ping. No entanto, com essa complexidade, eles tem dificultade em prover boa performance para entregar seu conteúdo.

O foco do Astro em conteúdo desde sua origem como um gerador de site estático o permitiu escalar de forma sensata até aplicações web performáticas, poderosas e dinâmicas que ainda respeitam seu conteúdo e sua audiência. O foco único do Astro em conteúdo o permite fazer trocas e entregar funcionalidades de performance indisputáveis que não fariam sentido para frameworks web focados em aplicações implementarem.

Servidor em primeiro lugar

Astro aproveita ao máximo renderização no lado do servidor (EN) no lugar de renderização no lado do cliente sempre que possível. Esta é a mesma abordagem que frameworks no lado do servidor tradicionais -- PHP, WordPress, Laravel, Ruby on Rails, etc. -- vem utilizando por décadas. Porém você não precisa aprender uma segunda linguagem no lado do servidor para utilizá-lo. Com Astro, tudo ainda é apenas HTML, CSS e JavaScript (ou TypeScript, se preferir).

Esta abordagem se destaca em contraste com outros frameworks web JavaScript como Next.js, SvelteKit, Nuxt, Remix e outros. Esses frameworks precisam de renderização no lado do cliente para o seu website inteiro e possuem renderização no lado do servidor principalmente para lidar com problemas de performance. Essa abordagem foi apelidada de Aplicação de Página Única (SPA, do inglês, “Single Page Application”), em contraste com a abordagem de Aplicação de Múltiplas Páginas (MPA, do inglês, “Multi Page App”) do Astro.

O modelo SPA tem seus benefícios. Porém, eles vem com o custo de complexidade adicional e tradeoffs de performance. Esses tradeoffs prejudicam a performance da página -- incluindo métricas críticas como Time to Interactive (TTI) -- que não fazem muito sentido para websites focados em conteúdo onde a performance do primeiro carregamento é essencial.

O Astro colocar o servidor em primeiro lugar lhe permite optar por renderização do lado do cliente apenas se, e exatamente quando, necessário. Você pode escolher adicionar componentes de um framework de UI que executação no cliente. Você pode tirar vantagem do roteador de transições de visualização do Astro para um controle mais fino sobre a seleção de transições e animações de páginas. A renderização centrada no servidor do Astro, seja pré-renderizada ou sob demanda, oferece padrões performáticos que você pode otimizar ou extender.

Rápido por padrão

Boa performance é sempre importante, mas é especialmente crítica para websites cujo sucesso depende da exibição de seu conteúdo. Já foi bem provado de que uma performance ruim te faz perder engajamento, conversões e dinheiro. Por exemplo:

Cada 100ms mais rápido → 1% mais conversões (Mobify, ganhando +$380.000/ano)
50% mais rápido → 12% mais vendas (AutoAnything)
20% mais rápido → 10% mais conversões (Furniture Village)
40% mais rápido → 15% mais registros (Pinterest)
850ms mais rápido → 7% mais conversões (COOK)
Cada 1 segundo mais lento → 10% menos usuários (BBC)

Em vários frameworks web, é fácil construir um website que parece ótimo durante o desenvolvimento para então carregar de forma dolorosamente lenta após o deploy. JavaScript é geralmente o culpado, já que muitos celulares e dispositivos menos potentes raramente se comparam a velocidade do notebook de um desenvolvedor.

A mágica do Astro é em como ele combina os dois valores explicados acima -- um foco em conteúdo com uma arquitetura com o servidor em primeiro lugar -- para fazer tradeoffs e entregar funcionalidades que outros frameworks não conseguem. O resultado é uma incrível performance web para todos os sites, fora da caixa. Nosso objetivo: Deve ser praticamente impossível construir um website lento com Astro.

Um website Astro pode carregar 40% mais rápido com 90% menos JavaScript do que um mesmo site feito com o mais popular framework web React. Mas não tome nossa palavra sobre isso: veja a performance do Astro deixar Ryan Carniato (criador do Solid.js e Marko) sem palavras.

Fácil de utilizar

O objetivo do Astro é de ser acessível para todos os desenvolvedores web. Astro foi feito para parecer familiar e acessível independente do nível de habilidade ou experiência com desenvolvimento web.

A linguagem de UI .astro é um extensão do HTML: qualquer HTML válido é também uma sintaxe de template Astro válida! Então, se você pode escrever HTML, você pode escrever componentes Astro! No entanto, ela também combina algumas de nossas funcionalidades favoritas emprestadas de outras linguages de componentes como expressões JSX (React) e CSS com escopos por padrão (Svelte e Vue). Essa proximidade do HTML também torna mais fácil utilizar melhorias progressivas e padrões de acessibilidade comuns sem nenhuma sobrecarga.

Nós então garantimos que você possa usar sua linguagem de componentes UI favorita que você já conhece e até mesmo reusar componentes que você possa já ter. React, Preact, Svelte, Vue, Lit e outros, incuindo web components, são todos suportados para criar componentes de UI no seu projeto Astro.

Astro foi feito para ser menos complexo do que outros frameworks e linguagens de UI. Um grande motivo para isso é que Astro foi feito para ser renderizado no servidor, não no navegador. Isso significa que você não precisa se preocupar sobre: hooks (React), stale closures (também do React), refs (Vue), observables (Svelte), atoms, selectors, reactions ou derivations. Também não há reatividade no servidor, então toda essa complexidade não existe.

Um dos nossos provérbios favoritos é: opte por mais complexidade. Nós fizemos Astro para remover toda “complexidade obrigatória” que fosse possível da experiência do desenvolvedor, especialmente quando você está iniciando. Você pode construir um website “Olá Mundo” de exemplo com Astro com apenas HTML e CSS. Então, quando você precisar construir algo mais potente, você pode incrementalmente utilizar funcionalidades e APIs novas na hora.

Focado no desenvolvedor

Nos acreditamos fortemente que Astro só é um projeto de sucesso se as pessoas amarem usá-lo. Astro tem tudo que você precisa para ajudá-lo conforme você cria com Astro.

Astro investe em ferramentas para desenvolvedores como uma ótima experiência com a CLI desde o momento em que você abre seu terminal, uma extensão oficial para o VS Code para destaque de sintaxe, TypeScript e Intellisense e documentação ativamente mantida por centenas de contribuidores da comunidade e disponível em 14 idiomas.

Nossa acolhedora, respeitosa e inclusiva comunidade no Discord está pronta para oferecer ajuda, motivação e encorajamento. Abra uma thread em #support para receber ajuda com seu projeto. Visite nosso canal #showcase dedicado para compartilhar seus sites, postagens em blogs, vídeos e mesmo trabalhos em-progresso usando Astro para feedbacks seguros e críticas construtivas. Participe em eventos ao vivo regulares como nossa chamada comunitária semanal, “Talking and Doc’ing” (Conversando e Documentando) e festa da API/bugs.

Como um projeto de código aberto, nós recebemos de braços abertos contribuições de todos os tipos e tamanhos de membros da comunidade de todos os níveis de experiência. Você está convidade a participar de discussões sobre planejamento de projeto para formar o futuro do Astro e esperamos que você vá contribuir correções e funcionalidades para a base de código do núcleo, compilador, documentação, ferramentas de linguagem, websites e outros projetos.