DEV Community

Cover image for Astro vs Visual Studio 2022 as Static Site Generators
Mike Sanders
Mike Sanders

Posted on

Astro vs Visual Studio 2022 as Static Site Generators

I have spent today learning the new Astro SSG. You can read about it at https://astro.build/ or better yet you can get started with it at https://docs.astro.build/en/install/auto/. While Visual Studio isn't exactly a SSG, they way you code with it can make static web pages. VS has so much more power than that.

What is a Static Site Generator?

Honestly, the term is sort of new to me. But basically, it means a tool that creates static web pages. What are those? Web pages that only need html, css, and if desired javascript. The official definition of course is at Wikipedia, https://en.wikipedia.org/wiki/Static_site_generator.

Setup

So, for the Astro side, I used the following

  • VS Code (latest)
  • Debian 11 OS w 16GB Ram
  • LxQt
  • node 18.6
  • astro 9.5.1

For Visual Studio, of course I need

  • Windows 11 w 32GB Ram

Comparisons

IDE Performance

Obviously VS Code is going to win this hands down.

Intellisense

Astro -- The intellisense for Astro related code is not too bad using the Astro extension in VSCode, but after adding Vue to the mix, I was a bit disappointed that some Vue code did not show up as missing variable errors. However, the hot swap debug environment with Astro did point out those errors.

Visual Studio -- When it came to choosing CSS classes, Visual Studio still knocks it out of the park for adding classes to elements. VS knows exactly what classes are available and gives very quick dropdowns to this affect. VS wins the intellisense compare.

Flexibility

This one I don't think you can compare. This is where each tool has it's purposes and both do excellent jobs towards that. I won't go into Visual Studio, but I would like to highlight some integration points that Astro offers.

  • CSS -- Tailwind
  • WebWorkers -- Partytown (have not been there in a while, but I do like the song)
  • UI/Javascript Frameworks -- React, Svelte, Vue, plus a few more
  • SSR -- Cloudfare, Vercel, Node, Netlify
  • Headless CMS Integration-- Too many to mention, but many are in development.

My Take

I will always opt for a strong backend tool to serve up static pages, like dotnet core. The question and goal I have is how to create a static site quickly and without having to refactor too much later. I might be in a place where I don't worry about styling the site too much and get the content done using Astro. This is where Astro's integration with headless cms systems could have a huge advantage. Plus I think from a templating and component perspective, developing with Astro will be a lot quicker. After all of that is done, then I might let Visual Studio take over for the styling of the sites pages.

Either way, I think it was a day well spent on learning the Astro SSG tool. It is a very promising project in the node/npm space.

Top comments (0)