正如 +layout.svelte 檔案為每個子路由建立 UI 一樣，+layout.server.js 檔案會為每個子路由載入資料。

假設我們想在部落格文章頁面新增一個「更多文章」側邊欄。我們可以從 src/routes/blog/[slug]/+page.server.js 中的 load 函式傳回 summaries，就像我們在 src/routes/blog/+page.server.js 中做的那樣，但這會是重複的。

相反地，讓我們將 src/routes/blog/+page.server.js 重新命名為 src/routes/blog/+layout.server.js。請注意，/blog 路由仍然可以運作 — data.summaries 對頁面仍然可用。

現在，在文章頁面的版面中新增一個側邊欄

<script>
	let { data, children } = $props();
</script>

<div class="layout">
	<main>
		{@render children()}
	</main>

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

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

版面（以及其下的任何頁面）會從父層 +layout.server.js 繼承 data.summaries。

當我們從一篇文章導覽到另一篇文章時，我們只需要載入文章本身的資料 — 版面資料仍然有效。請參閱關於失效的文件以了解更多資訊。