Moving Astral to Astro

You may be thinking, "Haha you're funny, you used Astro for Astral since the names match up". However, this is far from the truth.

Astro is a Static Site Generator, with experimental Server-side Rendering. It allows users to mix-and-match any supported UI framework. This allows for powerful combinations, while allowing for the fast speed of rendered HTML.

We decided to use Astro for Astral's complete overhaul for its ease of use, similarity of syntax when compared to Next.js (what we used before), and it's growing support base.

Moving codebases was no easy feat, and it did take upwards of a few weeks. However, the end result was incredibly fast, in fact more performant than our old site. Here's a Lighthouse comparison with our landing page rewrite:

Crazy, right? See for yourself.

Not only did we move our landing page to Astro, we rewrote our entire dashboard and authentication sites as well. Of course, the easiest was rewriting the authentication site, since it was the smallest of the bunch. What took the longest, obviously, was the dashboard.

While rewriting the dashboard in Astro, I was faced with many issues, many of which included figuring out ways to create and display Javascript-less content, like modals, dropdowns, and more. This was achieved primarily with Anchor tags, which CSS has support with (using target). You can find many tutorials online showcasing how to create such a thing.

All in all, Astro is an amazing web framework which I hope takes off (haha) even more soon, as I personally believe nowadays that websites should be HTML-first and Javascript-second. Sure, SPAs are great for some things, but sometimes for performance, MPAs (multi-page applications) are much better for the task.