Svelte and SvelteKit Explained

I often read questions on Reddit such as:

How Svelte compares to X, Y, Z?

What do I need SvelteKit for?

How do I use it without SvelteKit?, I have my own existing backend!

In this article I will try to explain it all.

How Svelte compares to X, Y, Z?

First of all this is very subjective. I can only share my personal experience through a very long career building production stuff primarily in backend (C#) and front-end (Vanilla JS, jQuery, Angular, Vue, React and Svelte).

I always look for simplicity first because that's what makes me more productive.

My preference is Vanilla JS aka pure JavaScript for its performance, direct control over the code, deeper understanding of JavaScript fundamentals, simplicity, no dependency management, broad browser compatibility, educational value, and the extensive community and resources available.

Vanilla JS doesn't give me the power of reactivity. The more project grows the harder it becomes.

Angular, Vue, React and Svelte do!

My choice is Svelte because it is the closest to Vanilla JS out of all of the above while still offering amazing features out of the box.

Svelte is also compiled and it doesn't use Virtual DOM.

What do I need SvelteKit for?

SvelteKit is a framework built on Svelte, offering features like server-side rendering, static site generation, and seamless integration for building complex web applications.

In other words, SvelteKit lets you easily build, run, and test your Svelte application. There are many ways to build it:

Client + Server

You write your client code and server code in the same project, benefiting from using the same language. You get server-side rendering by default (SSR) and can host it in a single Node server instance (for example).

You choose where the code should be executed. For example, to execute the code exclusively on the server, you append the file name with server, i.e., +page.server.js.

You can also mark your server pages as static by configuring them to prerender. You can read more about it here.

To deploy it, you need:

• A Linux server
• A web server of your choice, i.e., Nginx, Caddy
• Node.js

Static Client + API

You write your client code that talks to an API of your choice. This is perfect for things that do not need SEO, like admin portals, dashboards, etc.

All that is needed is a single-line config file where we tell SvelteKit to build the whole site as static. SvelteKit will produce an HTML+JS+CSS combo. Here, you need to host two sites: one with your API and another with your static site.

To deploy it, you need:

• A Linux server
• A web server of your choice, i.e., Nginx, Caddy
• Whatever powers your API (e.g., mine runs on .NET 8)

Client + Server + API

This is the same approach as in point 1, except that you can still use the API of your choice instead of writing server code in JavaScript.

All that is needed is a single-line config file where we tell SvelteKit to use the node adapter.

Under the hood, something like this happens:

To deploy it, you need:

• A Linux server
• A web server of your choice, i.e., Nginx, Caddy
• Node.js
• Whatever powers your API

Here is a live example of this last method:

https://salarioo.com

Thank you for reading!

If you enjoyed this post and want to stay updated, follow me on Twitter for the latest updates and check out my projects on GitHub.

Feel free to reach out with any questions or feedback.

May the code be with you!