Fundamentals - Benefits of SvelteKit

Benefits of SvelteKit

Now let’s go through, in more detail, some of the benefits of SvelteKit.

Here we have a diagram with some of the reasons why SvelteKit is becoming so popular. First, let’s look at the different rendering options. With SvelteKit, you can choose how you want to render content based on the route it is on. Originally with Svelte, the content was always rendered on the client side and you didn’t have access to the server at all. But with SvelteKit, we have the flexibility to decide what option best fits our application.

You may have seen some of these acronyms before, but if not that’s the thing about web development, there are always room for more acronyms. The options we have in SvelteKit include Client Side Rendering (CSR) like Svelte provided, but also Server Side Rendering (SSR) and Static Site Generation (SSG). With SvelteKit, we can even use both and choose which is best for each route. First, let’s take a look at server-side rendering.

This means that the content is generated by the server each time a user visits the page, which is ideal for SEO and content that always needs to be up to date. You would use this on sites that require a lot of user interaction or rely on a database for the latest content.

Next, there is static site generation where all of the files get generated at build time by the server and are cached at that moment in time. Your browser is fetching that same cached content over and over, making it extremely fast. This is great for content that doesn’t change. A good use case for this would be a blog site, landing page, or a store with products that don’t change very often. And last we have Client Side Rendering or you may have heard the term SPA, Single Page Application. This is where the browser handles most of the work and first load times are slower, but once it is loaded the site can feel more responsive.

Next, we’ll look at the 2nd benefit of SvelteKit, performance.