Moving to Astro

Astro v1.0 was announced not long ago with the support of server-side rendering. Most static-site generators that I have used before were single-page application frameworks (like Gatsby, Next.js, and Scully), whereas Astro is a multi-page application framework but slightly different! It was designed for building content-rich websites, and the support for MDX is why I made the transition.

2 October 2022

Astro
Moving to Astro

Intro

Astro v1.0 was announced not long ago with the support of server-side rendering. Most static-site generators that I have used before were single-page application frameworks (like Gatsby, Next.js, and Scully), whereas Astro is a multi-page application framework but slightly doifferent! It was designed fr building content-rich websites, and the support for MDX is why I made the transition.

Previous problem

I’ve used the Angular framework a lot in the past for multiple projects so that’s why I have given an attempt and used Scully (a static site generator for Angular) to build a personal website. In short, I have found the following problems:

  • Lighthouse performance score isn’t great, mainly due to bundle size, unused files, and the speed of contentful paint.
  • Relatively smaller community when compared to other frameworks, thus less off the shelf plugins are available.
  • Slightly inconvenient to organise markdown files and images together. By default you would put markdown files under some folders under the root directory, e.g. content/blog/, and place blog images under src/assets/images/, then in the markdown frontmatter you reference the images by path (same for referenced images in the markdown content). Whereas in Gatsby you can place images next to the markdown file or any location and you can reference images using relative paths, Gatsby will automatically handle the path for you during the build time. Of course, you can write a custom plugin in Scully to do the same thing.
  • Not possible to integrate MDX - a file format based on markdown but also supports JSX. This means we can import/export react components (support for other frameworks might also exist) in mdx files which opens a lot of possibilities.

Why Astro

A couple of reasons:

  1. It is fast. Astro serves HTML files and strips away unused JavaScript thus increasing client loading speed.
  2. It was designed for content-focus websites such as blogs, documentation and portfolios.
  3. Support for MDX :)
  4. UI-agnostic. This means I can write codes using different frameworks and mix them on the same page. For example, I can use React to create interactive visualisation (React has a much bigger visualisation ecosystem than other frameworks), and use Svelte to build my website to take advantage of its simplicity.
  5. Good documentation. Setting up an Astro project and finding out how to do things in Astro was a very good experience thanks to the documentation. Before I actually started to set up a project, I was able to form a rough idea how to replicate/migrate features from my past projects by just reading the documentation.

If you’re interested, head to the docs to learn more.

Alternatives

There are other frameworks which can be used as SSG, here are some popular ones: