Skip to main content
Basic Svelte
Introduction
Reactivity
Props
Logic
Events
Bindings
Classes and styles
Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion

event オブジェクトは標準の Fetch API のように振る舞う fetch メソッドを持っていますが、以下のスーパーパワーを備えています:

  • 受け取ったリクエストから cookieauthorization を継承するので、サーバー上で認証付きのリクエストを行うことができます
  • サーバー上で相対リクエストを行うことができます (通常、fetch をサーバーで使用する場合はオリジンを持つ URL が必要です)
  • 内部リクエスト (例えば +server.js ルートに対するリクエスト) は、サーバー上で実行される場合は直接ハンドラ関数を呼び出すため、HTTP 呼び出しのオーバーヘッドがありません

この動作は handleFetch hook で変更することができます。デフォルトではこのようになります:

src/hooks.server
export async function handleFetch({ event, request, fetch }) {
	return await fetch(request);
}

例えば、src/routes/a/+server.js に対するリクエストに対し、代わりに src/routes/b/+server.js のレスポンスを返すことができます:

src/hooks.server
export async function handleFetch({ event, request, fetch }) {
	const url = new URL(request.url);
	if (url.pathname === '/a') {
		return await fetch('/b');
	}

	return await fetch(request);
}

後に、universal load 関数を学習するとき、event.fetch はブラウザでも呼び出せることを学びます。ブラウザからリクエストするときは https://api.yourapp.com のようなパブリックな URL で、それをサーバー上で実行するときは内部 URL にリダイレクトしたいとき (API サーバーとパブリックなインターネットの間にあるロードバランサーやプロキシーをバイパスしたいとき)、handleFetch はとても有用です。

Edit this page on GitHub

1
2
3
4
5
<script>
	let { data } = $props();
</script>
 
<h1>{data.message}</h1>