Jika kita terbiasa membuat aplikasi khusus klien, manajemen status dalam aplikasi yang mencakup server dan klien mungkin tampak menakutkan. Bagian ini memberikan kiat untuk menghindari beberapa masalah umum.

Tidak ada efek samping dalam pemuatan

Untuk alasan yang sama, fungsi pemuatan kita harus murni, tidak ada efek samping (kecuali mungkin sesekali console.log(…)). Sebagai contoh, kita mungkin tergoda untuk menyimpan data ke sebuah store di dalam fungsi load agar kita dapat menggunakan nilai store tersebut di dalam komponen kita:

// @filename: src/routes/+page.server.ts
// @noErrors
import { user } from '$lib/user'
import type { PageLoad } from './$types'

export const load: PageLoad = async ({ fetch }) => {
  const response = await fetch('/api/user')
  // Jangan pernah lakukan ini
  user.set(await response.json())
}

pada contoh diatas, hal ini akan menyimpan informasi satu pengguna di tempat yang digunakan bersama oleh semua pengguna. Sebagai gantinya, kembalikan saja data tersebut. dan berikan ke komponen yang membutuhkannya, atau gunakan $page.data.

Jika kita tidak menggunakan SSR, maka tidak ada risiko secara tidak sengaja mengekspos data satu pengguna ke pengguna lain. Namun kita tetap harus menghindari efek samping dalam fungsi pemuatan kita - aplikasi kita akan lebih mudah dipahami tanpa efek samping tersebut

Menggunakan stores dengan context

kita mungkin bertanya-tanya bagaimana kita dapat menggunakan $page.data dan $app/stores jika kita tidak dapat menggunakan $app/stores kita sendiri. Jawabannya adalah gunakan Context. stores dilampirkan di layout lalu simpan data ke setContext, dan ketika kita subscribe, kita mengambilnya dengan getContext. berikut contohnya:

// @filename: src/routes/(state)/store.ts
// @noErrors
import { writable } from 'svelte/store'
export const quotes = writable()

// @filename: src/routes/(state)/+layout.server.ts
// @noErrors
import type { LayoutServerLoad } from './$types'

export const load: LayoutServerLoad = async ({ fetch }) => {
  const res = await fetch('https://dummyjson.com/quotes?limit=5', { method: 'GET' })
  const dataJson = await res.json()

  return dataJson
}

<!-- @filename: src/routes/(state)/+layout.svelte -->
<script lang="ts">
	import { setContext, getContext } from 'svelte';
	import type { LayoutData } from './$types';
	import { quotes } from './store';

	export let data: LayoutData;
	$: quotes.set(data.quotes);
	setContext('quotes', quotes);
</script>

<!-- @filename: src/routes/(state)/+page.svelte -->
<script lang="ts">
	import { getContext } from 'svelte';

	const quote: any = getContext('quotes');
</script>

<div>
	{#each $quote as item}
		{item.quote}
	{/each}
</div>