What is Astro JS?

Astro.js is a modern web development framework that allows developers to create fast and lightweight websites.

Image

Astro is a mod­ern, JS-based frame­work with a mis­sion to build fast, con­tent web­sites. What makes it dif­fer­ent than oth­er frame­works is that it is a mul­ti-page app (or MPA) frame­work. Astro isn’t the only MPA frame­work out there, but you’re prob­a­bly used to them using some serv­er-side lan­guage like PHP. Astro is just HTML, CSS, and JavaScript.

But with Astro you don’t ship any JavaScript; it’s only used for the build, and the out­put from Astro is a sta­t­ic site. How­ev­er, if you want to use JavaScript to hydrate part of your tem­plates dynam­i­cal­ly, you can do that, too. 

Astro also lets you BYOF or ​“Bring Your Own Frame­work.” You can use React, Svelte, Vue, or any mod­ern JS frame­work you’re com­fort­able with. 

Some of the key fea­tures of Astro.js include:

  • Sta­t­ic site gen­er­a­tion: Astro.js can gen­er­ate sta­t­ic web­sites, which means that the web­site can be pre-built and served as sta­t­ic HTML, CSS, and JavaScript files, mak­ing it faster and more secure.
  • Com­po­nent-based archi­tec­ture: Astro.js allows you to build web appli­ca­tions using com­po­nents, which are reusable UI ele­ments that can be com­bined to cre­ate com­plex interfaces.
  • Mod­ern syn­tax: Astro.js uses mod­ern syn­tax and fea­tures from the lat­est ver­sions of JavaScript, such as import state­ments, async/​await, and destructuring.
  • Built-in opti­miza­tions: Astro.js includes built-in opti­miza­tions for per­for­mance, such as code split­ting, tree shak­ing, and auto­mat­ic resource preloading.
  • Seam­less inte­gra­tion with exist­ing tools: Astro.js inte­grates with exist­ing tools and frame­works, such as React, Vue.js, and Tail­wind CSS, allow­ing you to use your favorite tools and workflows.

But the best thing about Astro, espe­cial­ly for devel­op­ers used to work­ing in Craft CMS, is that it is approach­able and straight­for­ward. The tool­ing isn’t com­plex (built on Vite), and the tem­plat­ing via Astro Com­po­nents can be as sim­ple as you want. The abil­i­ty to choose your con­tent course (from Mark­down to GraphQL) makes it flex­i­ble and the first JavaScript frame­work you should try if you haven’t used one before.

That being said, Astro isn’t a ​“sprin­kle frame­work” like petite-vue or Alpine.js. We’re not using it to add reac­tiv­i­ty to our site or appli­ca­tion pages. Instead, we’re using Astro to build an entire site, ship­ping zero or near-zero JavaScript and hav­ing an enjoy­able devel­op­er expe­ri­ence while we’re doing it.

To learn more about Astro, check out our Astro Quick-Start Guide video course.