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 accepts any library that can be used in the browser!
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" />
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.