Use React/Svelte/Vue in the same application and ship 0kb JavaScript by default! 🪐

Astro.js 🪐

A static site builder for the modern web!
To follow along you can clone this repo or check it out now on Codesandbox here

Why do we need yet another JavaScript framework?

Astro.js is a static site builder with some unique features like:

• You can use any frontend framework or even multiple frameworks
• Ships with 0 JavaScript by default
• Multiple ways to load JavaScript for interactivity (ex. when the component is visible)

Preview of astro.js using multiple frameworks!

Let us start building the app

We have 3 important folders:

• Components for the different JavaScript components
• Pages for Astro pages which combines the components
• Styles for some basic CSS styles

Now we implement each component:

• React component
• Vue component
• Svelte component

And here is the fun part, The actual Astro page 🪐

As you can see between the "---" we can import all of our components and CSS, Any code here will run only on the server and will not be sent to the client.

So we imported all of our components and placed them inside the HTML, Now we are all set! Let us see what happened.

Oops, it's not interactive

Astro rendered all the components correctly but they are not interactive, Why?

Astro hydration strategies!

Astro ships zero JavaScript by default thus making the components static. If we want to make components interactive we must "Hydrate" them, Which basically means loading the necessary JavaScript to make it interactive.

We have multiple ways to do this:

• Hydrate the component on page load (client:load)
• Hydrate the component when visible (cllient:visible)
• Hydrate the component when matched to a specific media query (client:media={QUERY}) You can pass these as props to the actual components.

We will use client:visible for this simple example

We pass client:visible to all components

Yes! now we have 3 different components from 3 different frameworks all on the same page and interactive 🪐💙

As you can see we now have 3 different components with different frameworks all on the same page! How cool is that!

Benefits of Astro 🪐

• Multiple frameworks
• 100% Static HTML, No JS
• On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page.

A perfect use case for Astro is a mostly astatic website like a blog that has little interactivity and the need for performance.

Thank you for reading 🪐💙

Thank you everyone for reading this 💙
If you like this content consider following me on Twitter for more 💙

Happy coding!

Twitter: https://twitter.com/joetifa_dev
Website: http://youssefahmed.vercel.app/
GitHub: https://github.com/joetifa2003