Skip to main content
Basic Svelte
Introduction
Reactivity
Props
Logic
Events
Bindings
Classes and styles
Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion

server load 関数と universal load 関数を一緒に使うことが必要なときもあるでしょう。例えば、サーバーからデータを返す必要がある一方で、サーバーのデータとしてシリアライズできない値も返す必要があるケースです。

この例では、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
	};
}

data がマージされていないことにご注意ください — 明示的に universal load 関数から message を返さなければなりません。

Edit this page on GitHub

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