About a year ago, when I was a fledgling frontend developer, I created a website with React. This website was a single page app built with Vite and React, and it used all the cutting edge bells and whistles but had only one problem: it wasn’t performant. On mobile, the main content took 11.3 seconds to show up; after I rebuilt it in Astro, it took 2.1.
Evaluating this site a year ago, it was simple to see the pitfalls I fell into: a lot of images were uncompressed, and I was shipping way more than necessary to the client. It got me thinking however, though a lot of these mistakes were my fault, wouldn’t it be nice if there was a framework that blocked a lot of these mistakes by default? Something like… Astro?
For those that may not be familiar, Astro is a frontend framework that by default, ships no JavaScript to the client. It’s based on default web technologies i.e HTML and CSS. Because of this, it’s extremely performant. You opt in to complexity, unlike most frameworks where you opt out.
The claim of this article, is that for your static, content driven site, no matter what experience in development you have, you probably don’t need React. I’ll start by walking through a few pitfalls I made in my earlier project and show how Astro, by default, would have prevented this.
Fault 1: The site wasn’t rendered until it received all the JavaScript required for the page to render. In React, the fix is a framework that renders the HTML ahead of time, like Next.js. In Astro however, each component by default is an island. This is a static wrapped server rendered piece of html with zero JavaScript by default. When you need interactivity, you isolate that piece (said island) and you tell Astro when and how to load that island. These islands are framework agnostic, so you can have islands of React, Svelte, Vue, no problem.
Fault 2: Embarrassing mistake upcoming😂, but I was shipping the admin page with the blog editor — and that includes the login, image upload, you get the picture — to the client. So all visitors of the site were receiving a huge amount of JavaScript that wasn’t even being used: one 752 KB bundle, with about 60% of it unused on the homepage. React.lazy could have split the admin out, but I didn’t know to reach for it. If I was using Astro, each page would only ship the JavaScript for its own islands, so the admin code would have stayed on the admin page unless I deliberately made the mistake.
React is an extremely powerful tool, and one of the best we have in our toolbelts as developers — this article is not meant to dunk on it. In fact, the Astro version of the site still uses React islands for things like the slideshow and the blog list. For web apps generally, sites or apps managing complex state, React proves invaluable. This article is mainly meant to point out that for static content sites however, or for developers early on in their career, Astro is well, like a gas lighter — off by default. You light the stove and it’s automatically off even if you forget. React however, is like a naked match flame. Very powerful and versatile, but easier to burn the house down with😂
