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 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:
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!
Top comments (2)
Thx for the insight im learning svelte swell I like it so far but im a little stuck with the +layout.svelte and +layout.server.js these does not seam to be the same at all. Even tho their name are close. Anyhow loved your article thx!
I'm happy you decided to try it. It's an amazing stack!
+layout.svelte- is used to define the layout of your pages. This is where you structure the visual elements that will appear on multiple pages. For example your menu and logo would go there o+layout.server.js- is used for server-side logic associated with a layout. It handles data fetching, preprocessing, and other server-side operations that should occur before rendering the layout. For example imagine you want to modify your menu and add country selector dropdown but the list of supported countries is stored in your database. You can use that file to get it and pass the data to the client.Check the docs for
+layout.jsand+layout.server.js:kit.svelte.dev/docs/routing#layout...