Розробка фронтенду сайту на SvelteKit

Розроблення фронтенду сайту на SvelteKit

SvelteKit — офіційний мета-фреймворк для Svelte з SSR, SSG, маршрутизацією на основі файлів та серверною логікою. Розгортається на Node.js, Vercel, Cloudflare Workers, Netlify через адаптери.

Маршрутизація на основі файлів

src/routes/
├── +page.svelte           → /
├── +layout.svelte         → кореневий layout
├── blog/
│   ├── +page.svelte       → /blog
│   └── [slug]/
│       ├── +page.svelte   → /blog/:slug
│       └── +page.server.ts — load функція (серверна)
└── api/
    └── posts/
        └── +server.ts     → /api/posts (REST endpoint)

Load функції

// 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, 'Пост не знайдено');

  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

Обробка форм без JS або з прогресивним поліпшенням:

// +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>Підписатися</button>
</form>
{#if form?.success}<p>Готово!</p>{/if}

use:enhance — прогресивне поліпшення: з JS відправляє через fetch, без JS — звичайний form submit.

Адаптери

npm install @sveltejs/adapter-auto    — автоопределення платформи
npm install @sveltejs/adapter-node    — Node.js сервер
npm install @sveltejs/adapter-static  — статичний сайт
npm install @sveltejs/adapter-cloudflare
npm install @sveltejs/adapter-vercel

Порівняння з Next.js

Терміни

Сайт на SvelteKit (SSG/SSR, Tailwind, 5–15 сторінок): 1–2 тижня. Fullstack-приложення з server endpoints, Form Actions, авторизацією: 2–5 тижнів.