SvelteKit

Co to jest SvelteKit i jak działa routing oparty na plikach?

SvelteKit: fullstack framework oparty na Svelte. Oficjalny meta-framework jak Next.js dla React. Vite pod spodem. Routing oparty na plikach w src/routes/. +page.svelte — strona. +layout.svelte — layout. +page.server.ts — server-side load. +page.ts — universal load (SSR + CSR). +server.ts — API endpoint (GET, POST, etc.). +error.svelte — strona błędu. Struktura: src/routes/+page.svelte — strona główna (/). src/routes/blog/+page.svelte — /blog. src/routes/blog/[slug]/+page.svelte — /blog/:slug. src/routes/api/users/+server.ts — /api/users. Zagnieżdżone layouty: każdy folder może mieć +layout.svelte. Layouty dziedziczą i owijają potomków. (route) — group bez URL. [[optional]] — parametr opcjonalny. [...rest] — catch-all. Adaptery: adapter-auto (Vercel, Netlify, Cloudflare). adapter-node — Node.js server. adapter-static — SPA lub SSG. adapter-cloudflare — Cloudflare Pages + Workers. Svelte komponenty: .svelte rozszerzenie. script + style + template w jednym pliku. Reactywność przez $: i rune-based (Svelte 5). Brak virtual DOM — kompilowany do vanilla JS. Mniejszy bundle niż React. SvelteKit vs Next.js: SvelteKit — mniej boilerplate. Next.js — większy ekosystem.

Load functions — SSR i CSR data fetching w SvelteKit?

Load functions: funkcje zwracające dane do komponentu. +page.server.ts (server-only): export async function load({params, fetch, cookies, locals, platform}) { const post = await db.getPost(params.slug). return {post} }. Dane dostępne w page.data. Tylko na serwerze — dostęp do DB, secrets. +page.ts (universal): export async function load({params, fetch}) { const res = await fetch('/api/posts/' + params.slug). return await res.json() }. Działa i na serwerze i kliencie. fetch() — rozszerzony, respektuje cookies. +layout.server.ts load: dane dziedziczone przez wszystkie dzieci. parent(): await parent() — czekaj na layout load. Promise.all dla równoległych requestów. Parametry URL: params.slug — parametr dynamiczny. url.searchParams.get('q') — query string. Data w szablonie: script in +page.svelte: export let data. data.post.title. Type safety: export const load = async () => ({post}). PageData type generowany automatycznie. Error handling: throw error(404, 'Not found') — z @sveltejs/kit. throw redirect(302, '/login') — przekierowanie. throw error(500, message) — błąd serwera. Streaming: return {streamed: {comments: fetchComments()}}. Komponent czeka na resolved. SvelteKit 2.x: runes ($props, $state, $derived). Nowy model reaktywności Svelte 5.

Form Actions — server-side formularze bez JavaScript?

Form Actions: progressively enhanced formularze. Działają bez JavaScript (native HTML form). Enhanced z JS — brak full reload. +page.server.ts actions: export const actions = { default: async ({request, cookies}) => { const formData = await request.formData(). const email = formData.get('email'). const password = formData.get('password'). try { await signIn(email, password). throw redirect(302, '/dashboard') } catch(e) { return fail(400, {error: 'Invalid credentials', email}) } }, register: async ({request}) => { ... } }. Multiple actions: form action='?/register'. form action='?/login'. Named actions. Template: form method='POST'. Walidacja: Zod + superforms. svelte-superforms: use:enhance z TypeScript. formSchema: z.object({...}). superValidate(request, zod(schema)). message() helper. Optimistic UI: use:enhance callback. update({reset: false}). Modify local state przed response. applyAction(result). Pliki: formData.get('file') jako File. Streaming i progress upload. File type validation. CSRF protection: SvelteKit wbudowane CSRF (SameSite cookies). Turnstile / hCaptcha integracja. FormData manipulation w action. Return types: fail(statusCode, data) — błąd z danymi. redirect(code, url) — przekierowanie. error(code, message) — błąd serwera. {success: true, data} — sukces.

Hooks, stores i zaawansowane wzorce SvelteKit?

Hooks: src/hooks.server.ts. handle: middleware-like. export const handle = async ({event, resolve}) => { event.locals.user = await getUser(event.cookies). return resolve(event) }. handleFetch: modyfikuj fetch requests. handleError: globalny error handler. sequence(): chainowanie handle hooks. src/hooks.client.ts: handleError — client-side errors. Svelte Stores (Svelte 4): writable(initialValue). readable(). derived(). store.subscribe(). $store — auto-subscription. Page store: import {page} from '$app/stores'. $page.url.pathname. $page.params. $page.data. $page.status. Svelte 5 Runes: $state() zamiast let. $derived() zamiast $: derived. $effect() zamiast onMount + $:. $props() zamiast export let. Nawigacja: import {goto, invalidate, invalidateAll} from '$app/navigation'. goto('/path') — programmatic navigation. invalidate('resource') — refresh konkretnych danych. afterNavigate hook. beforeNavigate — potwierdzenie opuszczenia. Lifecycle: onMount, onDestroy, beforeUpdate, afterUpdate (Svelte 4). $effect (Svelte 5). Context: setContext, getContext — bez prop drilling. Service: tylko w +layout.svelte dostępny wszędzie. SSR state isolation — każdy request ma fresh state. Unikaj module-level mutable state. env variables: $env/static/private — build time. $env/dynamic/private — runtime. $env/static/public — po stronie klienta.

Deployment SvelteKit — Vercel, Cloudflare i własny serwer?

Vercel deployment: npm install @sveltejs/adapter-vercel. svelte.config.js: import adapter from '@sveltejs/adapter-vercel'. config: {kit: {adapter: adapter()}}. Automatyczne wykrycie przez Vercel. Edge Functions: adapter({runtime: 'edge'}). Streaming SSR na edge. ISR: config = {isr: {expiration: 60}}. Cloudflare Pages + Workers: adapter-cloudflare. platform.env.DB — D1 bindings. platform.env.KV — KV store. platform.context.waitUntil(). Cloudflare-specific APIs dostępne. Node.js server: adapter-node. node build/. PORT env variable. Reverse proxy (Nginx, Caddy). PM2 lub Systemd dla production. Static deployment: adapter-static. prerenderAll lub per-route prerender. SPA mode: fallback: '404.html'. GitHub Pages, Netlify static. Prerendering: export const prerender = true w +page.ts. config.kit.prerender: entries dla dynamic routes. Crawl: true — automatyczne wykrywanie. Partial prerendering: mix SSR i static. Caching: Cache-Control headers w +server.ts. setHeaders({...}). Stale-while-revalidate pattern. Vite config w SvelteKit: vite.config.ts. Plugins, aliases, proxy. Test setup: Playwright (E2E), Vitest (unit). @testing-library/svelte. SvelteKit Inspector: SVELTE_INSPECT=true. Overlay component boundaries.

Wyślij zapytanie