Try Out Astro For Your Next Content-rich Website
Building websites with modern frontend frameworks is great fun. These frameworks let us do many powerful things, enabling us to create almost everything we want or need. Because of this, we also tend to use them when they are not ideal. These tools are suitable for building complex web applications with loads of interaction, but you don’t need all this fancy interaction for content-rich sites. You need things like load speed and SEO. In this blog post, you’ll read about a framework called Astro and why it could help you build your next content-rich website.
The trouble with single-page applications
One of the main problems with frontend frameworks is that they mainly ship JavaScript to the client. This gets turned into a complete website only on the client’s computer. This means web crawlers only see an import to your JS file and nothing else on the page. This is killing your SEO and, therefore, your ranking on search engines like Google. The good news is that we can do something about this. We can use another framework for server-side rendering (SSR). This ensures the page is more straightforward to index and ranks better on search engines. However, it still sends a lot of JS to the client to load the framework, hydrate the whole page and use the interactions on the page. This usually makes the page slower for the user to load. This can, in turn, be minimised by techniques like lazy loading.
All these steps add complexity. This isn’t a problem when building a web application that needs complexity to function properly, but we can avoid all this for sites that primarily show content to the user.
Solving it with Astro
And that’s where Astro comes in. Astro is a framework for content-driven websites, which many sites are. It shines by being able to add complexity only where you need it. It is a static site generator (SSG) with support for SSR. This means Astro renders everything server-side and sends only the HTML and styles to the browser. It doesn’t ship any JavaScript unless you tell it to because many pages don’t need it.
To do this, Astro takes a `.astro` file and turns it into static HTML. Astro sends only what is needed to the client, which results in very fast page loads for the user. These `.astro` files can be pages or components with properties, just like any other framework.
example-page.astro
---
import Paragraph from "../components/Paragraph.astro";
const paragraphContent = "...";
---
<html lang="en">
<head>
<title>Astro Page Example</title>
</head>
<body>
<h1>Astro Page Example</h1>
<Paragraph content={paragraphContent} />
</body>
</html>
Adding interactivity
If we need to interact with the page, we can tell Astro what JS it needs to send to make it happen. Vanilla JS can be used for many simple interactions. Astro processes and bundles all the script you add to a component. It supports TypeScript, and you can even import NPM packages. This is true for both server-side and client-side code. Astro will handle the import and processing of the package for you before bundling it on the page.
example-component-with-script.astro
---
console.log("This is server-side code. Find me in the server console.");
---
<h1>Example page</h1>
<script>
console.log("This is client-side code. Find me in the browser console.");
</script>
Framework support
If you need some complex user interaction or other components on your site, you leverage Astro’s island architecture. You can use the framework you like best to create a component with this complex interaction and (lazy) load it on a part of the page. You can tell Astro if this component needs client-side code to make it work by setting the strategy for this individual component to SSG or SSR.
framework-support-example.astro
---
import ReactComponent from "../components/ReactComponent.tsx";
import SvelteComponent from "../components/SvelteComponent.svelte";
import InteractiveVueComponent from "../components/InteractiveReactComponent.vue";
---
<ReactComponent />
<SvelteComponent />
<InteractiveVueComponent client:load />
Routing
Astro uses a file-based routing system to create and navigate the site. This can be from static files, but it also supports dynamic routes and even routes generated from an endpoint, both with static files and from API data, but this is beyond the scope of this article.
Conclusion
This is just a tiny insight into the many things possible with Astro. It’s a framework that offers many tools for creating sites that rely primarily on content in a much easier way. So, next time you build a content-rich site, try Astro.
Want to know more about what we do?
We are your dedicated partner. Reach out to us.