# Routing and layouts in SvelteKit: files, segments and resets

In SvelteKit the folder tree is the router: +page, +layout and +page@ decide the URL, the data and which layouts stay mounted.

> Page: https://ui.eneawork.it/blog/sveltekit-routing-layout
> Markdown: https://ui.eneawork.it/blog/sveltekit-routing-layout.md

*2026-11-01*

In SvelteKit l’URL nasce dalla cartella: src/routes/blog/[slug]/+page.svelte risponde a /blog/qualsiasi-cosa senza un file di rotte da mantenere. Il nome del file dice anche quando quel codice gira, sul server o nel browser.

## I file che contano

src/routes/ +layout.svelte +layout.server.js (app)/ dashboard/ +layout.svelte +page.svelte settings/ +page@(app).svelte blog/ [slug]/ +page.server.js +page.svelte

(app) è un route group: non aggiunge un segmento all’URL e serve a dare un layout comune a più rami. [slug] è un parametro, [[lang]] è opzionale, [...rest] prende il resto del percorso.

// src/routes/blog/[slug]/+page.server.js import { error } from "@sveltejs/kit"; export async function load({ params }) { const post = await db.post.findUnique({ where: { slug: params.slug } }); if (!post) error(404, "Not found"); return { post }; }

## Layout annidati e reset

Un layout vale per sé e per tutti i figli. +page@.svelte riporta la pagina al layout radice; +page@(app).svelte la riporta al layout del gruppo: i layout intermedi non vengono montati, e la pagina non eredita il loro markup.

## Dove mettere il load

Misurato il 1 novembre 2026: il catalogo conta 1.556 blocchi in 99 categorie; 22 stanno in sidebar e 20 in dashboard, le due categorie che nella pratica diventano layout annidati (1 novembre 2026). Metodo: conteggio del campo categories di data/blocks.json con uno script Node, sul repository EneUI.

## Il limite da mettere in conto

Un load universale gira due volte, prima sul server e poi nel browser: non è il posto per un segreto. Un load di layout gira a ogni navigazione dentro il suo ramo, salvo invalidazione mirata: se il dato è lento, mettilo nella pagina che lo usa.

## Errori frequenti

I layout si montano da blocchi già pronti: sidebar e dashboard coprono i due casi ricorrenti di cornice, mentre flowbite-svelte fornisce le primitive Svelte per riempirli. Lo stato dentro le route è in runes di Svelte 5, il vecchio modello di store in store che non si aggiorna, il confronto in Svelte vs React.

## FAQ

### Dove metto il codice condiviso fra pagine?

In un layout se è interfaccia, in un load di layout se sono dati comuni. La logica che non è né una cosa né l’altra va in un modulo dentro lib, importabile da entrambi.

### Come faccio un URL senza prefisso?

Con un route group fra parentesi: la cartella (app) non compare nell’URL. Serve anche a dare un layout diverso a un ramo.

### Perché il layout si monta di nuovo durante la navigazione?

Perché stai entrando in un ramo con un layout diverso, o perché una chiave cambia. Se il layout dipende da un parametro, SvelteKit lo ricrea: quella parte va spostata nella pagina.

### Posso usare +page.js e +page.server.js insieme?

Sì, ma il load del server gira prima e passa i dati a quello universale. Scegli un file per route quando puoi: due load nella stessa rotta sono difficili da seguire.

### Come tipizzo params?

Importando i tipi generati da ./$types: PageServerLoad e PageData seguono il nome della route. Non scriverli a mano, cambiano con la struttura.