DEV Community

Cover image for Build your next website with Astro
Marcelo Arias
Marcelo Arias

Posted on • Originally published at codebase.substack.com

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 Website

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 Island diagram

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 />
Enter fullscreen mode Exit fullscreen mode

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 />
Enter fullscreen mode Exit fullscreen mode

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 />
Enter fullscreen mode Exit fullscreen mode

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)" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

👩‍💻 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
Enter fullscreen mode Exit fullscreen mode

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:

Installing Astro CLI and creating a website

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

astro add <library/framework>
Enter fullscreen mode Exit fullscreen mode

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

Set up Astro website with React

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.

Top comments (7)

Collapse
 
bcostaaa01 profile image
Bruno

Looks like a really cool tool indeed! I like how easy it looks to integrate with other frameworks 👌 Great read, Marcelo!👏

Collapse
 
360macky profile image
Marcelo Arias

Thanks Bruno!

Collapse
 
sureisfun profile image
Barry Melton

If you want to build a website with many interactive elements, that uses JavaScript in many places. You probably should not use Astro.

Thank you for this warning. That was kind of my gut hunch, and whenever I have squirrely question marks about a new project, it tends to delay my adoption of it.

I've been paring down the amount of unnecessary interactivity for the past few years, but it is occasionally nice to add microinteractions, and it requires just slightly more care in a Next site than pure React, but just enough that I tend to leave them out on prototypes, which are generally speed runs.

Great to have this caveat beforehand.

Collapse
 
starkraving profile image
Mike Ritchie

I have a vision of using React in my dev environment for reusable components, and layouts, but then render everything out to static HTML pages at build time, no hydration or hint that React was ever used. Could Astro get me there?

Collapse
 
fujima_song_12146583f0963 profile image
Fujima Song

Most communities don't see Astro of any values compare to other solutions that has been on the market for a decade. Warning climate is not a joke.

Collapse
 
gamerseo profile image
Gamerseo

This looks quite interesting.

Collapse
 
arashrah profile image
Arash Rahimi

Good article, I enjoyed reading it! If you're interested, feel free to check out my articles as well