SvelteKit hydration についての調査メモ

SvelteKit hydration についてのメモになります。

• SSR実装で、hydration で難航した部分あり。調査した経緯になります

環境

• SvelteKit 1.5.0

関連: hydration

• https://kit.svelte.jp/docs/glossary#hydration

ハイドレーション

• ハイドレーション: おおまかな動作は、おそらく下記

• レンダリングは、SSR > CSRの順

• SSRレンダリングした部分で、CSR時で同一変数で、再描画しない部分は、SSRになる。

• デフォルトでページがハイドレーションされる

ハイドレーションに関する描画等の内容

• 各ページ(page.ts等)で、csr = false　設定で、SSRに変更できる。

• 上位レイヤー(Layout.ts)で、ssr = false　設定すると。サイト全体は CSRにできる。

• csr = false　設定は、フロント側JS 実行できない。

(イベント処理等も実行できない為、実装面で苦戦しやすい )