Astro: Build Fast, Content-Rich Websites with Ease

We all know how the web has transformed over time. Remember the days of static websites? Then came the era of server-generated sites using tools like Perl and PHP, paving the way for powerful frameworks like Laravel, Django, and Rails. These tools added a whole new level of complexity and possibilities to the web.

Mobile devices changed the game. They made us rethink how we use the web. Websites started feeling like apps, thanks to special frameworks like React and AngularJS. These made web pages work smoothly without having to reload.

However, these fancy web apps had a downside.

They took longer to load because of lots of extra code, especially JavaScript. Also, making them show up well on search engines was tough.

Now comes Astro, a new approach that brings us back to the basics while still embracing the best of what we’ve learned. Astro is an all-in-one web framework for building fast, content-focused websites that helps web developers create cool websites using popular tools like React, Preact, Vue, and Svelte. Astro websites are made up of different pieces that work together.

The special thing about Astro is how it helps pages load super fast. It trims away unnecessary stuff, like extra JavaScript, and gets pages ready ahead of time. If a part of the page needs to do something interactive, Astro adds just the right amount of code to make it work.

Why Astro?

Content-Focused

Astro was designed for building content-rich websites. This includes most marketing sites, publishing sites, documentation sites, blogs, portfolios, and some ecommerce sites. This is one of the most important differences to understand about Astro. Astro’s unique focus on content lets Astro make tradeoffs and deliver unmatched performance features that wouldn’t make sense for more application-focused web frameworks to implement.

Astro’s MPA Approach

Astro is an MPA framework. However, Astro is also unique from other MPA frameworks. Its main difference is that it uses JavaScript as its server language and runtime. In Astro, you’re always just writing JavaScript, HTML and CSS. That way, you can render your UI components (like React and Svelte) on both the server and the client.

Server First Approach

Astro leverages server-side rendering over client-side rendering as much as possible. This is the same approach that traditional server-side frameworks like PHP, WordPress, Laravel, Ruby on Rails, etc.

This approach stands in contrast to other modern JavaScript web frameworks like Next.js, SvelteKit, Nuxt, Remix, and others. These frameworks require client-side rendering of your entire website and include server-side rendering mainly to address performance concerns.

The SPA model has its benefits. However, these come at the expense of additional complexity and performance tradeoffs. These tradeoffs harm page performance including critical metrics like Time to Interactive (TTI) which doesn’t make much sense for content-focused websites where first-load performance is essential.

Zero JS, by default

No JavaScript runtime overhead to slow you down. In many web frameworks, it is easy to build a website that looks great during development only to load painfully slow once deployed. JavaScript is often the culprit since users’ phones and lower-powered devices rarely match the speed of a developer’s laptop. Astro’s magic is in how it combines the two values explained above (a content focus with a server-first MPA architecture) to make tradeoffs and deliver features that other frameworks cannot. The result is amazing web performance for every website, out-of-the-box

Component Islands

One of the cool features of Astro is its Component Islands(aka Astro Islands). The term “Astro Island” refers to an interactive UI component on a static page of HTML. Multiple islands can exist on a page, and an island is always rendered in isolation. Think of them as islands in a sea of static, non-interactive HTML. In Astro, you can use any supported UI framework (React, Svelte, Vue, etc.) to render islands in the browser. You can mix and match different frameworks on the same page, or just pick your favorite.

The technique that this architectural pattern builds on is known as partial or selective hydration. Astro leverages this technique behind the scenes, powering your islands automatically.

Client Directives

These directives control how UI Framework components are hydrated on the page. By default, a UI Framework component is not hydrated in the client. If no client:* directive is provided, its HTML is rendered onto the page without JavaScript. A client directive can only be used on a UI framework component that is directly imported into a .astro component.

There are five levels of hydration with different priorities :

• client:load hydrates the component as soon as possible.
• client:idle hydrates the component when the page is done loading. Useful for low-priority components that don’t need immediate interactivity.
• client:visible={string} hydrates the component as soon as it appears in the viewport.
• client:media={string} takes a CSS query as an argument and loads the component as soon as it’s fulfilled.
• client:only skips HTML rendering entirely and renders the component in-browser.

In a world where speed and making things easy for users matter a lot, Astro stands out as a cool new way to build websites. It’s like a mix of old and new that’s making the web even better. Join in and see how Astro is changing the web development game!

Stay tuned for the next week’s newsletter! Because we’re gonna be comparing the web frameworks and will make it much more interesting for you.