A React Developer’s Perspective on SvelteKit

SvelteKit is a framework for building web applications using Svelte, a modern JavaScript compiler that allows you to write high-performance components with a minimal amount of boilerplate code. SvelteKit acts as an all-in-one solution for server-side rendering (SSR), static site generation (SSG), and building single-page applications (SPAs). It was officially announced in March 2021 as the successor to Sapper, Svelte’s previous application framework. SvelteKit aims to provide a more streamlined and flexible approach to building web applications by offering features such as file-based routing, server-side logic, endpoints for API routes, and integration with various hosting platforms.

As a part of Svelte’s ecosystem, SvelteKit has quickly gained popularity for its simplicity and developer-friendly approach. It embraces modern JavaScript features and conventions, leveraging Vite as its build tool for fast development and hot module replacement.

Svelte vs SvelteKit

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes. The result is faster performance and smaller bundle sizes. Svelte is essentially a compiler that generates minimal and optimized JavaScript code, leading to efficient runtime behavior for web applications.

SvelteKit, on the other hand, is a framework built on top of Svelte designed to facilitate more complex application development workflows, including server-side rendering, static site generation, and building single-page applications. It provides a standard structure for your Svelte projects and handles many common tasks out-of-the-box, such as routing, file-based page organization, and server interactions. SvelteKit brings an opinionated set of tools and conventions for building full-stack applications, aiming to create a smoother development experience with Svelte, while still maintaining the performance benefits that Svelte offers at its core.

SvelteKit vs React/Next.js

React is a popular tool for building websites and web apps. It lets developers create pieces of their interface (like buttons and forms) in isolation, then bring them together for a smooth and dynamic user experience. React is efficient, making updates quick and keeping websites snappy.

Next.js is built on top of React and adds extra powers, particularly for making websites appear on the internet faster. It handles complex tasks for developers, like making web pages load quickly and helping them show up in Google searches. It’s like an upgrade for React that handles the technical details.

JavaScript, HTML, and CSS

In SvelteKit, JS, HTML, and CSS can all exist in one file, very similar to regular HTML files

<script>
// imports and other javascript/typescript goes here
import welcome from '$lib/images/svelte-welcome.webp';
import welcome_fallback from '$lib/images/svelte-welcome.png';
import Footer from '../Footer.svelte';
</script>

<!-- html would go here -->
<section>...</section>
<style>
// styles would go here
</style>

 

Can also do It in React/Next.js, but not as “natural”

// example from MUI https://mui.com/material-ui/integrations/interoperability/
import * as React from 'react';
import Slider from '@mui/material/Slider';
import { styled } from '@mui/material/styles';

const CustomElement = styled(Slider)`
  color: #20b2aa;

  :hover {
    color: #2e8b57;
  }
`;

export default function StyledComponents() {
  return <CustomElement defaultValue={30} />;
}

Routing

SvelteKit and Next.js have similar file routing.

src/routes/
│ (app)/
│ ├ dashboard/
│ ├ item/
│ └ +layout.svelte
│ (marketing)/
│ ├ about/
│ ├ testimonials/
│ └ +layout.svelte
├ admin/
└ +layout.svelte

With this setup, you will have pages at /dashboard /item /about /testimonials /admin.

In Next.js, the file structure is slightly different, but similar:

src/app/
│ ├ dashboard/
│ │ ├ layout.ts
│ │ ├ page.ts
│ │ └ error.ts
│ ├ settings/
│ │ ├ layout.ts
│ │ ├ page.ts
│ │ └ error.ts
│ └ layout.ts
├ components/
└ ...

With this structure, in Next.js, you will have a page for /dashboard and /settings

Sever Files

SvelteKit uses <filename>.sever.ts files. Each file is explicitly labeled as a server component, where client components can easily interact with the server components.
In Next.js v14, all components are server components from the start. There is a small learning curve when combining client and server components. There is no label on the filename, and in order to uses server components explicitly, adding "use server" at the top of server files turns them into server components. To explicitly make a server component client components, one can use "use client".

Conclusion

In summary, SvelteKit is redefining the ease and speed of web development. It builds on the innovative Svelte compiler which outperforms traditional frameworks by handling updates during build time rather than at runtime. This results in faster web applications with less code. SvelteKit enhances Svelte by providing a full suite of development tools, simplifying tasks like routing and server-side rendering. It’s a direct competitor to the React and Next.js duo, offering a more streamlined approach that could entice developers to make the switch. Whether you’re looking to boost performance or streamline your workflow, SvelteKit promises an enticing development experience that’s worth exploring.