Astro — Build faster websites with less client-side JavaScript
End-users love a fast-loading website, but developers love to build them with big heavy Frame Works. Unfortunately, the key to better performance is to use less JavaScript. Astro is a tool for Building static websites with your favorite JavaScript Frameworks while shipping zero JavaScript to the browser.
Astro allows you to build a site with your favorite framework for even multiple Frame Works at the same time and renders them to static HTML at Build time, that sounds like a static site generator. But what’s unique is that when you have a component that needs to be fully interactive with JavaScript, you have multiple strategies at your disposal to render and hydrated client-side, any component in your UI with a client load directive will be rendered with JavaScript on the initial page load like normal. But if the component is not a high priority, you can wait until the browser is Idle before rendering it. Or if it’s a component that’s further down the page, you can hold off on, rendering it until it’s visible to the actual user with intersection observer instead of thinking of a website as a single page application and where the JavaScript takes over everything, think of it as an archipelago where your water is the static HTML and islands are self-contained components that at interactivity when needed, the end result is a website that is fast and search engine friendly but also has the full interactive power of a front-end framework.
To build your first project open and empty directory and run “npm init astro” inside the project, you’ll find the Pages directory.
The file structure here to find the actual URL structure or routing configuration for your website. Each page is defined as an astro component inside of which you can write static HTML while also, declaring components, that might be written in react, vue or svelte.
At the top of the component, you noted triple dashes (Like below). This is where you could execute JavaScript on the server at build time.
You may want to fetch data from your server or content management system for local markdown files in your source code and as an added bonus, it supports top-level await, making it easier to write clean code.
And finally, you can expect all the essential features found in other static site generator like RSS feeds sitemaps and so on. For more details, you can visit https://astro.build/ OR https://docs.astro.build/
