SvelteKit Frontend Website Development

SvelteKit Frontend Website Development

SvelteKit is the official meta-framework for Svelte with SSR, SSG, file-based routing, and server-side logic. Deploys to Node.js, Vercel, Cloudflare Workers, Netlify via adapters.

File-based routing

src/routes/
├── +page.svelte           → /
├── +layout.svelte         → root layout
├── blog/
│   ├── +page.svelte       → /blog
│   └── [slug]/
│       ├── +page.svelte   → /blog/:slug
│       └── +page.server.ts — load function (server-side)
└── api/
    └── posts/
        └── +server.ts     → /api/posts (REST endpoint)

Load functions

// src/routes/blog/[slug]/+page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const post = await db.post.findUnique({ where: { slug: params.slug } });
  if (!post) error(404, 'Post not found');

  return { post };
};

<!-- src/routes/blog/[slug]/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types';
  let { data } = $props();
</script>

<article>
  <h1>{data.post.title}</h1>
  {@html data.post.content}
</article>

Server endpoints

// src/routes/api/posts/+server.ts
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ url }) => {
  const page = url.searchParams.get('page') ?? '1';
  const posts = await db.post.findMany({ skip: (Number(page) - 1) * 10, take: 10 });
  return json(posts);
};

export const POST: RequestHandler = async ({ request }) => {
  const body = await request.json();
  const post = await db.post.create({ data: body });
  return json(post, { status: 201 });
};

Form Actions

Form handling without JS or with progressive enhancement:

// +page.server.ts
import type { Actions } from './$types';

export const actions: Actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const email = data.get('email');
    // ...
    return { success: true };
  },
};

<!-- +page.svelte -->
<script>
  import { enhance } from '$app/forms';
  let { form } = $props();
</script>

<form method="POST" use:enhance>
  <input name="email" type="email" required />
  <button>Subscribe</button>
</form>
{#if form?.success}<p>Done!</p>{/if}

use:enhance — progressive enhancement: with JS submits via fetch, without JS — regular form submit.

Adapters

npm install @sveltejs/adapter-auto    — auto platform detection
npm install @sveltejs/adapter-node    — Node.js server
npm install @sveltejs/adapter-static  — static site
npm install @sveltejs/adapter-cloudflare
npm install @sveltejs/adapter-vercel

Comparison with Next.js

Timeline

Site on SvelteKit (SSG/SSR, Tailwind, 5–15 pages): 1–2 weeks. Fullstack application with server endpoints, Form Actions, authentication: 2–5 weeks.