Skip to main content

Just as +layout.svelte files create UI for every child route, +layout.server.js files load data for every child route.

Suppose we'd like to add a 'more posts' sidebar to our blog post page. We could return summaries from the load function in src/routes/blog/[slug]/+page.server.js, like we do in src/routes/blog/+page.server.js, but that would be repetitive.

Instead, let's rename src/routes/blog/+page.server.js to src/routes/blog/+layout.server.js. Notice that the /blog route continues to work — data.summaries is still available to the page.

Now, add a sidebar in the layout for the post page:

	export let data;

<div class="layout">

		<h2>More posts</h2>
			{#each data.summaries as { slug, title }}
					<a href="/blog/{slug}">{title}</a>

	@media (min-width: 640px) {
		.layout {
			display: grid;
			gap: 2em;
			grid-template-columns: 1fr 16em;

The layout (and any page below it) inherits data.summaries from the parent +layout.server.js.

When we navigate from one post to another, we only need to load the data for the post itself — the layout data is still valid. See the documentation on invalidation to learn more.

Next: Headers and cookies