TL;DR
- SvelteKit で
+page.jsと+page.server.jsの両方があるページをリロードすると、+page.server.jsのloadが 2 回呼ばれた。 ssr = falseにするか+page.jsを消すと 1 回になった。HTML の生成時とハイドレーション時に 1 回ずつ呼ばれていると考えている。
背景
Advanced Svelte（Svelte Tutorial）を読むで server load と universal load の関係を読んでいて混乱してきたので、いくつか試した。
検証
+page.js と +page.server.js の両方に load があるページで、次の条件を変えてリロードし、+page.server.js の load が何回呼ばれるかを見た。
export const csr = falseを定義するexport const ssr = falseを定義する+page.jsを削除する
結果
| 条件 | +page.server.js の load が呼ばれた回数 |
|---|---|
+page.js と +page.server.js | 2 回 |
export const csr = false を定義 | 2 回 |
export const ssr = false を定義 | 1 回 |
+page.js を削除 | 1 回 |
考察
ChatGPT と議論して、自分なりに次のように結論づけた。1 回目は HTML の生成時、2 回目はハイドレーション時に呼ばれている。
- 1 回目: サーバで HTML を生成するときに
+page.server.jsのloadが実行され、その結果が HTML に埋め込まれる - 2 回目: ハイドレーション時に（サーバ上で）
+page.jsのloadを呼ぶが、+page.server.jsもあるので、そちらが先に実行される
Basic SvelteKit（Svelte Tutorial）を読むにまとめたとおり、+page.js はページが SSR されるときはサーバで、CSR されるときはブラウザで実行される。