以前学習した loading のセクションでは、+page.server.js と +layout.server.js ファイルを使ってサーバーからデータを取得しました。データベースから直接データを取得したり、cookie から読み取ったりするのにとても便利です。
しかし、クライアントサイドナビゲーションを行うとき、サーバーからデータを取得することが理にかなっていないケースもあります。例えば:
- 外部の API からデータを取得する
- インメモリデータが使えるならそれを使いたい
- ポップインを避けるため、画像がプリロードされるまでナビゲーションを遅らせたい
- コンポーネントや store など、シリアライズできないもの (SvelteKit は devalue でサーバーのデータを JSON に変換しています) を
loadから返す必要がある
この演習では、最後のケースを扱います。src/routes/red/+page.server.js、src/routes/green/+page.server.js、src/routes/blue/+page.server.js の server load 関数は、シリアライズできない component コンストラクタを返します。/red、/green、/blue に移動すると、ターミナルで 'Data returned from load ... is not serializable' というエラーが表示されるでしょう。
server load 関数を universal 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}
<svelte:component this={$page.data.component} />
{/if}
</nav>server load 関数と universal load 関数の違いや、その使い分けなど、詳細についてはドキュメントをご参照ください。