Astro Framework

#javascript #anotherframework

Oh no not another JavaScript Framework say it’s not so.

It seems like every other day someone will come up with a brand new framework for JS claiming it is the new hot thing, making one of the most difficult things for a Front-End developer to do. figure out which of the 1,000,000+ and counting frameworks is best to use, and when you jump into one of them there tends to be great difficulty in using another, and that’s where Astro comes in.
Astro is a newer framework built in 2021, that works kind of similar to a static site generator that builds its sites using a mark-down language(similar to Hugo). With the code itself looking and feeling very similar to other frontend frameworks having your <> and { } respectfully, but what makes it unique is its ability for you to import your favorite(as a component) frontend frameworks like React, Svelt, Angular, and Vue into it and Astro will render the UI on the server but it will actually ship no JS to the browser itself. Making the render times extremely quick.
But how does a component work without its JavaScript running along with it. The answer is it doesn’t Astro actually uses static HTML by defaulft (making it a superset of HTML), but if you do need interactivity with JS you can by opting into JS as needed to add islands of interactivity to the page, and that’s a way to look at how Astro works

Think of your components as islands on a page each island has its own set of components that you can put in your React, Angular, JS to put in how you want the page to interact with the user. In example you could have a component called header that has a button inside it, you want that button to be interactive but don’t need the rest of your header to be so you can create a header component file with the name Header.astro then a button component button.jsx allowing you to style and do whatever your heart desires with React inside that button component while still keeping the speed of Astro’s use of Static HTML, But there can also be an island that uses only static HTML with no JS and doesn’t need any interactivity to render such as text, images, sidebars, etc, and because of this the app will render and run at a much greater speed. And use less memory, as JS is the bottleneck for web app speed and functionality.

You can also decide when you want to load a certain component(this is called partial hydration)
will load the content asap like it would normally.
will load your component after the page is loaded and becomes idle like an ad that doesn’t need to render immediately, and can wait.
will only render the component onto the page when it becomes visible on the users view port(screen) like when you scrolling the looking at images it wont load until it needs to saving memory.(now there are ways to do this with JS but this is much easier, cleaner, as well as faster)
The main limitation with Astro at the moment is it’s inability outside the box to do client side routing. Making it different than something like NEXT.js(a framework that many React users will come to know) that has full hydration(where the client side router takes over after the page load). With Astro being a partial Hydration you get a entire new page with each navigation(meaning the JS will reboot with each new page load) while this makes Astro according to them 94% faster than NEXT it also makes it extremely difficult to manage an authentication State(like a user login) between routes as well as any data from a Data Base that may render in realtime. However there is a project that is being worked on called Astro SPA that looks to fix this issue, and if this can get to a stable state. We maybe looking at the ultimate framework as it will cover all of the major uses for a framework.
Does your site need to be Highly interactive if the answer is yes then Astro is good. How about Search Engine Optimization(seo) than Astro would be the answer again. How about dynamic that would be another yes for Astro. So with the future of Astro looking bright It could mean that when you need to decide on which framework is best for which situation. Then the answer will most likely be Astro, meaning less time figuring out your tech stack and more time actually working on your project.