Heldinhow SvelteKit Development
Overview
SvelteKit provides a full-stack framework for Svelte with built-in routing, SSR, and API endpoints. This skill should be invoked when building modern web applications that benefit from Svelte's compilation approach and server-side rendering.
Core Principles
- File-Based Routing: Routes defined by file structure
- SSR: Server-side rendering with hydration
- API Routes: Server endpoints as +server.js files
- Adapter Pattern: Deploy to various platforms
Preparation Checklist
- Initialize:
npm create svelte@latest - Choose TypeScript or JavaScript
- Plan routing structure
- Select deployment adapter
Step-by-Step Process
- Initialize: Create SvelteKit project
- Routes: Create pages with +page.svelte
- Layouts: Build layouts with +layout.svelte
- API: Create server endpoints
- SSR: Configure server-side rendering
- Deploy: Set up adapter for deployment
Do's and Don'ts
- ✅ Do use SSR for initial page load
- ✅ Do leverage form actions
- ✅ Do use +server.js for API routes
- ❌ Don't ignore SSR considerations
- ❌ Don't skip error handling
- ❌ Don't use client-side only when SSR works
Anti-Patterns
- No SSR: Disabling SSR unnecessarily
- Missing Error Pages: Not handling errors
- Client Only: Ignoring server capabilities
- No Loading States: Not handling async data