How I maximise web app performance with Astro and Preact

Web developers are always looking for tools that can help them build high-performance apps as quickly as possible. To help me build super fast and performant websites quickly, I integrate the fast-by-default Astro framework with the lightweight Preact library. Here I will talk about the benefits I've seen using these tools and how they've enabled me to create high-performance web applications.

OfferZen_How-I-maximise-web-app-performance-with-Astro-and-Preact_inner-article

I am a developer with over two years of experience in frontend development. As someone passionate about JAMstack, I am always looking for ways to build high-performing, scalable, and secure web applications. In most cases, I would do this using only one framework or library, such as Vue.js or React. Recently, I have discovered the potential benefits of leveraging the relatively new Astro framework with the lightweight Preact library.

I first came across Astro and Preact when a colleague suggested using the two together in a project. What came across my mind was, "Why learn new tools while we have popular and well-known frameworks and libraries such as React? What is so special about using these two different tools together?". I decided to try them out for myself, and from my experience, it was definitely worthwhile.

After having experimented with Astro and Preact, I have found a number of benefits that have helped me build high-performance web applications with less time and effort. One application I have built using these tools is a task tracker application to help me manage my tasks. You can find the tutorial here, which will give you an overview of how to integrate Astro and Preact.

Why I build with Astro

According to Astro documentation, Astro is "an all-in-one web framework for building fast, content-focused websites". Here are some of the ways Astro does this and how it's helped me as a developer.

Astro is flexible and easy to learn.

The best thing about Astro is you don't even have to use Astro components to build your app - you can write your entire application using the technologies you are already familiar with. Astro achieves this by allowing us to easily integrate our favourite frontend frameworks and libraries, like Vue.js, React, Preact, Svelte etc., in a single project, making it easy to use and accessible to every web developer. I found it mind-blowing that I could create my Preact components and render them on an Astro page with ease.

Astro is also easy to learn - you do not need to be an expert to build a web application with it. With Astro, everything is just simple HTML, CSS and JavaScript (or TypeScript, if you prefer). This makes it easy for developers already familiar with these popular languages to build with Astro. It also enables me to start small and add complexity to my project when needed, as the next benefits will cover.

Astro's server-first functionality improves performance and SEO.

Astro's server-first functionality refers to its ability to render pages on the server and deliver them to the client as pre-rendered HTML. The server-side rendering approach comes with benefits such as:

Improved performance:

Rendering static HTML files on the server makes websites load faster as it does not need to render on the client side.

Better search engine optimisations (SEO):

The static HTML files contain details such as meta tags and other open graph details. This makes it simple for search engine bots to crawl and index them, increasing the content's discoverability on your website and benefitting your search engine rankings.

Astro allows me to combine static and dynamic rendering in a single project.

Luckily, while Astro generates static HTML that is rendered on the server side, it also allows me the flexibility to integrate Preact for interactive components on my website only when I need it. It does this by providing client directives that let me specifically state which component I would like to hydrate and when. For example, if I want my button component to be interactive as soon as possible, I will add the following directive:

<Button client:load />

This will load and hydrate the component Javascript immediately on page load.

For more information on client directives, you can check out this reference.

With Astro's static files improving performance and Preact's lightweight nature, it makes them the perfect duo to create high-performance websites.

Astro ships less JavaScript.

As an application grows, the size of the JavaScript bundle can increase, which can affect the performance of your application. With Astro, I do not have to worry about this since it ships zero JavaScript by default, and I can partially hydrate only those components that need to be interactive. This happens in isolation while the rest of the site remains in static HTML, which boosts the performance of my application, and the users have a fast and seamless experience.

In Astro, when I add a file to the src/pages/directory, a new route is automatically created for me. I do not need a separate directory for routing which is mostly the case with React and Vue.js. I just need to use standard HTML <a> elements to navigate between my routes.

This saves me time compared to manually handling navigation logic and URL routing. The simplified routing enhances my productivity and makes the development process smoother.

Astro provides Nano Stores.

In an application, different components will need to access common data - typically properties of an application state. Astro recommends a cool feature called Nano Stores, where you can create your stores and easily share state between your Preact components seamlessly. Nano Stores also integrates well with multiple frameworks, including Preact, Vue.js, React.js, Svelte etc.

According to Astro documentation, "Nano stores is lightweight. It ships the bare minimum JS you'll need with no dependencies." This allows me to keep the state management code minimal and have a smaller JavaScript bundle, which results in faster initial page loads and improved performance for my applications.

Why I build with Preact

Preact comes in a small package.

Preact is a library that lets me build interactive UI components for the web. What sets it apart is that it provides the same API as React but in a uniquely small package: just 3kb of JavaScript code. This can lead to improved response times, making it suitable for apps that prioritise performance.

Preact ensures fast build times.

A transpiler is like a language converter for code, helping you translate your code from one programming language into another. When you use React, you need to transpile code into JavaScript using tools like Babel. This can add another step to the development process.

The coolest feature of Preact is that it can be used directly in the browser without any transpilation, which speeds up my development workflow. This makes it a good choice for building high-performant apps and is often used in high-traffic sites like IKEA, Bing, and Etsy.

Preact is easy to learn if you know React.

Since I have previous knowledge of React, I had a smooth transition to Preact. This is because Preact is very compatible with React API and supports the same ECMA Script, making it effective for connecting with an existing React project. To provide complete compatibility, Preact offers a preact/compat package which lets developers leverage Preact and React libraries to create ReactDOM code without altering the workflow or codebase.

Preact and React both use virtual DOM to efficiently update and render components. This allows me to leverage my existing knowledge and skills in React while benefitting from its lightweight nature, leading to better performance.

Why Astro and Preact work great together

As you can see from the benefits above, Astro and Preact complement each other well.

Astro's server-first and fast-by-default functionalities make it great for building websites with great performance and better SEO.
Preact, on the other hand, offers a lightweight alternative to React, reduced package size, and faster build times, making it well-suitable for building high-performance applications.
Astro's flexibility has allowed me to combine the best of both worlds, helping me to create applications that are powerful, performant and fast.

While Astro and Preact may complement each other very well, it's important to keep your project requirements in mind when you're choosing your tools.

Content-rich websites are great opportunities to use Astro and Preact.

The choice to use Astro and Preact in your project all depends on your project requirements. Astro is suitable for building content-rich websites such as:

blogs,
portfolios,
documentation and
some e-commerce websites.

Preact is a great choice if size, performance and initial load performance are key considerations for your project.

To showcase the power of Astro and Preact, I have built a task tracker application using these tools where you can add a task, edit it, mark it as completed and remove it. You can find the final code for this tutorial in this GitHub repository. At the end of this tutorial, you will learn how to integrate Astro and Preact in a project, how to share state between your Preact components, and how to render Preact components in an Astro page.

Rose Akoth is a JAMstack and frontend developer enthusiast, working at Storyblok as a Support Engineer. She enjoys sharing her knowledge and is a lifelong learner. Outside of work, she indulges in travel and nature walks.