Sveltekit Review

I have now finished migrated a website developed in Nodejs/Express/MySQL to sveltekit so I thought it would be a good moment to pen down some of my experiences.

If you are a bit like me you can be confused by Sapper/Svelte/Sveltekit. What are the differences?

The short version is that Sapper was designed as the svelte application framework for server side rendering.

Sapper is no longer in active development and the replacement is Sveltekit. There are some important architectural differences between the two but, from a pure end user prospective (e.g. just trying to get a blog up and running 😜) I can tell you that in Sveltekit the static website generation is not straightforward.

The best tutorial about using Sveltekit for a blog is provided by megzari.com.

Sveltekit exports and deploy are done though a number of adapters. If you have a very simple blog you might well be able to export it to github pages.

In my case and working with this example when you deploy on vercel there are severless functions and this is a big difference with sapper where the static export could be easily hosted anywhere.

Since Sveltekit is still in beta I am sure there might come a similar system for static website generation but, as of now, sapper is indeed more straightforward.

If you plan to host your blog on vercel, cloudflare or netlify this will not be a problem as Sveltekit provides the adapter for all of them.

Here is my quick summary to develop your app in Svelte:

  • Use Svelte + Svelte Spa router svelte spa router very good option if you don't mind # based routes (downside, not great for SEO). I use this setup in several small app-website and all works very well. 100% client side recommended

  • Use sapper with the caveat that things might be obsolte at some point. recommended

  • Use sveltekit only if you are willing to have to re-do a lot of stuff each tiem they push a new update (the updated on the 4th May 2021 did literally break all my deployments). not recommended at this stage

  • Use Svelte and routify that offers several options including static site generation (I did not tried it but I was intrigued and heard great reviews )

Sveltekit also aims to be a serveless first framework.

I see some problems with this:

  • For a blog you don't necessarily need the serverless function that comes automatically with the vercel/netlify adapter.

  • I did export a site using the adapter static and it works very well without the serverless function

  • Working with these adapters creates some sort of lock in with a specific provider. With a good static export functionality (like we have in Sapper) you have much more freedom

Because of the recent (4 May 2021) changes that literally broke the deployment of my projects based on the blog template above if you use it with the blog example discussed in this article don't forget (unless you are up to fixing stuff until it reaches beta) to change package.json to freeze the packages at a certain point:

 "@sveltejs/adapter-static": "1.0.0-next.7",
 "@sveltejs/kit": "1.0.0-next.95",
 "@sveltejs/adapter-vercel": "1.0.0-next.15",

good luck!

0