ユーザーがページ間を移動すると、SvelteKit は `load` 関数を呼び出しますが、何か変更があったと判断した場合のみです。

この例では、タイムゾーン間を移動すると `src/routes/[...timezone]/+page.js` の `load` 関数が再実行されます。これは、`params.timezone` が無効になっているためです。ただし、`src/routes/+layout.js` の `load` 関数は再実行され*ません*。SvelteKit の観点からは、ナビゲーションによって無効化されなかったためです。

これを修正するには、URL を受け取り、それに依存する `load` 関数を再実行する `invalidate(...)` 関数を使用して手動で無効化します。 `src/routes/+layout.js` の `load` 関数は `fetch('/api/now')` を呼び出すため、`/api/now` に依存します。

`src/routes/[...timezone]/+page.svelte` に、1 秒に 1 回 `invalidate('/api/now')` を呼び出す `onMount` コールバックを追加します。

<script>
	import { onMount } from 'svelte';
	import { invalidate } from '$app/navigation';

	let { data } = $props();

	onMount(() => {
		const interval = setInterval(() => {
			invalidate('/api/now');
		}, 1000);

		return () => {
			clearInterval(interval);
		};
	});
</script>

<h1>
	{new Intl.DateTimeFormat([], {
		timeStyle: 'full',
		timeZone: data.timezone
	}).format(new Date(data.now))}
</h1>

特定の URL ではなくパターンに基づいて無効化したい場合は、`invalidate` に関数を渡すこともできます。