SvelteKitコンポーネント内でブラウザAPIを呼び出したい

はじめに

皆さん、こんにちは。
今回はSvelteKitでブラウザAPIを利用するコンポーネントを記述する方法を紹介します。

onMountライフサイクルフックを利用する

クライアントサイドでのみ有効なブラウザAPI（window、document等）を扱う際には注意が必要です。サーバーサイドレンダリング（SSR）プロセス中にはこれらのオブジェクトは存在しないため、直接的な利用は例外を引き起こします。解決策として、SvelteKitのonMountライフサイクルフックを活用する方法が挙げられます。onMount内でブラウザAPIの呼び出しを行うことで、コンポーネントがクライアントサイドでマウントされた後の実行が保証され、SSR時のエラーを回避できます。

+page.svelte

<script lang="ts">
  // SvelteのonMountライフサイクルフックをインポート
  import { onMount } from 'svelte';

  // コンポーネントがマウントされた後に実行される関数を登録
  onMount(() => {
    document.getElementById('');
  });
  // document.getElementById('') このままだと500エラー
</script>

SSRをやめる

もう１つの方法はそのコンポーネントでのSSRをやめることです。特定のコンポーネント（ページまたはレイアウト）でのサーバーサイドレンダリング（SSR）を意図的にスキップさせるには、関連する+page.jsまたは+layout.jsファイル内で、export const ssr = false;というexport文を定義します。この宣言により、SvelteKitはその特定のルートに対してサーバーサイドでのレンダリング処理を行わず、クライアントサイドレンダリングのみを実行するようになります。

+page.server.ts

// +page.ts や +layout.ts など
export const ssr = false;

+page.svelte

<script lang="ts">
  // CSRなのでエラーにならない
  document.getElementById('')
</script>

おわりに

ブラウザ専用のAPIを利用する際はSSRではトラブルになるので、要注意ですね。onMountが部分的にブラウザAPIを利用できるので良い解決方法かと思います。