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

用語解説

2024.09.22

この記事は約4分で読めます。

よっしー

こんにちは。よっしーです(^^)

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

背景
SvelteKitでのデータ読み込み
1. ページデータ
おわりに

背景

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

SvelteKitでのデータ読み込み

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

ページデータ

+page.svelte ファイルには、load 関数をエクスポートする兄弟の +page.js を含めることができます。その戻り値は、データプロパティを介してページで利用できます。

// src/routes/blog/[slug]/+page.js
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
	return {
		post: {
			title: `Title for ${params.slug} goes here`,
			content: `Content for ${params.slug} goes here`
		}
	};
}

// src/routes/blog/[slug]/+page.svelte
<script>
	/** @type {import('./$types').PageData} */
	export let data;
</script>

<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div>

自動生成された型定義ファイルによって、コード全体で型の一貫性が保たれ、型関連のエラーを防ぐことができる。

+page.jsファイル内のload関数は、サーバーとブラウザの両方で実行されます（export const ssr = falseと組み合わせない限り。その場合はブラウザでのみ実行されます）。通常、load関数はサーバーサイドとクライアントサイドの両方で実行されますが、SSR（サーバーサイドレンダリング）を無効にすると、クライアントサイドでのみ実行されるようになります。

load関数を常にサーバー上で実行する必要がある場合（例えば、プライベートな環境変数を使用する場合やデータベースにアクセスする場合）、それは+page.server.jsに配置すべきです。セキュリティや特定のリソースへのアクセスが必要な場合、load関数を+page.server.jsファイルに配置することで、確実にサーバーサイドでのみ実行されるようになります。

ブログ投稿のload関数のより現実的なバージョンとして、サーバー上でのみ実行され、データベースからデータを取得するものは、次のようになるかもしれません：

// src/routes/blog/[slug]/+page.server.js
import * as db from '$lib/server/database';

/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
	return {
		post: await db.getPost(params.slug)
	};
}

サーバーロード関数は追加の引数にアクセスできるため、型が PageLoad から PageServerLoad に変更されたことに注意してください。