SvelteKit provides per-route rendering configuration through exported constants in +page.js / +page.server.js and +layout.js / +layout.server.js.

Page Options

prerender

When true, the page is rendered to static HTML at build time. Requires the static adapter or a hybrid adapter.

export const prerender = true

ssr

When true (default), the page is rendered on the server. Set to false for client-only rendering.

export const ssr = false

csr

When true (default), client-side JavaScript is loaded for the page. Set to false to produce static HTML without hydration.

export const csr = false

trailingSlash

Controls whether routes have trailing slashes: 'always', 'never', 'ignore'.

export const trailingSlash = 'always'

Project Structure

my-project/
  src/
    lib/      — Shared components and utilities
    params/   — Route parameter matchers
    routes/   — Application routes
    app.html  — HTML template
    hooks.client.js / hooks.server.js
  static/     — Static assets
  svelte.config.js

Project Types

SvelteKit supports multiple project types:

  • Web app (default): Full SSR + CSR with all features
  • Single-page app (SPA): Disable SSR, all rendering on client
  • Static site: All pages prerendered at build time
  • Hybrid: Mix of static, SSR, and SPA pages per route

Configuration

svelte.config.js is the central configuration file:

import adapter from '@sveltejs/adapter-node'

export default {
  kit: {
    adapter: adapter(),
    paths: { base: '/app' },
    files: { routes: 'src/routes' }
  }
}

Getting Started

Create a new project:

npx sv create myapp
cd myapp
npm install
npm run dev

SvelteKit uses Vite under the hood with automatic HMR for development.

See Also