I’ve had a website for a few years now. Originally my site was a portfolio, a way to attract potential work. That’s common advice you hear on the interwebz when first starting out and it turned out to be useful in my case. That was some time ago though and I figured now is a good opportunity to rebuild my site and learn some new things.
A couple of things I wanted to add and improve on:
- Dark/Light Mode
- RSS Feed
- Pagination
- Search
- Tags
- No component libraries, only SCSS
- Minimize payload size sent to client
- Improve Google Lighthouse scores
My old site was built with Next.js. Now, I could have achieved all of the above goals with Next but after some reflection I came to the conclusion I could do it easier without React. React is a powerful tool with a rich ecosystem but it’s easy to end up shipping way more code to the client than what’s necessary.
With all of the progress being made in the web development space, I decided to explore.
There is a sea of frameworks and libraries to create websites. We have React and all it’s ancestors like Next.js, Remix, Gatsby.js. There’s Zola, Jekyll, Nuxt.js, Hugo, and Astro too (please don’t be offended if I didn’t list your favorite framework - there’s so many!). Choices, choices, choices.
The one I ultimately chose was SvelteKit and for a few reasons.
- The syntax is awesome
- Small payload
- File system based routing
- Component based
- Uses Vite - faster DX experience
- TypeScript support
- No Virtual DOM, synthetic events
- Server Side Rendering
- Static Site Generation
- Good support/robust community
- Promising future
- Not React based
First I have to say - using Svelte has been a joy. I love being able to write SCSS directly in each of my component files. Even better, achieving reactivity felt like writing regular JavaScript. Writing components in Svelte is also more concise. I will spare you the code samples - check out the official docs yourself and see what I mean.
The lighthouse report
The performance gains speak for themselves. I would like to reiterate that if I rebuilt my site with Next.js using all of the skills I’ve gained over the years I could have achieved a similar score. The lower score on my old site had a lot to do with an over reliance on heavy component libraries, using the wrong image formats, importing unused fonts, and an over reliance on 3rd party libraries.
I’ve been using React for awhile now so using Svelte shook me out of my familiar patterns. I became so used to interacting with the VDOM and using all the abstractions React provides us that I forgot how simple things could and should be.
I still left my old site up for anyone curious, you can see it here. The site you’re reading this on is made with SvelteKit. To an end user, the difference in speed is probably imperceptible but that’s not a good reason to leave things unoptimized.
Wrapping up
All things said and done, I would certainly use Svelte again for future projects. I’m looking forward to all the progress Rich Harris and the Svelte team will be making and the official announcement of SvelteKit v1.0. If you’ve never used Svelte before I encourage you to give it a shot. Must have react libraries like react-query exist in the form of svelte-query so you can build robust applications without ever having to write React specific logic again.