前のセクションの読み込みでは、+page.server.js と +layout.server.js ファイルを使用してサーバーからデータを読み込みました。これは、データベースから直接データを取得したり、Cookie を読み取ったりする必要がある場合に非常に便利です。

クライアントサイドナビゲーションを実行する場合、サーバーからデータを読み込むのは理にかなわない場合があります。例えば

• 外部 API からデータを読み込んでいる場合
• メモリ内のデータが利用可能な場合はそれを使用したい場合
• ポップインを避けるために、画像がプリロードされるまでナビゲーションを遅らせたい場合
• コンポーネントやストアなど、シリアライズできないものを load から返す必要がある場合 (SvelteKit は devalue を使用してサーバーデータを JSON に変換します)

この演習では、後者のケースを扱います。src/routes/red/+page.server.js、src/routes/green/+page.server.js、src/routes/blue/+page.server.js 内のサーバー load 関数は、データのようにシリアライズできない component コンストラクタを返します。 /red、/green、または /blue に移動すると、ターミナルに「load から返されたデータ...はシリアライズできません」というエラーが表示されます。

サーバー load 関数をユニバーサル load 関数に変換するには、各 +page.server.js ファイルの名前を +page.js に変更します。これで、関数はサーバーサイドレンダリング中にサーバー上で実行されますが、アプリのハイドレーション時またはユーザーがクライアントサイドナビゲーションを実行したときにもブラウザで実行されます。

これで、これらの load 関数から返された component を、src/routes/+layout.svelte を含む他の値と同様に使用できます。

<nav
	class:has-color={!!$page.data.color}
	style:background={$page.data.color ?? 'var(--bg-2)'}
>
	<a href="/">home</a>
	<a href="/red">red</a>
	<a href="/green">green</a>
	<a href="/blue">blue</a>

	{#if $page.data.component}
		{@const Component = $page.data.component}
		<Component />
	{/if}
</nav>

サーバー load 関数とユニバーサル load 関数の違い、およびどちらをいつ使用するかについては、ドキュメントをお読みください。