SvelteKit
The full-stack framework built on Svelte — routing, data loading, forms, and rendering for real production apps.
17 节课
SvelteKit
开始课程Getting Started
- What is SvelteKit?Why Svelte components need a framework wrapped around them, and what SvelteKit adds on top.
- Creating a SvelteKit ProjectScaffolding a new project, understanding the dev server, and what each generated file is for.
- Project StructureWhat lives in src/routes, src/lib, and static — and why the separation matters.
Routing
Loading Data
- Load FunctionsFetching data before a page renders with +page.js, instead of fetching inside the component.
- Server-Only Load FunctionsUsing +page.server.js for data that must never reach the browser, like database queries and secrets.
- Page Data and TypingHow data flows from load to a component's props, and using generated types to keep the two in sync.
Forms & Mutations
Server Features & APIs
- API Routes with +server.jsBuilding JSON endpoints and webhooks with +server.js, for clients other than your own pages.
- Environment VariablesKeeping secrets on the server with $env/static/private, and safely exposing config with the public variants.
- Hooks and MiddlewareIntercepting every request with hooks.server.js, for cross-cutting concerns like auth and logging.
Rendering & Deployment
- SSR, CSR, and PrerenderingThe three ways a SvelteKit page can render, and how to choose per-route with page options.
- Adapters and DeploymentHow adapters package a SvelteKit build for a specific host, from Node servers to fully static sites.
- SvelteKit Best PracticesHabits that keep a SvelteKit app fast, secure, and maintainable as it grows past a first prototype.