Build your next website with Astro

The last two weeks I’ve been moving websites made with only React to Astro. The developer experience was fantastic, even for a new tool with alpha/beta integrations.

Let’s explore what Astro does for you in web development:

Astro is similar to a static site generator. You can create markdown files and templates. Which is quite useful for websites like news journals, blogs, and so on.

But Astro is more than that. It's a tool that allows you to use React, Vue, Svelte, and other frameworks to create those static sites.

If you use React or Vue to generate a list of posts, with Astro the list will be rendered in build time and exported as static HTML. This means that the user will see the list of posts immediately, without needing to wait for the JavaScript to load. This is a huge performance boost.

But what if you want to use React to render a modal or a carousel and keep the rest of the page static. Astro allows you to do that kind of interactivity with Astro Islands:

🏝 Astro Islands

Astro Islands is a feature that allows you to insert dynamic content (content that uses JavaScript) into a static page. In order to achieve that interactivity in the frontend, Astro will insert JavaScript but only for the dynamic content. The rest of the page will be static. Garantying speed with a reduced bundle size.

Astro Islands accepts any library that can be used in the browser!

This approach also allows using many ways of loading JavaScript with Client Directives.

⚡️ Client Directives

By default if you insert a React or Vue component in a page, Astro will render it in build time and export it as static HTML. But you can use Client Directives to change this behavior.

Load

This will load the component with their JavaScript bundle associated as soon as the page loads. This is useful for components that need to be rendered immediately in your page.

<MyReactComponent client:load />

IDLE

This will load the component with their JavaScript bundle associated when the browser finishes loading the page and the requestIdleCallback event is triggered. This is useful for components that don’t need to be rendered immediately in your page, but need to be present at the beginning of the user interaction.

<Button client:load />

Visible

This will load the component with when the component is visible in the viewport. That means when the users sees the component in the screen.

<MyImage client:visible />

Media

Loading the component after matching a media query. This is useful for components that need to be rendered only in specific devices or screen sizes. You need to specify the media query in the directive.

<SidebarMobile client:media="(max-width: 1024px)" />

Only

In this case, the component will not render in build time. It will only be rendered in the browser. So you need to tu specity the library or framework in the directive.

<SomeReactComponent client:only="react" />
<SomePreactComponent client:only="preact" />
<SomeSvelteComponent client:only="svelte" />
<SomeVueComponent client:only="vue" />
<SomeSolidComponent client:only="solid-js" />

👩‍💻 Developer Experience in Astro

Integrating Astro with React, Vue, Svelte, and other frameworks is very easy. You don't even need to change your code manually beacuse the Astro CLI will do it for you.

While in this article, I will not build a whole website with Astro, this is how you start:

# Install the Astro CLI and create a new project

npm create astro@latest

It will ask you a few questions like the name of the project, if you want to use a template, if you want to use TypeScript, if you want to initialize a git repository, and so on:

Adding React or any framework it’s as easy as type

astro add <library/framework>

It will install the dependencies, and if you want it will modify the Astro configuration file to accept React components.

Conclusion

If you want to build a website with many interactive elements, that uses JavaScript in many places. You probably should not use Astro. Since it will force you to activate the Astro Islands in many components, using another approach would be fine.

But if you want to build a website like a landing page or a personal website. Something that has zero or little interactivity with JavaScript on it, try Astro.

The developer experience is awesome. I think you will love it.