link, preload

preload

data-sveltekit-preload-data

• 링크 data 요청

"off" - 링크(data) 요청 안함
"hover" - 링크에 마우스 호버 시 링크(data) 요청
"tap" - 링크를 탭하거나 클릭할 때만 시 링크(data) 요청

data-sveltekit-preload-code

• 코드만 사전 요청

"eager" - 링크가 바로 로드
"viewport" 뷰포트에 들어 가면 요청 - 뷰 부분이 보여질 때만 요청
"hover" - 링크에 마우스 호버 시 링크(data) 요청
"tap" - 링크를 탭하거나 클릭할 때만 시 링크(data) 요청

data-sveltekit-reload

<a data-sveltekit-reload href="/path">Path</a>

data-sveltekit-noscroll

• 링크 전환 시 자동으로 상단으로 스크롤 되지 않음

data-sveltekit-replacestate

data-sveltekit-keepfocus

Preload Programmatically

• 이벤트로 사용 가능 한 사전 로드 링크 전환

+page.svelte

<script>
	import {
		goto,
		preloadData,
		beforeNavigate,
		afterNavigate,
	} from '$app/navigation';

	const handleClick = () => {
		console.log('1');
		goto('/products', { replaceState: true });
	};

	beforeNavigate(navigation => {
		console.log({ before: navigation });
	});
	afterNavigate(navigation => {
		console.log({ after: navigation });
	});
</script>

<style>
</style>

<a href="/first" class="border m-2">first</a>
<a href="/products" class="border m-2">products</a>

<button on:click="{handleClick}" class="border m-2">place order</button>

<button
	on:mouseover="{async () => {
		await preloadData('/products');
	}}"
	class="border m-2">place order- preloadData</button
>

<button
	on:mouseover="{async () => {
		await preloadCode('/products');
	}}"
	class="border m-2">place order- preloadCode</button
>