Finally, after 2 months of development, my portfolio is ready. And its blazingly fast.

Why I chose Astro (The good parts)

Well duh, Astro is just good at handling markdown, its obvious why I chose it right? But ackshually, I was considering using Next.js with @next/mdx to build it. Next is my go-to framework for web apps and naturally, I also thought of using it to build my blog, but when I actually created a project and tried to setup @next/mdx, it wasn’t intuitive at all to create and serve markdown/mdx files from the local file system. Since Next 13 uses the new /app directory to create routes, and it has file conventions like page.tsx or layout.tsx, I had to define mdx files as page.mdx inside a directory. Now at first, I thought it was pretty convenient because I could also put images colocated inside the directory. But still, I didn’t like the convention for this. Don’t get me wrong, I like the new convention for apps, NOT CONTENT. Then I came across Astro, which was known for building content heavy sites. I gave Astro a try and immediately fell in love with it. Here are the actual reasons I used it.

• Ease of managing content with markdown files.
• The speed of the app. (zero-js by default, which is perfect for this type of project)
• Freedom of choosing any JS framework to add interactivity.
• Nice SEO features.

Ease of managing content with markdown files.

Astro is well known for content sites, and after using it, I definitely understood why. It was like using Next 12’s file-name based convention to create content which automatically get compiled to HTML without any extra headache.

The speed of the app.

Astro by default ships 0kb of JS. Now yes, I do know that JS isn’t really a performance bottleneck in most sites if correctly loaded, but still, I don’t need the 72kb initial React bundle that Next.js spits out at the end. Currently, the site you are reading this on doesn’t use any framework, so no JS is required, and the HTML is blazingly fast on its own!

Freedom of choosing any JS framework to add interactivity

With Next.js, I was locked-in with React. But with Astro, I am free to use any JS framework. So if I don’t necessarily use any React-specific features/libraries, I can use a light-weight UI library like Solid which is only 5kb.

Nice SEO features

Astro also provides many features that make SEO easier. One of them is sitemap generation. I know that Next.js also supports sitemap generation, but I just always had a hard time with it. Astro makes it super easy. Just pnpm astro add sitemap, add a site property to astro.config.ts, and done! Now the website has a sitemap.

Astro: The not so good parts

By reading this post, you may think Astro is the best tool to create a website, but when a tool has a lot of advantages, it also introduces a lot of disadvantages.

Working with @astrojs/image is painful.

Like next/image, Astro also has an Image component that allows you to optimize images. The problem is the component itself. For some reason, GIFs don’t work well with it. If you try to use any GIF with it, it just fails for some reason? Also, public directory vs local images are a huge headache. A lot of times, I have tried to access an image from /, but it just doesn’t load. You have to manually import the images and then pass it to the src.

Being an MPA Framework.

Not like theres something wrong with creating an MPA, but they definitely have their downsides compared to an SPA. First of all, PAGE RELOADS. Everytime you visit a page, the browser visits an entirely new page. The main issue is that it is hard to retain state on all pages. So if I want to add something like a guestbook in the future, I have to think about how to manage the state between pages. But this is not just it. Client Side Routing just provides a better UX in general than 5+ page loads.

Fonts are difficult to optimize and self host

This point is similar to the @astrojs/image one, but it is way worse. Astro itself basically provides no way to optimize Fonts. There are some community maintained packages that claim to optimize fonts, but the ones I have used just add the link to the file on Google Fonts. This is not what I expect, I would think it that it would work like how next/font works where it downloads the fonts, optimizes it and self hosts them. Whatever fonts you are seeing now were manually downloaded and setup with CSS @font-face and I can tell you, it was painful to setup.

Conclusion

While Astro is a good framework, I think it is best suited for content sites (like this one). Here is my advice:

Astro for sites, A JS Metaframework for apps

For me, I use Astro for sites and Next.js for apps.
Reason: Astro isn’t that great for dynamic sites and Next.js isn’t that great for static sites.

But just use the technologies you are most productive with.