JavaScript Frameworks are slowing down the Web. Here's the solution: ASTRO
by Hrishikesh Nikam
All of us hate slow-loading websites, don't we?
But as developers all over the world do, we love making web Apps with heavy JavaScript Frameworks, like REACT, ANGULAR, VUE, SWELTE, etc.
This is where the problem lies. The equation is actually simple.
The larger is the size of the JavaScript bundle, the slower the website will be. Fast loading Websites require more and more HTML.
This is one of the more popular issues nowadays with BaaS (Backend as a Service) systems like Google's Firebase is that they have a very Heavy JavaScript Bundle.
This makes the website slow and hence the user experience is abysmal. But does that mean we have to write more HTML and we can't really use our Favorite JavaScript Frameworks?
No, there is a way of using one or even multiple JavaScript frameworks and still making sure they are rendered as HTML.
ASTRO
ASTRO is an open-source tool that can build static HTML websites using popular frontend JavaScript frameworks (React, Vue, Svelte) while loading fully interactive components as needed.
The documentation defines it as:
Astro is a fresh but familiar approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. Use your favorite JavaScript framework and automatically ship the bare minimum amount of JavaScript—by default.
Now all of this sounds like a static site generator right? maybe something like HUGO or JEKYLL.
So what's so special about Astro?
What is unique is that when we need a component that is fully interactive with JavaScript we have multiple strategies at our disposal to render and hydrate the client-side or Frontend.
A component in our UI with the client-load Directive which has high priority will be rendered with JavaScript, like how it normally happens. known as render on PAGE LOAD.
<MyComponent client:load /> But for the components with low priority, we can wait till the browser is idle and then render it, known as render on IDLE. This happens after the main thread is free.
<MyComponent cliet:idle /> Another option is that if the component is further down the page, we can hold off on rendering it till it is visible to the end-user, known as render when visible. This is rendered when seen by the end-user.
<MyComponent client:visible /> Now I know, while using JavaScript Frameworks, we think of a web app as a single page Application, where JavaScript takes over everything, But instead, think of building web apps with ASTRO as a sea and the JavaScript as small islands. The water (sea/ocean) is HTML and the JavaScript are pieces of land that appear when required
The end result is a website that is fast and SEO friendly and has the full functionality/interactivity of a frontend application.
To build your first project in ASTRO, open an empty directory and run :
$ npm init astro Also, the file structure of ASTRO is how the URL structure (Routing Configuration) of your website will be. Have fun developing your own fast-loading website!
If you liked the ASTRO framework, check out the relevant links for the ASTRO Framework:
That's it people, Thank You for reading this blog.
If you like this blog share it on your socials. If you want to reach out to me, have a conversation, or tweet about how great this blog was then you can do so using Social Media.
Here's my relevant Social Media
Beautifully explained! Thank you for this.
Very well explained! Thank you.