Sanna Kramsi - Blog A peek into my life

Moving my accessibility site to Astro

October 22, 2023 | Tech

Recently I've had some problems with the front end of the site. The biggest reason for switching the technology on the front end was the massive issues with the prefetch that my site had. I couldn't disable the feature, and it occasionally caused even 10-second load times due to it trying to prefetch everything in the menu and failing to do that. In addition to that, there also is an issue on Netlify which prevents me from updating Next.js to the newest version to see if that would have fixed the issue. Well, it had been a moment since my last upgrade project so I decided to do it now.

Changes on the backend

I kept Strapi as the backend since I haven't had any issues with it. But I did switch from GraphQL to JSON. Astro supports GraphQL as well, but I had no reason to use it anymore.

Changes on the frontend

Well, the tech stack changed a bit. Since I moved from one modern stack to another, the process was quite painless and I was able to reuse almost all of my code. That was nice and allowed me to focus on the actual world of Astro.

I kept the site search as a React component, but otherwise, everything else is now done with the Astro syntax. I liked using Astro quite a bit, I might switch my other sites to use it at some point as well.

Feelings about Astro

Astro provides a good amount of documentation. I found it relatively easy to make the switch. I think I only searched for something outside of their documentation once or twice. So pretty much everything was handled well in the documentation.

Astro also has a nice helper function for fetching Strapi content. The function was understandable to me and I found it simple enough to do some small modifications to it based on my site's needs. What a nice way to save time!

The documentation says that Astro is an all-in-one web framework for building fast, content-focused websites. Exactly what I'm after. And I must say that based on this experience, I agree with them.

Language support

You can create multilingual sites with Astro. The process with the translations is quite similar to what they are with Next.js. Since this was an important feature for me, I was happy to see that Astro was able to support my language needs.

The result

I'm very happy with the result. The site is now so much faster. Also, the site is now almost fully static, which works well with the type of the site. The content doesn't change constantly, so the constant checking for new content felt a bit wasted with the site before.

If you haven't taken a look at Astro, I recommend you visit the Astro site!