What is SvelteKit? The linked page assumes I already know and have just been waiting for an announcement.
I have heard a bit about Svelte. I love the analogy with spreadsheets, where original spreadsheets reevaluated every cell whenever any cell changed. Modern spreadsheets maintain a dependency graph, so when something changes, only the direct dependencies are even evaluated. If any of them change, then only their dependencies are evaluated, etc., recursively. So React's repeated full virtual DOM diff at runtime vs. Svelte's focused dependency graph, created at compile time. Very interesting.
But that's Svelte, or at least I think it is. So what is SvelteKit?
> Think of it as Next for Svelte. It's a framework for building apps with Svelte, complete with server-side rendering, routing, code-splitting for JS and CSS, adapters for different serverless platforms and so on.
> If you're familiar with Sapper, SvelteKit is Sapper's successor.
As @skybrian points out below, this doesn't help much if you don't know what Next and Sapper are, and especially if you don't know what Svelte is.
Here's my attempt.
1. Svelte is a JavaScript component framework, i.e. it offers a way to write reusable UI components in JavaScript. (Other popular frameworks include React, Angular, and Vue.)
Each major framework solves the problem of code reuse in a different way, and components written in one framework are generally hard to adapt to other frameworks, if only because each framework includes some JS that you have to run in order to make its components work, and it hurts performance to run three frameworks when you could have just run one, so developers fight a lot about which framework is best.
2. SvelteKit supports "server-side rendering" (SSR) for Svelte. JavaScript frameworks let you implement user interfaces in JS, but by default, that JS only runs ("renders" the UI) on the client side, in the user's browser.
Client-side rendering hurts performance if the user has a slow Android phone. But even on fast devices, client-side rendering adds round trips to the server, first requesting the page, then requesting the JS, then finally running the JS to render. It's usually faster to render HTML on the server, and then to progressively enhance it on the client side.
Server-side rendering requires you to buy into an even bigger framework, with JavaScript component code running on the server and on the client, but it can offer nifty features, like "code splitting," sending down just the right JS needed for the current page (or the current "route," which is a bunch of pages of the same type with similar URLs). SSR frameworks have to handle not just UI components, but entire pages, and deciding based on the URL which page to show, which is called "routing."
For React server-side rendering, you'll typically use Next.js. Vue offers its own server renderer. Angular offers "Angular Universal." Preact offers WMR.
Svelte had an older SSR framework called "Sapper." Sapper is now dead/deprecated code, and SvelteKit is the new thing.
That was outstanding. Decades ago, before they invented juice boxes, we kids enjoyed milk and cookies while listening to carefully worded, age-appropriate explanations. Heaven help me, sometimes that combination still hits the spot. Thank you.
It's an application framework for Svelte which replaces Sapper.
It uses Vite[1] for development and has been designed from the start to be able to produce static sites a la Gatsby or Next (Sapper wasn't great at that). Svelte Kit runs SSR on Node JS servers like Sapper did, but also on cloud functions and I think even Cloudflare Workers which do not run Node.
See Svelte as a JavaScript library like React or Angular, which allows you to develop web applications easily.
Now, SvelteKit is bringing the library to the _framework_ level (big big emphasis on "framework", we all have different definitions for what a framework is), which adds easy routing, server-side rendering, optimized JavaScript bundles per page for the client, etc.
Because to start a project you have to spend days and even months researching libraries, the current best practices, etc. and then glue them all together with some monster build system (webpack, etc.) and pray that one library doesn't update to be incompatible, or that the library maintainer loses interest and maintenance, etc. And then if you look at another project you have to learn everything again because they took an entirely different approach of glueing together libraries.
These frameworks are an opinionated take on project structure meant to save time and effort. Can they build anything and everything with JS? No, and they don't make such promises. Can they build most apps and things people want to build, and with a much faster and simpler setup? Absolutely, yes.
But honestly this isn't the thread to fight the framework vs. library fight. That ship sailed _years_ ago after create-react-app got popular.
I get kind of annoyed when people can't do at least 10 or less minutes of their own research. I believe it states on the front page that its akin to Next for svelte and the successor svelte/sapper. If you don't know what those are then perhaps just follow the links backwards and read?
TL;DR, it is the new officially recommended way to build apps with the Svelte framework. Compared to its predecessor, it promises much faster local development based atop Vite and ESBuild, and it can be deployed as a static site, or a node server, or as serverless functions (whereas previously you only had either server or static site options). There are a ton of other small new features as well in the docs.
I have heard a bit about Svelte. I love the analogy with spreadsheets, where original spreadsheets reevaluated every cell whenever any cell changed. Modern spreadsheets maintain a dependency graph, so when something changes, only the direct dependencies are even evaluated. If any of them change, then only their dependencies are evaluated, etc., recursively. So React's repeated full virtual DOM diff at runtime vs. Svelte's focused dependency graph, created at compile time. Very interesting.
But that's Svelte, or at least I think it is. So what is SvelteKit?