Astro has rapidly gained popularity among JavaScript developers for its unique and refreshing approach to building web applications. Unlike traditional front-end frameworks that lean heavily on client-side rendering, Astro shifts much of the work back to the server, allowing developers to create fast, content-focused websites with minimal JavaScript. But getting started with Astro can be a bit disorienting at first—especially if you’re coming from a SPA-centric world like React or Vue—because Astro doesn’t always follow the familiar patterns.
This article takes a practical approach to understanding Astro by walking through the development of a simple to-do list app. The aim is to provide a clear overview of how Astro handles core web development concepts such as routing, endpoints, and deployment workflows. If you’re completely new to Astro, you may want to check out my earlier article on plug-and-play development with the framework, which introduces the philosophy behind Astro’s design.
To-do applications are a great sandbox for testing the capabilities of a new framework. Despite their simplicity, they let you touch on all the fundamental concepts—from rendering lists and managing user input to handling basic CRUD operations. Once you have that foundation in place, adding advanced features like drag-and-drop task reordering, infinite scrolling, or even RSS feed generation becomes much easier. More importantly, building this kind of application with Astro gives you insight into how it handles state, interactivity, and rendering across different layers of the stack.
One of the more intriguing aspects of building with Astro is the flexibility it offers in terms of application architecture. You’re not locked into a pure SPA (single-page application) or MPA (multi-page application) model. Instead, Astro makes it possible to create hybrid apps that combine the best aspects of both. Its “islands architecture” enables developers to treat parts of the page as interactive components (islands) that hydrate on demand, while the rest of the content remains static and server-rendered. In the case of our to-do app, we might render the overall layout statically for performance and SEO benefits, while using a reactive library like React or Svelte to power the dynamic list. Alternatively, we could choose a lighter option like HTMX or plain JavaScript to deliver interactivity without the overhead of a full front-end framework.
Astro’s real power lies in this flexibility. Whether you’re aiming for the SEO-friendliness of MPAs or the snappy UX of SPAs, Astro makes it easier to strike a balance between performance, complexity, and developer experience. By giving you the tools to selectively hydrate components and embrace multiple front-end libraries within the same project, Astro encourages a modular, scalable approach to building web apps that truly puts you in control.