What is Astro?

Astro is a cutting-edge front-end framework designed for building fast and efficient websites focusing on content-driven experiences. It’s known for its innovative approach to reduce JavaScript overhead and complexity. This makes Astro an excellent choice for sites that prioritize performance and SEO. Astro allows developers to create static sites using their favorite frameworks like React, Svelte, Vue, Preact, and Solid while shipping as little JavaScript as possible to the client.

What makes Astro stand out?

Here is a list of features that make Astro stand out:

• Islands architecture: Astro introduces a unique frontend architecture called “Islands,” which allows developers to only load interactive components where needed, keeping the rest of the page static. This results in faster page loads and improved performance.

• Content-first approach: Astro is optimized for content-rich websites like blogs, marketing sites, e-commerce platforms, and more. Astro ensures that content is delivered quickly to the reader, enhancing the user experience.

• Zero JavaScript by default: Astro ships with zero JavaScript by default, meaning it doesn’t send any client-side JavaScript unless explicitly added by the developer. This leads to lighter pages and faster load times.

• Support for multiple UI frameworks: Astro is compatible with many UI frameworks, and we can even use more than one in a single Astro application. This flexibility allows us to leverage the strengths of different frameworks as needed.

• Built-in support for TypeScript: Astro has built-in support for TypeScript, allowing us to import .ts or .tsx files directly into our Astro project.

Note: It is mandatory that you are running Node - v18.14.1 or higher, as Astro is not compatible with earlier versions of Node.

Routing in Astro

In Astro, routing works through a file-based system, which means that the structure of the project’s src/pages/ directory directly translates into the routes for the website. Each .astro, .md, or .mdx file within the src/pages/ directory automatically becomes a page on the website. The route for each page corresponds to its path and file name within the src/pages/ directory. Astro’s routing system is designed to be intuitive and straightforward, leveraging the file system for route creation and management. 

Navigating Between Pages

Astro uses standard HTML <a> elements for navigation between routes. There is no framework-specific <Link> component provided. We simply link to other pages using regular anchor tags.

Basic Astro application

In the widget below, we have code to run a basic Astro application:

Here’s how the rendering process works in Astro:

• When a user visits a page, Astro server-side renders the page’s .astro file.

• The .astro file imports any necessary components, such as the Layout component.

• The page’s content is defined within the .astro file, and the Layout component is used to wrap this content.

• The Layout component includes a <slot /> where the content of the .astro file is injected.

• The final HTML is generated and sent to the user’s browser, where it is displayed as a fully styled page.

Conclusion

Astro supports a component-based architecture, allowing us to create reusable components such as Layout that can be easily imported into our pages. This makes it easier for us to manage and update the site’s design and layout. The use of components also promotes a separation of concerns, where each file has a specific role and purpose within the overall structure of the application.