Introduction to Astro

Published: Dec 22, 2024

If you're looking at frameworks for generating static websites, then you've probably come across the Astro framework. And if not, but you're interested in the topic, then I'd be happy to tell you a bit about this framework. Astro offers many different advantages. For example, it's possible to completely pre-render your websites so that you only have HTML and CSS. However, you also have the option to define certain blocks as client-side code, so that these are inserted as JavaScript. You can use your favorite framework, whether it's React, Vue, or Svelte. Static site generation results in extremely fast page loading times. The performance benefits are also advantageous for your search engine optimization. By the way, the page you are currently viewing was generated using Astro!

• • •

Table of content

• • •

Introduction

Over the time I've gained experience using different web technologies. I learned about frameworks like Angular, React, Vue and meta frameworks like Next and Nuxt. But there is one case I was not happy about yet: A bare simple web site, which does only provide information.

This type of website does not need JavaScript on runtime, but writing Vue components has a way better developer experience compared to writing pure HTML. But when creating a Vue website (e.g. using Vite), then your result will basically be an empty HTML file, which then loads JavaScript code, which then renders the website itself.

And then I learned about Astro

Astro is a static site generator. This means the JavaScript code (in this case your Vue components) are running in an Astro environment and the rendered result will be stored. The browser of your site visitor doesn't need to execute JS code anymore. It loads the already rendered web page. And on top a big benefit for me is: It is static content, which I can host in a cloud edge network, without leaving a Node server run.

1 2 3 4