It’s time again to introduce a new JavaScript framework. Today it is the new Framework Astro which was published in its first full 1.0 release a couple weeks ago. But what makes Astro and it’s „Island Architecture“ so different from its competitors in the endless world of JavaScript frameworks. Let’s take a look.
I would describe Astro as a static site generator at is core. You write code with the optional use of templates, which are then later transformed to real optimized HTML pages. However, this description would be a little bit unfair for the framework as it can do more. Astro can render interactive parts of pages in addition to true static page HTML generation. But how to display interactive elements in static files? This question plagues the web community for a very long time.
The quest for interactivity
At the beginning of the internet, there were only static files. You used the URL to get to a specific Hypertext Document. Later, CSS and JavaScript were introduced. Now, you have the ability to style the document with CSS and manipulate the DOM at real-time with JavaScript. A website consists of multiple pages: it is a multi page application.
Multipage applications are the traditional way of doing things in the web. In the old days, you wanted to avoid to run code on the client because of the slow and complicated execution. Multipage applications often come bundled with a backend server. When the user visits the site, the server generates the HTML page with the most recent content. Also, you can do all sorts of data fetching from the database and user authentication on the server.
Fast-forward a couple of years, and now we have client-side frameworks that can do state management and many more things from the get go. The developer has the ability to develop app-like websites with these strong tools. The Single Page Application was born. It consists of only one single HTML file that uses JavaScript to render the rest of the site. However, you need to send a large amount of JavaScript to the browser client so that the web page can be rendered in an interactive manner. The heavy use of JavaScript results in slow first page loads and no very good options for SEO. Larger applications with many files are also notorious more complicated.
So, let’s take a step back. We can mix the developer experience of Single Page Applications with the flexibility of Multi Page Applications. Instead of sending one huge JavaScript application, we can sends smaller parts as individual sites. This is the way many server side rendering frameworks work.
Dynamic to static
The problem you get with kind of Multi Page Applications it that the frontend is tiddly integrated with the backend. It is necessary to run a server in the background. But not every website has some much changing data that dynamic generation is meaningful. Also, it makes the website as a whole more complex to handle and to program. So, what is the solution? We do not render the website every time the user makes a request but rather in advance. Now, only static files are stored on the server. This approach is much easier and the foundation for the JAM stack (JavaScript, APIs, Markup). Some data is now pre-rendered static parts and some data is gathered on the client side via APIs.
But here we still haven’t solved the problem of having to run a large amount of JavaScript on the client side. If we do not have interactive and often changing content, we could pre-render the entire page, as static site generators like Hugo have been doing for some time. Often you have a mix of both. This is where Astro comes in.
Islands and their use
Astro renders the static parts of the website in advance. JavaScript is still used for the dynamic parts of the website. They act more or less as a separate self integrated part of the website, creating an island. At the same time, Astro is not opinionated. Astro gives you the possibility to design the dynamic parts of your website with the JavaScript framework of your choice. If you want to use Svelte for your website, no problem. But do you need React and its huge library ecosystem for certain parts of your website? No problem! Just use React for these parts.
Also, this approach solves another big problem: JavaScript is just too slow. Rendering the web page on the client side sounds like a good idea at first glance. You can now use the resources of the client device. But in reality these are still limited. In the end, displaying an HTML file is always faster than rendering such a file. That’s why Astro is relatively fast at its core.
Furthermore, Astro offers a very interesting feature for blogs: creating pages with Markdown. This allows you to simply create a new Markdown file for a single page, which is then converted to HTML in the build process.
Summary
So, what is Astro? I would describe it in its current form as a static site generator with fantastic possibilities for interactivity. Astro can also do server side rendering and many other features. But still, the core is semi-dynamic sites. This is where Astro can shine.
Schreibe einen Kommentar