Astro Review

Back to Blog

What is Astro?

Astro is a framework for rapidly developing common web applications. It is pretty powerful for simple web applications, and is a blast to work with. The app initialization process is fun; it really plays on to the idea that you are building something to launch into space. Even the local dev port number 4321 is intended to make you feel like you are blasting off.

Astro Leads The Pack

All fun aside, Astro provides quite a few things that modern web frameworks like NextJS/ NuxtJS, Gatsby (RIP) are lacking. Different full-stack frameworks have their own unique strengths that set them apart from each other. Knowing those strengths (and weaknesses) empowers developers to choose their technology wisely.

It has a very simple, yet flexible routing structure, combining blocking server side calls with a frontend renderer allowing you to quickly get pages off the ground. When we first started playing with it, we jokingly said that it felt like working with a PHP app, but in a good way.

Astro has unique take on leveraging Island Architecture with its component structure. The idea behind Islands Architecture is surprisingly simple: build the main page on the server, and leave little placeholders where the lively, interactive bits go. These spots already contain the basic HTML, so the browser isn’t starting from scratch. When the page loads, those dynamic regions spring to life on the client side (like tiny self-sufficient apps waking up from a nap) using the server-rendered HTML as their starting point.

Edward Rose Solutions

Aside from being very modular and flexible for frontend development, the Astro framework also offers a fairly comprehensive set of options for backend needs. With session support, dynamic routing, middlewares, i18n and easy adapters to plug into many major hosting solutions, Astro can provide a pathway for satisfying many of the needs that web developers have for more advanced application needs.

Example

Here's a quick example of setting up a dynamic Blog Post page

// Start with the triple dash for any server-side processing 
---
// Load your layout, this is where you define your outer shell: <html><body> etc. 
import Layout from "@/layouts/Layout.astro";
// Import your data retrieval function
import {fetchRecipes} from "@/utils/queries"

// We can bring in a React component, if we don't want to use Astro's template style. 
import RecipesList from "@/components/react/RecipesList";

// This special variable tells Astro that this page is able to be regenerated dynamically (instead of at build time)
export const prerender = false;

// let's fetch our recipes
const recipes = await fetchRecipes();

// 404 redirect is able to be handled here 
if (!recipes) {
  return Astro.redirect("/404");
}

// Another triple dash to instruct Astro that we're ready to start with the content
---

<!-- Astro's templates feel similar to simple React components -->

<Layout>
  <div class="max-w-5xl mx-auto mt-8 md:mt-16">
    <div>
      <h1>Recipes</h1>
    </div>
    <!-- Use your react component with the data retrieved from above. So smooth! -->
    <RecipesList data={recipes} />
  </div>
</Layout>

Not for Scaling APIs

Astro has a lot of great things going for it, but if you are building a complex application that has a large volume of traffic, you should be wary of relying too much on the server side processing. This is especially true if your application makes heavy use of external services. Over use of proxying your calls through Astro as a backend are often unnecessary and won't scale as well as a separately managed service. Not to mention bandwidth costs are often higher with hosting providers, when compared to edge services like Akamai, Cloudflare or Amazon's Cloudfront.

Conclusion

Astro is currently leading the pack of web frameworks for its ease of use, general stability between releases, and capacity to easily make use of different frontend component libraries. Despite the great things that the framework provides, technologists should always keep in mind all aspects of the application and choose the right tool(s) for the job.