Building Static Pages with Astro for Perfect Core Web Vitals/

...

/

Why Astro?

Why Astro?

Learn why Astro is an ideal choice with easy learning, full customization, multiframework support, and top-notch performance.

We'll cover the following...

Before we begin, let’s discuss why someone would choose Astro in the first place. In this lesson, we’ll explore some of the benefits that Astro offers over other frameworks.

Easy learning curve

One of the main advantages of Astro is its shallow learning curve. Astro’s syntax closely resembles JavaScript XML (JSX), which makes it easy to get started if we already have experience with React. To understand the structure of an Astro component, let’s take the following as an example where we have the layout, styles, and script in the same component. See src/pages/index.astro in the code example below to inspect the component:

/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />
Hello world example in Astro

Note: When making changes to the interactive widget, rerun the application to apply the changes.

Astro components consist of the following four distinct sections:

  • Frontmatter: We can see in lines 1–4 that the frontmatter section contains logic that is only available during server-side rendering (SSR). The text variable is defined here and can be injected into the Astro template to enable dynamic behavior. In this example, the text variable holds the 'Toggle Text' value.

  • HTML layout: Below the frontmatter section, we can write any valid HTML ...