Skip to content

AstroJS: let the HTML shine again (with SSG)

Published: at 02:05 PM

We live in a dark and gloomy world, where WordPress has laid down its roots without anyone noticing or countering it.

Fortunately, a new dawn has arisen in recent years: statically generated websites. Among them, AstroJS is a real shining light that can enlighten the minds of many people in the industry.

In case there were any doubts: yes, this website was generated using AstroJS.

Table of Contents

Open Table of Contents

The rise of SSGs

SSGs stands for Static Site Generator(s) and represent a class of tools that generate HTML starting from templates and content data. This is exactly the opposite of tools like WordPress that need server-side processing to create the pages on demand.

SSGs are not so young since “Jekyll” exists since 2008, but they have only recently gained fame. One of the most famous is GatsbyJS and its success it’s a mix of rich plugin ecosystem and React codebase. Also, Gastby is part of a set of tools for the JavaScript language which make easier the life of web developer since it should already know JS for the client side logic.

In a world of users who don’t always want to reinvent the wheel, Gatsby was a great tool since many developers already know React and find the plugin ecosystem a great place to speedup the development.

However, we live in a fast world so we cannot think that every tool will be forever. One of the critical aspects of using Gastby (the same goes for tools with React/Vue on the client side) is that the client needs to render locally the content and this could lead to some performance issues.

As always, simplicity is the best choice and every action we do in our life should be under the KISS principle:

The trending in the last years is to go back to the origin: we should generate only HTML, or at least as little JavaScript as possible.

React no more! AstroJS I choose you!

ReactJS has allowed many web developers to approach SSGs tools but its client load is no longer justifiable, today, for a simple website.

The future, as said before, is a good old HTML website. But, what web-developers want is a useful tool to not write a website really from scratch and here AstroJS comes to our aid.

AstroJS is a JavaScript framework that generates static HTML pages with zero JavaScript by default.

As others SSGs do, the content can be obtained from a mix of sources: Markdown files, JSON files, external API or even from a CMS. It also makes simpler to convert a website from Gastby to Astro.

With Astro you don’t need to give up modularity since you can create components in separate files and reuse them even if at generation time they will be compiled into plain HTML.

At the same time, you can improve the UX by insert small “apps” into your pages with your preferite technology/framework: React, Vue, Svelte, Solid, etc. This is really powerful especially if you need to refactor an existing website, and also removes technology lock-in.

The speed of the final website will be really great, you can check out the real-world Core Web Vitals of real users, data don’t lie.

Last but not least, the speed of page generation is amazing! Not fast as some SSG in low-level languages like Rust but still a good improvements compared to Gastby. As example, i have some websites depolyed with both the tools and the Gastby ones requires at least 1 or 2 minutes, the Astro ones varies between 20 and 40 seconds. Low build times also mean, less power consumption and less costs. To be honest, a small business website has no cost at all since platform like Netlify have generous free plans.

Clash of titans

The rise of Astro doesn’t mean that WordPress will be ignored, data shows exactly the opposite: Astro is growing but WP is the most used tech and its first place won’t change anytime soon.

In the other hand, Astro can be an ally for WP, returning it to its original role as a CMS. As said before, the source of contents for Astro can also be a CMS and WordPress is a CMS.

Here we go again

"Here we go again meme" with "PLAIN HTML"

The history of humanity is made up of enormous cycles that recur every now and then, HTML is one of them. For years we have appreciated complications when instead it was enough to do things well and easily.

HTML returns to play a primary role thanks to Astro, but it does so in a modern, sustainable and maintainable way.

Contents are just contents

One of the best qualities of SSGs is that each element returns to playing only its own role, in particular the content returns to being only and exclusively content, ignoring layout, style etc.

Markdown

From this perspective, Markdown is a very powerful tool as it allows you to have all the necessary formatting while maintaining a very simple syntax. Furthermore, with the frontmatter part it manages to expose a lot of useful metadata.

Using a CMS

If the content must be strongly structured, maybe a CMS is even better than Markdown. And this is perfectly fine, the important thing is to use the tool you really need without “shooting an ant with a cannon”.

A bright future

Astro is a great web framework but web developers are often too fond of tools they already know “because they already know how they work”, as a result Astro is well talked about by many but really used by few.

What makes Astro great is its growth trend, popularity and the community that is developing around it. The numbers will increase as time passes.

By now, even if less performing, GastbyJS is more widespread (and way more is WordPress). If you look at the data in the Core Web Vitals report you can see how many more “origins” are for WordPress and how few are for SSGs tools. This difference is a mix of: existing time of the tool, popularity, hype.

For years, WordPress was used by developers and not, thus, it became the de-facto standard. Maybe in the next 4/5 years, Astro will become more famous and used.

Beyond SSG

final bonus consideration: Astro is not only a tool for generating static sites but also supports server side and hybrid rendering. This means that, hopefully, in the future it will be used and known by many developers to also create web applications.

Who knows if this will increase the growth trend? I hope so.