メインコンテンツへスキップ
高度なSvelteKit フック handle

SvelteKitはいくつかのフックを提供します。これらは、フレームワークのデフォルトの動作をインターセプトしてオーバーライドする方法です。

最も基本的なフックはhandleで、src/hooks.server.jsにあります。これはeventオブジェクトとresolve関数を取得し、Responseを返します。

resolveで魔法が起こります。SvelteKitは、着信リクエストURLをアプリのルートに一致させ、関連するコード（+page.server.jsおよび+page.svelteファイルなど）をインポートし、ルートに必要なデータをロードし、レスポンスを生成します。

デフォルトのhandleフックは次のようになります。

src/hooks.server
export async function handle({ event, resolve }) {
	return await resolve(event);
}

ページ（APIルートとは対照的に）の場合、transformPageChunkを使用して生成されたHTMLを変更できます。

src/hooks.server
export async function handle({ event, resolve }) {
	return await resolve(event, {
		transformPageChunk: ({ html }) => html.replace(
			'<body',
			'<body style="color: hotpink"'
		)
	});
}

完全に新しいルートを作成することもできます。

src/hooks.server
export async function handle({ event, resolve }) {
	if (event.url.pathname === '/ping') {
		return new Response('pong');
	}

	return await resolve(event, {
		transformPageChunk: ({ html }) => html.replace(
			'<body',
			'<body style="color: hotpink"'
		)
	});
}

GitHubでこのページを編集する

前へ 次へ
リダイレクト
1
2
<h1>hello world</h1>
<a href="/ping">ping</a>