The compiler mental model

Understand how Svelte compiles declarative components into focused JavaScript and DOM updates. Distinguish compile time from runtime, component instances from modules, and hydration from client-only rendering.

Production model

Svelte 5 is clearest when ownership is explicit. Identify the source of truth, use runes for reactive relationships, and keep effects for synchronization with systems outside the reactive graph. In SvelteKit, decide whether work belongs in universal load, server load, a form action, a remote function, or an HTTP endpoint based on trust, serialization, caching, and progressive-enhancement requirements.

Type-safe implementation

Use TypeScript to encode valid states and validate every runtime boundary. Keep private modules server-only, return intentional data shapes, use stable domain identities, and model expected failures separately from unexpected faults. Types improve a sound boundary; they never replace authorization or input validation.

Applied practice

Trace data from component creation through SSR, hydration, and a user event. Verify SSR behavior, hydration, keyboard access, pending and error feedback, cleanup, request isolation, and testability. Measure observable performance before changing rendering strategy.

Failure patterns

• Using $effect to copy values that should be $derived.
• Sharing mutable state between server requests.
• Treating hidden UI or layout guards as authorization.
• Disabling SSR instead of isolating browser-only code.
• Testing implementation details while missing the user journey.

Takeaway

A production Svelte decision explains both the reactive owner and the server boundary.