+layout.svelte ファイルがすべての子ルートのUIを作成するのと同じように、+layout.server.js ファイルはすべての子ルートのデータをロードします。

ブログ投稿ページに「もっと投稿」サイドバーを追加したいとしましょう。src/routes/blog/+page.server.jsで行っているように、src/routes/blog/[slug]/+page.server.jsの`load`関数から`summaries`を返すこともできますが、それは冗長です。

代わりに、src/routes/blog/+page.server.jsの名前をsrc/routes/blog/+layout.server.jsに変更しましょう。/blogルートは引き続き機能することに注目してください。データ.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を継承します。

ある投稿から別の投稿に移動する場合、投稿自体のデータのみを読み込む必要があり、レイアウトデータは有効なままです。詳細は、無効化に関するドキュメントを参照してください。