Keep in mind that this was a lightning talk between 4 and 10 minutes long.
☝️ Elian at the conference!
Thanks for taking an interest in the slides!
So, Elian is a software engineer at vBridge in Belgium 🇧🇪.
Elian is also an Ambassador for Astro.
So what is Astro?
Astro is a lightning fast framework!
Even better, it’s a blazing fast framework!
Or even a primeagen fast framework!
Or just simply Astronomically fast!!!
So; Why was Elian talking about a different Framework than React at React Brussels?
It's because Astro loves React!
Astro is based on an island component design architecture, what does this mean?
Well, Astro doesn’t only love React, it’s a bring your own framework to the party kinda framework!
One of the amazing things about Astro, is that it can be experienced right now in your browser by heading to astro.new & trying it out! Right there in your browser!
You’ll see that it offers templates for all of your favourite frameworks; including React, Preact, Vue, svelte and so on.
Astro also has a lot of official and community driven integrations. All of them are documented and collected on the Astro website!
The React integration is right there on the Astro integrations & Frameworks tab!
Let’s take a look at using React in Astro in a short demo:
So let’s pop in our terminal here and setup a new Astro project by using our favourite node package manager:
yarn create astro is used
Astro will ask us what kind of project we’d like, In the demo, we choose an empty one, since Elian wanted to show of how easy this is.
Astro supports TypeScript, so it will ask us if we want to use that for our project.
That’s how easy it is to set up a new project with astro
Let’s take a closer look at writing and using a React Component in Astro
Let’s add a very simple React counter component that you’ve all probably used before. A basic number and two buttons, one decreasing the value and one increasing the value.
Let’s add some HTML in our
Let’s add some basic styling in the frontmatter of our Astro page, and import our newly created
<Counter /> component in there and add it on the page.
If we now build the Astro project and preview it, you'll see the imported React Counter component on the page.
Okay, so a lot of this probably feels very familiar for everyone that has used React before, so what’s the difference?
But what if we need to make a component interactive?
That is where partial hydration comes in!
So, probably you are thinking "what the fuck is partial hydration?"
Well, here is the perfect analogy to understand it;
If you don’t water / hydrate a plant enough. The plant will feel very sad
If you hydrate too much; the plant will drown. This is the same for web applications. The application will be drowned in technical debt, bundle size and complexity!
Let’s take a deeper look into this:
Astro makes this possible by using the
There are a couple of options for hydration, let’s take a look at them!
Firstly there's the
client:load directive which will just start hydrating the component as soon as the initial DOM content is loaded.
You could also opt for the
Now let's also take a look at how to use this in our code and what the effect is on our result.
There is also
Another option is the
client:media directive which just starts hydrating the component as soon as the given media query requirements are met.
So let’s hydrate our component here using
client:visible and see what that means for our end result.
Of course, Astro is a lot more than just deciding if we should hydrate a component or not!
Astro also supports:
- Server Side generation
- Server Side Rendering
- File-based routing
- Markdown components
- MDX components / pages
- Deploying to the edge (using tools like Vercel edge functions)
But also there are native integrations with popular packages, like Tailwind and Partytown
So, not only is Astro an amazing framework, it's also driven by a beautiful community, so come chat with us on discord!
Here are some more links that can guide you on your journey in Astro!
Huge thanks you to Aymen & Omar for organising this conference & asking Elian! 🙏
Post written by Elian Van Cutsem