sveltkitのloadについて
sveltkitでsever.jsでもload関数を呼ぶことができるしpage.jsでも呼び出すことができるのでその違いがいまいちわからなかったので少し調べてみました。
+page.svelte ファイルは、load 関数をエクスポートする +page.js という兄弟ファイルを持つことができ、load 関数の戻り値は page で data プロパティを介して使用することができます。
つまり基本的にはsvelteファイルにフロントの HTML 構造を書いてデータを取得する際は+page.jsのload関数でデータを取得してリターンすることで+page.svelte側でdataを通ししてそのプロパティにアクセスすることができる。
生成される $types モジュールのおかげで、完全な型安全性を確保できます。
つまり特に型情報などを意識せずにデータを利用することができる。
+page.js ファイルの load 関数はサーバーでもブラウザでも実行されます (ただし、export const ssr = false を設定した場合はブラウザでのみ実行されます)。load 関数を常にサーバーで実行させたければ (例えばプライベートな環境変数を使用していたり、データベースにアクセスする場合など)、代わりに +page.server.js に load 関数を置くとよいでしょう。
絶対サーバー側で実行させたいものについては+page.server.jsに記載する。またサーバー側のload関数では、追加の引数にアクセスすることができる。
いつ、どの load 関数が実行されるのか？
server load 関数は 常に サーバーで実行されます。
デフォルトでは、universal load 関数(サーバー側じゃないもの)は、ユーザーがはじめてページにアクセスしたときの SSR 中にサーバーで実行されます。そのあとのハイドレーション中に、fetch リクエスト で取得したレスポンスを再利用してもう一度実行されます。それ以降の universal load 関数の呼び出しは、すべてブラウザで行われます。この動作は page options によってカスタマイズすることができます。
サーバーサイドレンダリング を無効にした場合、SPA となるため、universal load 関数は 常に クライアントで実行されるようになります。
ルート(route)に universal と server の両方の load 関数が含まれている場合、server load が最初に実谷されます。
load 関数は実行時に呼び出されます。ページを プリレンダリング する場合は、ビルド時に呼び出されます。
Discussion