Why I moved from Sveltekit to Astro 👋

Hey all,

Trying to make a marketing site in the same project as your app

I've been creating Shiftly using Sveltekit and I've been absolutely loving it. And for my apps going forward I think I'll be using it all the time.

However, where it fell down for me was with creating a super fast, SEO-friendly marketing site.

Yes Sveltekit can do prerendered routes, and can handle no-javascript clients. But it felt like I was forcing it into trying to be a SSG rather than an application framework. I felt it was never quite as performant as I wanted, and there was a weird bug where occasionally it wouldn't load a page going from a prerendered route, to a SSR rendered page. The route would change, but the view wouldn't update! I can't be having that from my homepage!

So I went in search for a way to split out the marketing site and blog out of Sveltekit and move it away into it's own project.

Introducing Astro

I'd heard of Astro in passing but decided to take a closer look. I've used 11ty in the past, and whilst great, was a bit of a learning curve!

I was instantly impressed with how frictionless Astro was to work with. If you've used any modern framework, NextJS, Qwik, Solid or Sveltekit, you'll feel right at home in Astro.

It's writing HTML exactly as you would in a framework, even with components, slots and props but then it renders it all to static HTML and CSS, and no Javascript! More on that in a bit.

I loved how instantly I could get working with Astro, creating layout components and pages exactly how I had them in Sveltekit. There was even a one line installer for Tailwind, which these days I can't live without!

A good excuse to redesign the home page

I got so excited with Astro that I had finally taken the time to improve the Shiftly homepage to something a bit more informative and proper!

Astro let me rewrite the homepage and all the blog pages within a morning. And by lunch I had my whole new marketing site deployed on Vercel.

After I had figured out how to deploy to subdomains on Vercel! 👀

Astro is by far the quickest I've ever picked up a new framework, and it's ability for speed is incredible.

I was also to really see and feel the performance gains from static html and minimal css. And add all the lovely Lighthouse fixes for the homepage which allowed me to get almost all 100s!

Next steps

Now I have a rapid Astro site which I can expand on and add whatever features I want to. I will keep improving that definitely.

Blog Markdown and prefetched routes and getStaticPaths()

Astro can read local .md files and render those as static pages, which is awesome. So I'll be looking at converting my blog to use markdown.

But wait, there's more! Astro also has a function getStaticPaths() which lets you return data to a dynamic route which builds out all the pages you return at build time.

Say you make an api call to get all your blog posts, and return all 5 blogs posts in your getStaticPaths() method. Astro will generate 5 pages each with whatever slug you specify!

Very, very cool stuff. Cannot recommend Astro enough! Another tool in the belt to help me develop faster!

Thank you for reading all!

Thank you,

Good luck!

Jacob
Shiftly

Comments

[Tom Byrer]

DId you re-write everything in Astro-markup, or did you keep most of the Svelte code & just used Astro to render?

[jdtjenkins]

I moved the entire app to a subdomain app.getshiftly.com then had a SSG astro site on the getshiftly.com. So I just moved the Svelte app and have them both sat in a monorepo