Finding a good reason to try out new technologies is a process whose complexity grows over time - especially when you work in tech. I found the one I needed for Astro after the first perf.now()@2023 talk by Mark Zeman. I scheduled the rewrite of my personal site, and what you are reading is the first content that I have made public.

Developing this site from scratch took me less than four hours. Following the carefully designed official blog, collections and transitions tutorial, and documentation to integrate with Tailwind and Preact was a delight.

Familiar Astro syntax

While Astro can be integrated with React, Preact, Svelte, Vue and others, it also ships with an in-house component system. This might seem discouraging as it may be seen as something new to learn on top of the already large amount of concepts a developer will need to know to efficiently begin working with Astro. However, this templating system was designed to take the best from each UI Library / App framework out there. Writing components with Astro can be as simple as:

---
const { data } = Astro.props;
---

<p>{data}</p>

The same component written in React takes 175% more lines of code to write, and in Vue or Angular 200%.

import React from "react";

const MyComponent = ({ data }) => {
  return <p>{data}</p>;
};

export default MyComponent;

<template>
  <p>{{ data }}</p>
</template>

<script>
export default {
  props: ['data']
};
</script>

// Assuming you are using Angular version 2+
import { Component, Input } from "@angular/core";

@Component({
  selector: "app-my-component",
  template: "<p>{{ data }}</p>",
})
export class MyComponent {
  @Input() data: string;
}

Most things you would usually do with, for example, React hooks must be done in Astro using Vanilla Javascript, and this could become a burden when a page is highly interactive. However, for a vast amount of use cases that are nowadays being developed in JS Hungry frameworks by default, Astro can be a fantastic option. For those app-like pages, have a look at the next section.

Interactive islands

When Astro templates are not an option, say:

• Highly interactive components
• Integrating previously built components
• Reusing npm non-framework/library agnostic

Islands come to the rescue. With islands, its possible to render a React, Vue and Svelte component in the same page, using their native APIs under the hood. This is achieved by adding Astro integrations.

Going back to our very simple Astro component:

---
const { data } = Astro.props;
---

<p>{data}</p>

We could integrate a React component on it, such as:

import type { Data } from './types';
import { useMemo, useEffect } from 'react';

const ReactComponent({ data }: { data: Data }) => {
  const parsedData = useMemo(() => npmParser(data), []);

  useEffect(() => console.log("react mounts"), []);

  return <>{parsedData}</>;
}
export default ReactComponent;

Resulting in:

---
import ReactComponent from './ReactComponent';

const { data } = Astro.props;
---

<p>{data}</p>
<ReactComponent data={data} />

Cool as a raccoon

Headless

If you are coming from a React-like framework where everything depends on a root element under which the whole application is rendered, keep in mind that the Astro model is radically different. Things like MUI ThemeProvider, Redux, and other utilities that you would typically see nested at the top of an application cannot be integrated at the top level of an Astro application because the concept of root in Astro is vastly different.

You could create a React island and have it load as many providers as you want. But if, for example, you use Redux for that island, its state cannot be shared with other islands of the application via Redux - for this use case, the Astro team recommends Nano Stores. For MUI, as of today, you would need to forget about it and instead go with headless CSS libraries such as Tailwind, Bootstrap, etc.

Workbench

I’m still determining its usability in highly interactive applications such as a dashboard, table or data chart intensive pages, and will provide future updates if I have a chance to spike on it at work. For now, Astro will become my workbench platform - a sort of toolbox where experimenting with new technologies will be (finally!) easier.