Strategy Comparison
Choose the right approach for your use case. All three strategies are type-safe and flexible.
Quick Decision Matrix
| Use Case | Recommended Strategy | Why |
|---|---|---|
| Page titles, meta tags | Load Function | SEO, zero layout shift |
| Breadcrumbs, navigation | Load Function | Server-rendered, always visible |
| Simple header/footer content | Component Wrapper | Clean API, easy to use |
| Action buttons with handlers | Snippet | Access to page state/handlers |
| Forms, counters, toggles | Snippet | Reactive, interactive UI |
| Dashboard stats | Snippet | Real-time updates, state access |
The Three Strategies
1. Load Function (SSR)
Return region data from your page's load function. Best for SEO and server-side rendering.
Note: Also works in +layout.server.ts files. See Advanced Patterns for layout-level regions and inheritance.
Best For:
- • SEO-critical content
- • Page titles and meta tags
- • Breadcrumb navigation
- • Zero layout shift
- • Server-side data fetching
Limitations:
- • Can't access page state
- • No reactive updates
- • Data must be serializable
2. Component Wrapper (Client-Side)
Use a wrapper component with props. Simple, clean API that works like any Svelte component.
Best For:
- • Simple, static content
- • Client-only pages
- • Rapid development
- • Clean, prop-based API
- • Generated with CLI
Limitations:
- • Client-side only (no SSR)
- • Not ideal for SEO
- • Requires separate files
3. Snippet (Maximum Flexibility)
Define snippets inline with full access to page state. Perfect for interactive UIs.
Best For:
- • Interactive UI (forms, counters)
- • Access to page state
- • Event handlers from page
- • Real-time updates
- • Maximum flexibility
Limitations:
- • Client-side only
- • More complex setup
- • TypeScript only (no runtime validation)
Decision Flowchart
Does this content need to be in the initial HTML (SEO)?
Use Load Function - Server-rendered, SEO-friendly
Does it need access to page state or handlers?
Use Snippet - Full state access, maximum flexibility
Use Component Wrapper - Simple, clean API
Real-World Examples
E-Commerce Product Page
- • Load Function: Product title, meta description, breadcrumbs
- • Component Wrapper: Related products sidebar
- • Snippet: Add to cart button, quantity selector
Blog Post
- • Load Function: Post title, author, publish date, meta tags
- • Component Wrapper: Table of contents, author bio
- • Snippet: Like button, comment form
Dashboard
- • Load Function: Page title, breadcrumbs
- • Snippet: Real-time stats, filter controls, action buttons
Performance Comparison
| Metric | Load Function | Component Wrapper | Snippet |
|---|---|---|---|
| Initial Paint | |||
| SEO | |||
| Interactivity | |||
| Developer Experience |