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.
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 accepts any library that can be used in the browser!
⚡️ 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.
<MyReactComponent client:load />
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 />
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 />
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)" />
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.
The developer experience is awesome. I think you will love it.
Top comments (7)
Looks like a really cool tool indeed! I like how easy it looks to integrate with other frameworks 👌 Great read, Marcelo!👏
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.
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?
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.
This looks quite interesting.
Good article, I enjoyed reading it! If you're interested, feel free to check out my articles as well