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
を返さなければなりません。
previous next
1
2
3
4
5
6
<script>
let { data } = $props();
</script>
<data.component message={data.message} />