Svelte 5 Released

Svelte noob here: can someone more experienced explain why runes are getting people excited? My untrained eye starting reading the Svelte runes documentation and it just made me go "well I guess Svelte is getting React Hooks?"

When I recently looked at SvelteKit, what confused me the most was the universal load function.

If you use "if !browser" with sveltes browser object, the things inside that branch will only run on the server.

But because svelte is compiled, these functions get compiled to two different versions, one for the server and one for the client, in which that if statement has been completely compiled out. That in itself isn't bad but it's weird that normal code and control flow influences compilation. In other languages this would be a macro or something that clearly expresses that it's metaprogramming.

Then there are some other weird things like props being merged and potentially overwriting each other in a deep level. But that is by design and can be reasoned about.

What also felt weird to me is that there is no recommended way to do initialization logic such as reading in a config, reading from the environment and preparing something for the rest of the lifetime of the application.

Has anyone had similar experiences/confusions when learning SvelteKit?

Running a small Sveltekit app with SSR is the easiest yet most of the time good enough way.

However, when your app is larger or needs to be faster, you want a dedicated backend for your API. Then, you can choose a more secure and more scalable language like C#, Go or Kotlin.

Regarding performance, many SSR advocates (don't forget there's a huge business behind this stuff) don't do the math correctly. It's faster (or as fast) to host a SPA on a CDN and get the data from your backend close to your DB. Let me explain assuming the page containing personal data from the user:

1. The user never visited the site. Getting the SPA from the CDN is very fast. Even if you need to get the JS via a second round trip. Then to get the user data is a much slower second roundtrip to the backend server. With SSR, you also have a first much slower roundtrip to the backend to get your SSR site (maybe even another one for hydration!). Then there's a second slower roundtrip to the server to get the user data. This request is slower than getting the data from a fast API backend in the SPA case. So, if the user never visited the site, you need basically two requests anyway: One for the app another for the data. How else should the backend know, what data to return. With an SPA on a CDN the first request is much faster. I must mention that rendering the SPA is an issue on slow devices. But this is a much smaller problem with Svelte than with React. SEO is probably better with SSR, but no as much as the crawlers are nowadays fast to run the JS.

2. The user has visited the site: The SPA is cached in the browser. Or an eTag validation request goes to the CDN. Very fast. Then, the first relevant request with user auth token goes to the backend to get the user data. With SSR, you get everything with one request. No real world difference there. Both approaches one relevant request. One can argue: Rendering the JS on the client device vs on the Node server. C# or Go backend faster than Next or Sveltekit. But those are not the big numbers.

Now, the big disadvantages of SSR is that you need to run a comparatively slow and not very scalable Node backend. If your app is small, then go for Sveltekit or Next with SSR as the DX is awesome. There's no simpler way to create a fullstack app then Sveltekit. It you have a more complex scenario, most of the time SPA is the way to go.

Having used both a fair bit I much prefer Flutter. RN always felt like fragile pile of hacks to me with extremely brittle builds. Flutter feels like a stack engineered for purpose from the ground up and the tooling, ecosystem and performance have been consistently great.

Also RN has no real desktop app story.

Have you ever looked at all the code that it needs to do that? Plus an integration lib like mobx-react. And even then the performance doesn't compare to Svelte 5, Solid, etc.