A practical guide to nested layouts and data loading
SvelteKit 2.0 has brought several improvements and simplifications to the way we build web applications with Svelte. Among the most powerful features are routing and layouts, which—when used properly—can greatly improve the maintainability, reusability, and performance of your app.
In this guide, we’ll walk through best practices for using routing and layouts effectively in SvelteKit 2.0. We’ll also dive into nested layouts, load functions, and provide practical examples that demonstrate how to structure real-world apps.
1. Routing in SvelteKit: File-based and Intuitive
SvelteKit’s routing is file-based, meaning your route structure follows the structure of your project’s src/routes/ directory.
src/
routes/
+page.svelte // Home route (/)
about/
+page.svelte // About route (/about)
blog/
[slug]/
+page.svelte // Dynamic route (/blog/my-post)
Each +page.svelte is a component rendered for that route, and you can pair it with a +page.ts (or +page.js) for data loading.
🔄 Dynamic Routes
Dynamic routes are created using square brackets:
/blog/[slug]/+page.svelte
You can access the parameter with:
export const load = ({ params }) => {
return {
post: fetchPost(params.slug)
};
};
2. Layouts: Share UI and Logic Across Routes
SvelteKit uses layouts to avoid code duplication and enable shared structure. Want a sidebar or navbar to persist across pages? That’s where layouts come in.
Create a +layout.svelte file in any directory. Its contents will wrap all nested routes.
src/
routes/
+layout.svelte // Main layout (persists across all pages)
dashboard/
+layout.svelte // Dashboard layout (wraps dashboard pages)
settings/
+page.svelte // Uses both main and dashboard layout
Example: src/routes/+layout.svelte
<script> export let data; </script> <header> <h1>My App</h1> </header> <main> <slot /> </main>
This renders a header and wraps all nested pages with <slot />.
3. Nested Layouts: Composition at Its Best
Let’s say your /dashboard route has a sidebar, but other routes don’t. Create a nested layout just for that route:
src/routes/dashboard/+layout.svelte
<script>
export let data;
</script>
<div class="dashboard-layout">
<Sidebar />
<div class="content">
<slot />
</div>
</div>
With this setup, your /dashboard/settings, /dashboard/profile, etc., all inherit this layout. It’s elegant and declarative.
✅ Best practice: Use nested layouts to localize structure, rather than trying to cram everything into one layout.
4. Load Functions: Data Fetching Simplified
In SvelteKit 2.0, data loading is split cleanly between +page.js/+page.ts and +layout.js/+layout.ts.
+page.ts:
export const load = async ({ fetch, params }) => {
const res = await fetch(`/api/posts/${params.slug}`);
const post = await res.json();
return { post };
};
In +page.svelte:
<script>
export let data;
</script>
<h1>{data.post.title}</h1>
<p>{data.post.content}</p>
+layout.ts Example:
Need user info across all pages?
// src/routes/+layout.ts
export const load = async ({ fetch }) => {
const res = await fetch('/api/user');
const user = await res.json();
return { user };
};
Now data.user is available in every page nested under this layout.
💡 Tip: Fetch global data (like auth state, user preferences) in layout loaders. Fetch route-specific data in page loaders.
5. Best Practices Summary
Here are the key tips for using routing and layouts well in SvelteKit 2.0:
| Practice | Description |
|---|---|
| ✅ Use layouts for shared UI | Avoid repeating navbars/sidebars on every page |
| ✅ Use nested layouts | Scope layout changes locally—makes things modular |
✅ Use layout load for global data | E.g., user sessions, theming, etc. |
| ✅ Keep route structure flat | Don’t over-nest unless truly necessary |
✅ Use params, url, fetch cleanly in load() | Stick to what each loader needs |
6. Real Opinions from the Community
“Layouts in SvelteKit 2.0 have made my dashboard app 10x easier to maintain. Before I had conditionals everywhere. Now, it’s all declarative.”
— Jake, Frontend Developer at a SaaS startup
“Nested routing and layouts give a Next.js feel but with less boilerplate. It’s just more intuitive.”
— Sarah, Indie Dev & Blogger
7. Further Reading & Links
- Official SvelteKit Layouts Docs
- SvelteKit Routing Guide
- Data Loading in SvelteKit
- Svelte Discord Community
8. Final Thoughts
SvelteKit 2.0 takes the pain out of building scalable frontends. By combining intuitive file-based routing with powerful layout features, you get clarity, consistency, and maintainability.
As your app grows, proper layout and routing structure will help you avoid technical debt—and your team (or future self) will thank you.
Want to dive deeper? Try building a mini dashboard with nested layouts and route-specific loaders—it’s the best way to learn by doing.
