Chop-Chop Logo
Blog

How to start with Astro.build

What is Astro.build?

Astro is an all-in-one web framework for building fast, content-focused websites. Astro build optimizes your website as no other framework can do. Leverage Astro’s unique zero-JS front-end architecture to unlock higher conversion rates with better SEO.

Is Astro.build really that fast? 

I created a page with a header and a few blocks. Two of those blocks are getting data from API and here is a view how it looks like:

Well, it’s pretty fast. But now the funny part: Astro.build developers still need to finish making it faster as they plan to improve speed even more in the future! 

That’s even faster than Next or Gatsby!

What can I do with Astro?

Astro is an all-in-one web framework, so you can do everything with that. Create Astro project with CMS, sure, no problem, here is a list of all CMS that Astro is compatible with, Create components as Reat or Vue components, sure, import it to the main Astro file, Astro also have SSR rendering, its very similar to next.js, but its faster. With Astro, you can use every tool you use to work.

Why is Astro that/so fast? 

The critical thing about Astro is that the components you create to work with Astro work as Astro-islands. The term “Astro Island” refers to an interactive UI component on an otherwise static page of HTML. Multiple islands can exist on a page, and an island always renders in isolation. Think of them as islands in a sea of static, non-interactive HTML.

In Astro, you can use any supported UI framework (React, Svelte, Vue, etc.) to render islands in the browser. You can mix and match different frameworks on the same page, or pick your favorite. The technique that this architectural pattern builds on is known as partial or selective hydration. Astro leverages this technique behind the scenes, powering your islands automatically.

Astro generates every website with zero client-side JavaScript by default. Using a front-end UI component built with React, Preact, Svelte, Vue, SolidJS, AlpineJS, or Lit, and Astro will automatically render it to HTML. Astro has it’s own way of displaying the component – it’s called partial hydration.

Partial hydration

Partial hydration is a way to display our components. We can decide how we want to show the scripts. Let’s make an example to see how it works:

So let’s create a simple button with props and import it as a regular component:

Output:

Our added button is at the end of the page. This button has some styles and functions, which you can see on console.log on the right part of the screenshoot. So what will happen when we click on this button? Nothing, the button won’t work. But more important question is: why is this happening? Have I done something wrong? No, everything is fine. That is why we haven’t said Astro how we want to display scripts for this component.

First, you will need an extension for your code editor. If you use Visual studio code, go to the plugins page and type Astro, then download this plugin, then go back to code and just type client: in your component, and there you will have a list of options to choose:

  1. Idle option – Load and hydrate the component JavaScript once the page is done with its initial load.
  2. Load: Load and hydrate the component JavaScript immediately on page load.
  3. Media – loads and hydrates the component JavaScript once a particular CSS media query is met. e.g. <span style="font-size: 1.8rem;"><Button client:media="(max-width: 500px)" /></span>
  4. Only: skips HTML server rendering, and renders only on the client
  5. Visible: when you see this component on your screen, then this component will get scripts that we write in component

This is how you can create your components in Astro. This solution is very powerful and that one and the other features, which are in Astro, give a big advantage when we compare it to the other tools.

If I haven’t convinced you to start using Astro yet, then

Astro is…

  1. Content-focused: Astro was designed for content-rich websites. 
  2. Server-first: Websites run faster when they render HTML on the server
  3. Fast by default: Building a slow website in Astro should be impossible.
  4. Easy to use: You don’t need to be an expert to build something with Astro. 
  5. Fully-featured but flexible: Over 100+ Astro integrations to choose from.

So let’s type npm create astro@latest in your code editor console, and have fun!

Remember Astro documentation!

Summary

Astro is a potent tool that is easy to use, so you must check! With many options, a massive plus for Astro for that you can use multiple frameworks together! Also, Astro will improve your development experience, and you won’t regret checking it out!

If you have any questions, give us a shout. Our developers are here to assist you.