I wrote cchulo.codes back in 2021. This was a web app written in Angular, with a .NET 6 backend and a NodeJS-based headless CMS called Strapi. The content was stored in a Postgres server.

You can still build it and run it locally to check it out. So why did I abandon it and make a new devblog with Astro?

Issues with the old setup

Well, maintaining the old Angular app was a bit of a challenge. Strapi is a standalone service that runs a NodeJS server. I had set it up so that accessing the admin panel required me to run an SSH tunnel. This meant I needed to maintain strict SSH controls, set up the firewall properly, and ensure everything was up to date.

The other challenge was updating Strapi. The Strapi developers are amazing, but I ran into two major updates that introduced breaking changes that were extremely disruptive. This required me to completely rebuild the Postgres database and re-ingest my markdown blog posts.

Did not like the domain

I no longer own cchulo.codes, I was never quite pleased with the domain. I felt as though a devblog should have a personal touch. I own cchulo.dev which I intend on using it for a portfolio website.

Why Angular? Why .NET?

Back in those days, I was heavily invested in Angular and .NET. I learned these technologies from my employment in the industry. I didn’t really want to bother learning anything new since I thought Angular was good enough for everything. Little did I know that Angular does not lend itself well to Search Engine Optimization (SEO). SEO is the practice of enhancing a website to improve its visibility and ranking on search engine results pages.

To put it simply, Angular has a JavaScript payload that the user needs to load when they visit your website. This payload contains everything needed to load your entire site, similar to the main() function in a C++ or .NET program.

Google knows how to parse and index SPAs built with Angular (they maintain it, after all!), but other search engines don’t know how to parse them, mostly because they tend to ignore the JavaScript payload. Social media sites often cannot post previews for links to SPAs for the same reason.

I ended up with a web app that was over-engineered, could not be reliably updated, and could not be optimized for search engines other than Google.

Pivoting away from SPAs towards static site generators

I’ve always understood the importance of choosing the right tool for the job. In college, a seasoned professor taught me that engineers “should not marry technology.” For a time, I forgot about this, thinking Angular was suitable for all types of applications and that I wouldn’t need to learn anything else. Now, I realize that I was too attached to Angular and ended up choosing the wrong tool for the job.

Enter Astro to save the day. I know what you might be thinking: “Oh great, yet another web framework that no one will use,” but hear me out. Initially, I was looking into NextJS and React to rebuild my devblog, and it again felt like I was over-engineering everything.

My requirements are simple:

• I write blog posts in markdown
• The site should be light, load quickly, like a static web app would
• No dependencies other than technologies required to serve the web app, like Apache or Nginx

Angular can tick two of these boxes, but it does require JavaScript to function. PWAs can help in loading content quickly after a user has visited the site for the first time, and cchulo.codes was a PWA. But do you really need to make a blog into a PWA? Who is going to install it? If anything, it may clutter a person’s apps in their app list if they did this.

Astro ticked all these boxes. In short, Astro is a static site generator designed to create fast, SEO-friendly websites by delivering pre-rendered HTML to the browser. What I like most about it is you can incorporate other frameworks if you really want to, like React or Vue. What ultimately sold me was this video from Fireship:

And so I stuck with Astro. It was really easy to get started. I finished their tutorial in a single weekend.

When I was done, I created a new Astro project for TakoBits.dev using the blog template, added a dark theme (your eyes will thank me 😉), and I was off to the races!

Why not just make a Medium or WordPress account and call it a day?

That doesn’t sound quite as fun, to be honest.

Conclusion

At the end of the day, Angular is a powerful framework packed with features like dependency injection, form validation, and routing, making it perfect for complex, enterprise-level applications and single-page apps (SPAs). Its strong community support and extensive documentation, backed by Google, are significant advantages. However, Angular’s reliance on JavaScript can pose SEO challenges, and it might introduce unnecessary overhead for simpler projects. Managing large-scale applications can also become quite complex.

On the other hand, Astro is a static site generator designed for creating fast, SEO-friendly sites with pre-rendered HTML, making it ideal for content-heavy websites and blogs. Its flexibility to incorporate frameworks like React or Vue and its simplicity focused on performance make Astro an excellent choice for static sites. However, Astro might not be the best fit for complex, dynamic applications and, being relatively new, it has a smaller ecosystem compared to Angular.

Admittedly though, in today’s age of AI, SEO hardly matters. Google search has become worse in recent years. The only people who are most likely to visit my blog are those who are provided direct links anyway. So SEO may not be a strong reason for moving towards Astro, but the other reasons still stand. Plus I would still need to enable Server Side Rendering to take full advantage. I will be leaving it as a static website for now.

The main takeaway here is to never stop learning and never stop tinkering. Never put all your eggs into a single basket. Never marry technology. Also, never regret your mistakes. While I initially created an over-engineered web app, I ended up becoming more experienced in learning about the tradeoffs of these technology stacks. Astro is just one more tool that will go into my toolbox.

I will be looking towards learning NextJS/ReactJS. I have a project in mind about implementing a web-based frontend that is an open-source replacement for Steam’s gamepad UI. Who knows, maybe Angular is better suited for that type of application, but I will not know until I learn more about React/NextJS and its pros and cons.