Hoppa till huvudinnehåll

SvelteKit Load Functions och Form Actions 🎯

Modulsmål 🚀​

Efter denna modul behärskar du 50% av Webbserverprogrammering 1 (for real! 💪). Du kommer att kunna:

  • ✅ Ladda data på servern med load functions (25% av kursen!)
  • ✅ Skicka data till servern med form actions (25% av kursen!)
  • ✅ Hantera state på servern mellan requests
  • ✅ Använda cookies för att spåra användare

Konceptöversikt: Load vs Actions 🧠​

Load Functions - Hämta data 📥​

  • Körs på servern innan sidan laddas
  • Skickar data från server till klient
  • Har tillgång till cookies, params, URL, etc.

Form Actions - Skicka data 📤​

  • Körs på servern när formulär skickas
  • Tar emot data från klient till server
  • Fungerar även utan JavaScript!
Från API endpoints till SvelteKit shortcuts! ✨

I förra modulen byggde du egna API endpoints med +server.ts. Nu lär vi oss SvelteKit:s inbyggda sätt att hantera data - mycket smidigare för vanliga use cases! Du kommer att uppskatta skillnaden.

Dagens övning: Bygg en Clicker-app! 🖱️​

Steg 1: Skapa projektet 🏗️​

# VIKTIGT: Var i rätt mapp! Inte i ditt gamla projekt
npm create svelte@latest clicker-app
cd clicker-app
npm install
npm run dev
Vanligt fel! 🚨

Många glömmer att cd clicker-app. Kom ihåg rätt mapp!

Steg 2: Sätt upp server-state 📊​

Skapa src/lib/store.ts för att hålla koll på din count:

// src/lib/store.ts
let count = 0;

export function getCount(): number {
  return count;
}

export function incrementCount(): number {
  count++;
  return count;
}

// Lägg till fler funktioner här om du vill...
Varför /lib? 🤔

/lib är SvelteKit:s konvention för delad kod som kan importeras överallt!

Steg 3: Load function - Skicka data till klienten 📤​

Skapa src/routes/+page.server.ts:

// src/routes/+page.server.ts
import type { PageServerLoad } from './$types';
import { getCount } from '$lib/store';

export const load = (({ cookies, url, params }) => {
  // Din kod här - vad ska du returnera?
  // Tips: det du returnerar här blir tillgängligt som 'data' i +page.svelte
  
}) satisfies PageServerLoad;

Steg 4: Form Actions - Ta emot data från klienten 📥​

Lägg till i samma fil:

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

export const actions = {
  increment: async ({ request, cookies }) => {
    // Din kod här - vad ska hända när någon klickar?
    // Tips: använd incrementCount() från din store
  },
  
  // Lägg till fler actions om du vill...
} satisfies Actions;

Steg 5: Frontend - Visa och skicka 🎨​

Uppdatera src/routes/+page.svelte:

<script>
  import { enhance } from '$app/forms';
  
  // Hur får du tag på data från load function?
  export let data;
</script>

<h1>Clicker App!</h1>

<!-- Visa count här -->
<p>Count: {/* Vad ska stå här? */}</p>

<!-- Form för att klicka -->
<form method="POST" action="?/increment" use:enhance>
  <button type="submit">Klicka mig!</button>
</form>

<!-- Lägg till styling om du vill -->

Viktiga koncept 🧠​

Action naming​

<!-- Formuläret anropar "increment" action -->
<form method="POST" action="?/increment">

<!-- Motsvarar: -->
export const actions = {
  increment: async ({ request }) => { ... }
}

use:enhance = ingen page reload​

<!-- Utan use:enhance - sidan laddar om -->
<form method="POST" action="?/increment">

<!-- Med use:enhance - smooth! -->
<form method="POST" action="?/increment" use:enhance>

Nästa nivå: Multi-user med cookies! 🍪​

När du har grundversionen fungerande, försök detta:

Utöka din store för flera användare​

// src/lib/store.ts
const userCounts = new Map<string, number>();

export function getUserCount(userId: string): number {
  // Din kod här
}

export function incrementUserCount(userId: string): number {
  // Din kod här
}

// Kanske en funktion för att få alla användares counts?

Använd cookies för att identifiera användare​

// I din load function
export const load = (({ cookies }) => {
  let userId = cookies.get('userId');
  
  if (!userId) {
    // Skapa ett nytt användar-ID och spara i cookie
    // Tips: använd crypto.randomBytes() eller Math.random()

    // VIKTIGT: Detta är osäkert för produktion!
    // Vi lär oss säker authentication i senare moduler
    cookies.set('userId', user.id,{
      path: '/'
    })

  }
  
  // Returnera data baserat på userId
}) satisfies PageServerLoad;
Cookies API 🍪
// Läsa cookie
const value = cookies.get('name');



// Sätta cookie
cookies.set('name', 'value', { 
  path: '/', 
  maxAge: 60 * 60 * 24 // 1 dag
});

Vanliga problem 🔧​

❌ "Actions not found"​

Kontrollera:

  • Har du skapat +page.server.ts?
  • Stämmer action-namnet: action="?/increment" → increment: async

❌ Data uppdateras inte​

Lösning: Glöm inte use:enhance på formuläret!

❌ "Cannot read property of undefined"​

Kontrollera: Returnerar din load function rätt data?

Utmaningar 🚀​

Grundnivå:​

  • Lägg till en "reset" knapp
  • Visa när sidan senast laddades
  • Lägg till lite CSS för att göra det snyggt

Mellannivå:​

  • Håll koll på flera användare med cookies
  • Visa en topplista med alla användares counts
  • Lägg till formulär för att sätta eget användarnamn

Expertnivå:​

  • Realtidsuppdateringar när andra klickar
  • Spara data så det överlever server-restart
  • Lägg till statistik (klick per minut, etc.)
Resurser för fördjupning 📚

Nästa steg 🎯​

I nästa modul går vi igenom SvelteKit:s officiella tutorial för att befästa allt du lärt dig!