Table of Contents
Over the past few years, many new frontend frameworks have been released, offering developers a wide range of options to choose the one that best fits their projects. In this article, we will analyze Astro, an open-source project released with an MIT license. The first version, v1.0, was released in August 2022 as a web framework tailored for high-speed and content-focused websites.
One year later, in August 2023, they released Astro 3.0 with a lot of new features like view transitions, faster-rendering performance, SSR enhancements for serverless, and optimized build output, which we will cover later in the article. On October 12, 2023, they announced Astro 3.3 with exciting updates, such as the <Picture/> component for image handling.
Astro.js is a multi-page application website framework. It indicates that Astro renders web pages on the server, which explains why it is so fast: while you navigate between pages, you will continually get those pages. Although Astro can also lazy load client-side JavaScript if our web pages require interactivity, I’ll go into more detail about this in the upcoming chapter.
Astro Features
Island Architecture
Island Architecture, pioneered by Etsy’s frontend Architect Katie Sylor-Miller, is a revolutionary concept in web development. It involves the separation of a website’s static elements, such as images and text, which can be server-rendered and delivered without JavaScript, from the interactive components that require JavaScript for interactivity. By prioritizing these interactive elements, a web page can load its important features first, enhancing the user experience.
Astro fully embraces this Island architecture and it divides the user interface (UI) into smaller, isolated components known as “Astro Islands.” What sets Astro apart from other frameworks is its utilization of partial hydration, offering compatibility with a variety of UI libraries, including React, Svelte, Vue, and more. Users have the flexibility to mix and match these libraries to render islands in the browser through partial hydration.
Astro optimizes your website’s performance by shipping code without JavaScript. For instance, even if you create a highly interactive React component, Astro will deliver only HTML and CSS, reserving interactivity until it’s activated. This is where partial hydration plays a vital role in enhancing web interactivity.
Hydration, in this context, means adding JavaScript to HTML code to make it interactive. Partial hydration selectively loads individual components as needed, keeping the rest of the page as static HTML. The Island architecture encourages the creation of small, modular interactivity components.
One of Astro’s standout features is the precise control it offers over when to introduce interactivity :
<MyComponent client:load /> – loads JavaScript simultaneously with HTML
<MyComponent client:idle /> – loads JavaScript when the browser has no other tasks to do
<MyComponent client: visible /> – loads JavaScript only when visible to the user
<MyComponent client:media /> – loads JavaScript only for specific screen width
<MyComponent client:only /> – only client-side rendering
For example, high-priority islands may include elements like buttons, tags, and navigation for immediate user interaction. Medium-priority islands could be features like a light/dark mode switch. By segregating the UI into static and interactive elements, Astro ensures a swift and efficient user experience by loading interactive components only when necessary.
The Island architecture approach not only speeds up performance but significantly benefits SEO rankings on search engines. It enhances user experiences, minimizes boilerplate code, and provides robust support for various CSS libraries and frameworks.
Framework-agnostic
Astro allows us to construct our website using our preferred framework; React, Vue, Svelte, SolidJS, Preact, Alpine, Lit, Web components, etc, and it’s not limited to just one – we can work with multiple frameworks simultaneously. We can have React and Vue components coexisting in the same codebase. If one day we would like to emigrate from React to Vue or vice versa, we can do that gradually.
If we don’t have dynamic parts in our project, we can build our web only with Astro, providing a lightweight and efficient solution.
View Transitions API
Chrome and Astro have joined forces to introduce the View Transitions API, a revolutionary tool for web developers. With the help of this API, creating smooth state transitions will become easier. Previously, this was a difficult operation that involved handling scroll position variations and CSS animations. This method was rapidly adopted by the Astro framework, allowing it to deliver the magic of page transitions without the typical complexity and performance limitations. View Transitions are now supported in Astro 3.0, enabling the use of shared elements between routes and providing access to additional capabilities like custom animations.
Understanding the Project Structure and Rendering Flexibility
In Astro, the project structure includes essential elements, including components, layouts, pages, and styles. Let’s dive into each of these components:
Components: Reusable chunks of code that can be integrated throughout your website. By default, these components carry the .astro file extension. However, the flexibility of Astro allows you to incorporate non-Astro components crafted with popular libraries such as Vue, React, Preact, or Svelte.
Layouts: Reusable components, but they serve as wrappers for your code, providing structure and organization to your web pages.
Pages: Specialized components which hold responsibility for routing, data loading, and templating. The framework employs file-based routing to generate web pages. Moreover, you can also use dynamic routing for more customized URL paths.
Every file you create in this folder returns to a URL. For example, a file called about would give us availability for /about URLs.
Styles: The “styles” folder serves as the repository for your website’s styles. Astro seamlessly accommodates various styling options, including Sass, Scoped CSS, CSS Modules, and Tailwind CSS.
Beyond these structural components, Astro offers several additional capabilities. It provides a global object called “Astro,” granting access to valuable properties like props, cookies, params, redirection, and more. One notable feature is the absence of boilerplate code. When defining a component, you are relieved of the need to write out the export function.
In the code snippet below, you can observe the inclusion of JavaScript code enclosed between three dashes, further followed by HTML code.
---
import GreetingHeadline from './GreetingHeadline.astro';
const name = "Astro";
---
<h1>Greeting Card</h1>
<GreetingHeadline greeting="Hi" name={name} />
<p>I hope you have a wonderful day!</p>
By default, Astro runs as a static site generator. This means that all the content is converted to static HTML pages, a strategy known for its optimization of website speed. However, it’s worth noting that web development can occasionally demand a more dynamic approach.
Even Astro started as a static site generator, now it facilitates both static site generation (SSG) and server-side rendering (SSR) based on your specific project requirements. And you can pick which pages will use which approach.
We can add the following code to astro.config.mjs if most or all of your site should be server-rendered:
import { defineConfig } from 'astro/config';
import nodejs from '@astrojs/node';
export default defineConfig({
output: 'server',
adapter: nodejs(),
});
Or instead of ‘server’ if we write ‘hybrid’ it will be pre-rendered to HTML by default. We should use the hybrid one when most of our pages are static.
Conclusion
Astro is an innovative and adaptable option in the rapidly evolving front-end framework world. With its unique approach to “Island Architecture” and the ability to embrace multiple UI libraries, Astro offers developers to work with their preferred tools and even combine them, giving rise to a seamless user experience.
Furthermore, another compelling reason to make the switch to Astro is your content-rich static sites will be significantly faster using Astro since less JavaScript is served. For example, Astro sites can load 40% faster with 90% less JavaScript compared to Next.js. Because it only hydrates what’s needed and leaves the rest as static HTML. This selective hydration, paired with Astro’s island architecture for interactive components, means you can build lightning-fast websites. The increase in performance will result in improved SEO and user experience for your Astro site. Whether you’re prioritizing performance, SEO, or transitioning between frameworks, Astro stands as a remarkable framework of choice for high-speed, content-focused websites.
