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

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

SvelteKit — официальный мета-фреймворк для Svelte с SSR, SSG, файловой маршрутизацией и server-side логикой. Deплоится на 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 function (серверная)
└── 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 недель.