Svelte入門：SvelteKitでのデータ読み込み -Vol.5-

今日は、SvelteKitでのデータ読み込みについて解説しています。

背景

SvelteKitでのデータ読み込みについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

SvelteKitでのデータ読み込み

+page.svelte コンポーネント (およびそれに含まれる +layout.svelte コンポーネント) をレンダリングする前に、多くの場合、データを取得する必要があります。これは、ロード関数を定義することによって行われます。

フェッチリクエスト

SvelteKitのload関数で提供されるfetchは、通常のWeb APIのfetchと同様に動作しますが、以下の追加機能があります：

1. サーバー上で認証付きリクエストが可能

• ページリクエストのcookieとauthorizationヘッダーを継承

1. サーバー上で相対リクエストが可能

• 通常のサーバーコンテキストでは完全なURLが必要

1. 内部リクエストの最適化

• サーバー上で+server.jsルートへのリクエストを直接ハンドラ関数に送信
• HTTPコールのオーバーヘッドを回避

1. サーバーサイドレンダリング時のレスポンスの最適化

• レスポンスをキャプチャし、レンダリングされたHTMLにインライン化
• Responseオブジェクトのtext、json、arrayBufferメソッドを利用
• ヘッダーはfilterSerializedResponseHeadersで明示的に含めない限りシリアライズされない

1. ハイドレーション時の一貫性保証

• レスポンスをHTMLから読み取り、追加のネットワークリクエストを防止
• ブラウザのfetch使用時の警告を回避

これらの機能により、SvelteKitのfetchはサーバーサイドレンダリングとクライアントサイドの両方で効率的かつ一貫したデータ取得を実現します。

// src/routes/items/[id]/+page.js
/** @type {import('./$types').PageLoad} */
export async function load({ fetch, params }) {
	const res = await fetch(`/api/items/${params.id}`);
	const item = await res.json();

	return { item };
}

Cookies 

サーバーのload関数は Cookie を取得および設定できます。

// src/routes/+layout.server.js
import * as db from '$lib/server/database';

/** @type {import('./$types').LayoutServerLoad} */
export async function load({ cookies }) {
	const sessionid = cookies.get('sessionid');

	return {
		user: await db.getUser(sessionid)
	};
}

SvelteKitのfetch関数でのクッキーの扱いについて：

1. クッキーの転送条件：

• ターゲットホストがSvelteKitアプリケーションと同じ、またはその特定のサブドメインの場合のみ

1. 例（SvelteKitが my.domain.com を提供している場合）：

• domain.com：クッキーを受け取らない
• my.domain.com：クッキーを受け取る
• api.domain.com：クッキーを受け取らない
• sub.my.domain.com：クッキーを受け取る

1. その他のドメインへのクッキー転送制限：

• credentials: 'include'が設定されていても、他のドメインにはクッキーが転送されない
• 理由：SvelteKitはどのクッキーがどのドメインに属しているか判断できない（ブラウザはこの情報を提供しない）
• セキュリティ上の理由から、安全でないと判断される

1. 回避策：

• handleFetchフックを使用して、必要に応じてクッキーの転送を制御できる

この仕組みは、クッキーの安全な取り扱いとクロスオリジンリクエストのセキュリティを確保するためのものです。

おわりに 

今日は、 SvelteKitでのデータ読み込みについて解説しました。