Day1 - Astro Series: Preflight Check List

@ Astro

A beautiful gradient background with the title: "Preflight Preparations"

Introduction

According to State of JS 2022🔗, a new framework launched in 2021 has gained significant attention and interest from developers. With minimal negative feedback and high praise, it has caught everyone’s attention… Yes, it is the theme of this Ironman contest — Astro.js. Instead of mindlessly diving into the endless wave of technology trends, this series of articles will analyze the issues from scratch and let readers know when they should pay attention to this technology.

Learning Astro will be a new trend in front-end development, and it has been rated by the front-end community as one of the “most loved” and “most anticipated” new technologies. With its extremely gentle learning curve, active community, pain-point positioning, and high scalability, it can be easily adopted as a primary productivity tool for front-end development.

Let’s see how the community evaluates Astro:

What is Astro?

A multi-purpose framework focused on static content, Astro allows JavaScript to be executed only when necessary through selective hydration rendering mode, making it easy to create websites with excellent SEO and performance. You can also expand its functionality from community themes🔗 and plugins🔗, or choose to integrate your favorite UI component language (React, Preact, Svelte, Vue, Solid, Lit) to write Astro. There are also features like…

  • MDX and Markdown support
  • File-based routing
  • Automatic image optimization
  • CMS integration
  • Deployment integration
  • View Transitions API
  • …and more

All officially supported and maintained to save you time.

What Astro is Not?

Due to its architectural design suited for building websites focused on static content, such as marketing, documentation, blogs, portfolios, and certain types of online shops, if you want to create a website that resembles a web application rather than a static content-oriented site, it is advisable to try other frameworks that adopt different rendering strategies (like Next or Nuxt) instead of Astro. The standout features of Astro’s rendering method will be explained in more detail in the next section.

What Prerequisite Knowledge Do I Need?

Astro.js is a “framework that allows for selective complexity,” with a low barrier to entry; just basic HTML, CSS, and JavaScript knowledge is needed. However, the following experience would be beneficial:

  • JSX
  • Markdown, MDX
  • Other static site generators, templating languages, SSR frameworks
  • Vite

Who Am I?

I am Rice, a former front-end teaching assistant at Hex School. Feel free to check out my technical blog🔗 and portfolio🔗 (both built with Astro!). I started using it to create websites before the official release, and I have gained some insights as it has attracted many inquiries, prompting me to write this series of articles to share. I have used various frameworks like Next, Nuxt, Gatsby, Jekyll, and HUGO, all of which are great but never quite met my needs for creating static pages. Using Astro.js has perfectly solved the issues I faced in building static web pages, giving me strong motivation to promote this useful framework!

Further Reading