Astro is a tool for building static websites with your favorite JavaScript framework.

But it will ship zero JavaScript to the browser 🤯.

End-users love fast-loading websites but developers love to build them with heavy JavaScript frameworks.

Astro allows you to build your website with your favorite framework and even multiple frameworks at the same time.
Astro renders them to static HTML at build time, this sounds like a static site generator, but what it's unique here its, when you have a component that needs to be interactive with full JavaScript, you have multiple strategies to render and hydrate the client side.

Welcome to Directives

Template directives are a special kind of HTML attribute available inside of any Astro component template (.astro files), and some can also be used in .mdx files.

Template directives are used to control an element or component’s behavior in some way

Here are some example for client directives.

client:load - Will be rendered with JavaScript on the initial the page load, it's like a normal JavaScript App.

client:idle - Will wait until the browser is idle to render it, this is used when the component is not a high priority.

client:visible - Will be rendered until its visible to the end-user.

For more about client-directives here

When using Atro we need to stop thinking that our website like SPA with JavaScript takes over everything, think like an archipelago, when the water is the static HTML and islands are self-contain components that ad interactivity when need it, the result is a fast website with the full interactive power of a framework.

Picture Resource: https://www.nationalgeographic.com/travel/slideshow/paid-content-the-philippines-an-archipelago-of-unique-scenery

Building your first Atro Project

npm create astro@latest

Inside the project, you will find the pages directory, here it's the router configuration of the website. Every page is defined as an Astro component, inside of it you can write static HTML or declare components that maybe be written in React/Vue or any framework.

On the top of the component, you will notice triple dashes, this is where you can execute JavaScript on the server at build time, here you can fetch data or local markdown data in your source code.

To add React to your website, follow the following steps from the official documentation here.

Resources:

• Astro
• Islands Architecture
• Framework-components
• Client Directives