メインコンテンツにスキップ

場合によっては、サーバーロード関数とユニバーサルロード関数を一緒に使用する必要があるかもしれません。たとえば、サーバーからデータを返す必要があるが、サーバーデータとしてシリアライズできない値も返す必要がある場合があります。

この例では、`src/routes/+page.server.js` から取得したデータが `cool` かどうかに応じて、`load` から異なるコンポーネントを返したいと考えています。

`src/routes/+page.js` では、`data` プロパティを介してサーバーデータにアクセスできます

src/routes/+page
export async function load({ data }) {
	const module = data.cool
		? await import('./CoolComponent.svelte')
		: await import('./BoringComponent.svelte');

	return {
		component: module.default,
		message: data.message
	};
}

データはマージされないことに注意してください。ユニバーサル `load` 関数から `message` を明示的に返す必要があります。

GitHub でこのページを編集

1
2
3
4
5
6
<script>
	let { data } = $props();
</script>
 
<data.component message={data.message} />