Carregamento de Dados Exclusivo no Servidor

Às vezes você precisa de recursos que só existem no servidor: consultas a banco de dados, chaves de API privadas, acesso ao sistema de arquivos ou lógica de negócio sensível. O arquivo +page.server.js (ou +page.server.ts) fornece carregamento de dados exclusivo no servidor que nunca é executado no navegador.

A distinção em relação ao +page.js é absoluta, não uma convenção. Arquivos terminados em .server.js são excluídos do bundle do cliente em tempo de build. O Vite os remove fisicamente antes de enviar o JavaScript ao navegador. Isso significa que suas credenciais de banco de dados, chaves de API privadas e lógica de negócio interna não podem vazar para o cliente de forma alguma — elas simplesmente não fazem parte do bundle.

A consequência prática: em +page.server.js, você pode importar livremente de $lib/server/, usar $env/static/private, chamar cookies.get() e consultar seu banco de dados diretamente. Nada disso chega ao cliente. Os dados que você retorna cruzam a rede (serializados como JSON), mas o código que os produz permanece no servidor.

Se você não tem certeza se deve usar +page.js ou +page.server.js, escolha .server. Você sempre pode migrar para o carregamento universal depois, caso descubra que precisa de navegação instantânea no lado do cliente para aquela rota. Usar o carregamento exclusivo no servidor por padrão é a escolha mais segura.

Quando Usar o Carregamento Exclusivo no Servidor

Use +page.server.js quando precisar de:

Acesso ao banco de dados - Consultas diretas sem expor strings de conexão
Chaves de API privadas - Serviços de terceiros que exigem autenticação
Operações no sistema de arquivos - Leitura de arquivos em disco
Lógica de negócio sensível - Cálculos ou validações que você não quer expor
Acesso a cookies ou dados de sessão - Por meio dos objetos cookies e locals

Sua Primeira Função de Carregamento no Servidor

// src/routes/dashboard/+page.server.ts
import type { PageServerLoad } from './$types'
import { db } from '$lib/server/database'
import { PRIVATE_API_KEY } from '$env/static/private'

export const load: PageServerLoad = async ({ locals }) => {
	// This code NEVER runs in the browser
	// It's completely safe to use secrets here

	// Direct database access
	const user = await db.users.findUnique({
		where: { id: locals.userId }
	})

	// Private API calls
	const analyticsResponse = await fetch('https://api.analytics.com/data', {
		headers: {
			Authorization: `Bearer ${PRIVATE_API_KEY}`
		}
	})
	const analytics = await analyticsResponse.json()

	return {
		user: {
			name: user.name,
			email: user.email
			// Don't expose sensitive fields like passwordHash!
		},
		analytics
	}
}

Consumindo Dados em Componentes com Runes do Svelte 5

Quando seu +page.server.ts retorna dados, você os acessa no componente +page.svelte usando a rune $props(). Entender como lidar corretamente com esses dados no sistema de reatividade do Svelte 5 é fundamental.

<!-- src/routes/dashboard/+page.svelte -->
<script lang="ts">
	import type { PageProps } from './$types'

	// PageProps automatically types both 'data' and 'form'
	let { data }: PageProps = $props()
</script>

<h1>Welcome, {data.user.name}</h1>

Por que a Reatividade Importa

O Padrão de Reutilização de Componentes

O SvelteKit reutiliza componentes de página durante a navegação no lado do cliente, em vez de destruí-los e recriá-los. Quando você navega de /dashboard para /dashboard?filter=active, ou de /blog/post-a para /blog/post-b se eles compartilham o mesmo layout, o componente permanece montado e apenas a prop data é atualizada com os novos valores.

Isso é intencional e benéfico — evita oscilações no layout, mantém as animações fluidas e preserva o estado local, como a posição de rolagem e dropdowns abertos. Mas tem uma consequência importante: quaisquer valores computados derivados de data devem ser reativos, caso contrário exibirão dados desatualizados após a navegação.

No Svelte 5, valores computados a partir de props que precisam se manter atualizados pertencem ao $derived(). Atribuições simples de variáveis são executadas uma única vez na criação do componente e não são atualizadas quando as props mudam:

<!-- AVOID: Plain assignment runs once on component creation.
     After client-side navigation updates data, these values stay stale. -->
<script lang="ts">
	import type { PageProps } from './$types'

	let { data }: PageProps = $props()

	const postCount = data.posts.length // frozen at mount
	const featuredPost = data.posts.find((p) => p.featured) // frozen at mount
</script>

<!-- PREFERRED: $derived recomputes whenever data changes, including during navigation. -->
<script lang="ts">
	import type { PageProps } from './$types'

	let { data }: PageProps = $props()

	let postCount = $derived(data.posts.length)
	let featuredPost = $derived(data.posts.find((p) => p.featured))
	let hasMultiplePosts = $derived(postCount > 1)
	let featuredTitle = $derived(featuredPost?.title ?? 'No featured post')
</script>

<h1>Blog ({postCount} posts)</h1>

{#if featuredPost}
	<article class="featured">
		<h2>{featuredTitle}</h2>
	</article>
{/if}

{#if hasMultiplePosts}
	<p>Browse our collection of articles</p>
{/if}

Se um valor é calculado a partir de data (ou qualquer prop), envolva-o em $derived(). Isso garante que sua UI permaneça sincronizada durante a navegação.

Principais Diferenças em Relação ao `+page.js`

Recurso	`+page.js`	`+page.server.js`
Executa no servidor	Sim (inicial)	Sim (sempre)
Executa no navegador	Sim (navegação)	Nunca
Acesso ao banco de dados	Não	Sim
Variáveis de ambiente privadas	Não	Sim
Acesso ao sistema de arquivos	Não	Sim
Acesso a `cookies`	Não	Sim
Acesso a `locals`	Não	Sim
Navegação no lado do cliente	Instantânea (cache)	Requer servidor

Parâmetros Exclusivos do Servidor

A função de carregamento em +page.server.js tem acesso a parâmetros adicionais exclusivos do servidor:

export const load: PageServerLoad = async ({
	params, // Route parameters
	url, // URL object
	fetch, // Server-side fetch with special powers
	cookies, // Read and write cookies
	locals, // Data from hooks.server.ts
	request, // The original Request object
	platform, // Platform-specific context (Vercel, Cloudflare, etc.)
	setHeaders // Set response headers
}) => {
	// Your server-only logic
}

Trabalhando com Cookies

Cookies são pequenos fragmentos de dados armazenados pelo navegador e enviados a cada requisição para o seu servidor. São comumente usados para autenticação (sessões), preferências do usuário e informações de rastreamento que precisam persistir entre requisições ou entre sessões do navegador.

No SvelteKit, você só pode ler e escrever cookies em código do lado do servidor — como +page.server.ts, +layout.server.ts ou arquivos de endpoint — pois os cookies fazem parte do ciclo de requisição/resposta HTTP.

// src/routes/dashboard/+page.server.ts
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ cookies }) => {
	// Read a cookie
	const sessionId = cookies.get('session')

	// Validate session and get user
	const user = await validateSession(sessionId)

	return { user }
}

Ao definir cookies, use as opções httpOnly, secure e sameSite para aumentar a segurança. Por exemplo, httpOnly impede que o JavaScript acesse o cookie, reduzindo o risco de ataques XSS.

Usando `locals` a Partir dos Hooks

O objeto locals é populado no seu arquivo hooks.server.ts e está disponível em todas as funções de carregamento do servidor. Este é o padrão recomendado para compartilhar dados, como informações do usuário autenticado, em toda a sua aplicação.

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit'
import { getUserFromSession } from '$lib/server/auth'

export const handle: Handle = async ({ event, resolve }) => {
	// Populate locals with user data - runs on every request
	const session = event.cookies.get('session')
	event.locals.user = await getUserFromSession(session)

	return resolve(event)
}

// src/routes/profile/+page.server.ts
import type { PageServerLoad } from './$types'
import { redirect } from '@sveltejs/kit'

export const load: PageServerLoad = async ({ locals }) => {
	// Access the user set in hooks
	if (!locals.user) {
		redirect(303, '/login')
	}

	return {
		user: locals.user
	}
}

Guards de Autenticação Reutilizáveis com `getRequestEvent`

Em aplicações maiores, você vai querer uma lógica de autenticação reutilizável. A função getRequestEvent (de $app/server) permite acessar a requisição atual de qualquer lugar no seu código do servidor:

// src/lib/server/auth.ts
import { redirect } from '@sveltejs/kit'
import { getRequestEvent } from '$app/server'

/**
 * Reusable auth guard - call from any server load function or form action.
 * Redirects to login if user is not authenticated.
 * @returns The authenticated user (guaranteed non-null)
 */
export function requireAuth() {
	const { locals, url } = getRequestEvent()

	if (!locals.user) {
		// Preserve intended destination for post-login redirect
		const redirectTo = url.pathname + url.search
		const params = new URLSearchParams({ redirectTo })
		redirect(303, `/login?${params}`)
	}

	return locals.user
}

/**
 * Check if user has a specific role
 */
export function requireRole(role: 'admin' | 'editor' | 'user') {
	const user = requireAuth() // First ensure they're logged in

	if (user.role !== role && user.role !== 'admin') {
		redirect(303, '/unauthorized')
	}

	return user
}

Agora suas funções de carregamento ficam limpas e declarativas:

// src/routes/admin/+page.server.ts
import type { PageServerLoad } from './$types'
import { requireRole } from '$lib/server/auth'
import { db } from '$lib/server/database'

export const load: PageServerLoad = async () => {
	// Throws redirect if not admin - no need to check return value
	const admin = requireRole('admin')

	// If we reach here, user is guaranteed to be an admin
	const stats = await db.getAdminStats()

	return {
		admin: { name: admin.name, email: admin.email },
		stats
	}
}

O Requisito de Serialização

Os dados retornados pelo +page.server.js precisam trafegar do servidor para o cliente pela rede. O código permanece no servidor, mas os dados devem ser serializáveis — conversíveis para um formato que possa ser incorporado no HTML ou enviado como JSON e depois reconstruído no navegador.

É por isso que você não pode retornar funções de uma função de carregamento no servidor. Uma função é código executável; ela não pode ser serializada em bytes que trafegam via HTTP e reconstruída do outro lado. Retorne o resultado de chamar funções, não as funções em si.

// AVOID Functions can't be serialized
export const load: PageServerLoad = async () => {
	return {
		calculateTotal: (items) => items.reduce((a, b) => a + b, 0)
	}
}

// PREFERRED: Return data, not functions
export const load: PageServerLoad = async () => {
	const items = await getItems()
	return {
		items,
		total: items.reduce((a, b) => a + b.price, 0)
	}
}

O que Pode Ser Serializado?

O SvelteKit usa o devalue para serialização, que suporta mais do que JSON simples:

Tipo/Recurso	Serializável?	Observações
Strings, números, booleanos, null, undefined	Sim	Primitivos básicos
Arrays, objetos simples (aninhados)	Sim	Suporta aninhamento profundo
Datas (objetos Date)	Sim	Datas são preservadas como objetos Date
Maps, Sets	Sim	Suportados
BigInt	Sim	Suportado
Expressões regulares	Sim	Suportadas
Referências repetidas/cíclicas	Sim	Suportadas
Funções	Não	Não serializável
Classes com métodos	Não	Apenas dados simples sobrevivem
Symbols	Não	Não serializável

Serialização de Tipos Customizados com `transport`

Para classes customizadas (como Decimal para cálculos financeiros), use o hook transport:

// src/hooks.ts
import type { Transport } from '@sveltejs/kit'
import { Decimal } from 'decimal.js'

export const transport: Transport = {
	Decimal: {
		// encode runs on the server - return false/null/undefined to skip
		encode: (value) => value instanceof Decimal && value.toString(),
		// decode runs on the client - reconstruct the instance
		decode: (str) => new Decimal(str)
	}
}

Agora você pode retornar instâncias de Decimal das suas funções de carregamento:

// src/routes/invoice/+page.server.ts
export const load: PageServerLoad = async ({ params }) => {
	const invoice = await db.invoices.findUnique({ where: { id: params.id } })

	return {
		invoice: {
			...invoice,
			// This Decimal instance will survive the server→client journey
			total: new Decimal(invoice.total)
		}
	}
}

Streaming com Promises

Se você tem dados que demoram para carregar e não são essenciais para a renderização inicial da página, você pode transmiti-los ao navegador via streaming. Ao retornar a promise sem aguardá-la, o SvelteKit renderizará o conteúdo principal imediatamente e carregará os dados lentos em segundo plano.

// src/routes/dashboard/+page.server.ts
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ locals }) => {
	// Fast, critical data - AWAIT this
	const user = await db.users.findUnique({
		where: { id: locals.userId }
	})

	// Slow, non-critical data - DON'T await, let it stream
	const analyticsPromise = fetchSlowAnalytics(locals.userId)
	const recommendationsPromise = generateRecommendations(locals.userId)

	return {
		user, // Available immediately
		analytics: analyticsPromise, // Streams in later
		recommendations: recommendationsPromise // Streams in later
	}
}

Trate os dados transmitidos via streaming no seu componente com {#await}:

<!-- src/routes/dashboard/+page.svelte -->
<script lang="ts">
	import type { PageProps } from './$types'

	let { data }: PageProps = $props()
</script>

<!-- This renders immediately -->
<h1>Welcome back, {data.user.name}</h1>

<!-- Analytics streams in with loading state -->
<section class="analytics">
	{#await data.analytics}
		<div class="skeleton">
			<p>Loading analytics...</p>
		</div>
	{:then analytics}
		<h2>Your Stats</h2>
		<p>Page views: {analytics.pageViews}</p>
		<p>Conversions: {analytics.conversions}</p>
	{:catch error}
		<div class="error">
			<p>Failed to load analytics: {error.message}</p>
		</div>
	{/await}
</section>

O streaming é excelente para dashboards, análises e conteúdo secundário. O usuário vê o layout da página imediatamente enquanto os dados mais lentos são carregados progressivamente.

Combinando com `+page.js`

Você pode ter tanto +page.js quanto +page.server.js para a mesma rota. Quando isso acontece:

+page.server.js é executado primeiro (no servidor)
Os dados retornados ficam disponíveis para +page.js como a propriedade data
+page.js pode transformar ou adicionar a esses dados

// src/routes/blog/+page.server.ts
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async () => {
	const posts = await db.posts.findMany()
	return { posts }
}

// src/routes/blog/+page.ts
import type { PageLoad } from './$types'

export const load: PageLoad = async ({ data }) => {
	// `data` contains { posts } from +page.server.ts

	return {
		posts: data.posts,
		// Add client-side only data
		viewedAt: new Date().toISOString(),
		// Or transform the data
		postCount: data.posts.length
	}
}

Acessando Dados da Página de Qualquer Lugar com `$app/state`

O objeto page do $app/state fornece uma store global e reativa contendo todos os dados retornados da sua página atual e layouts, bem como a URL atual e o estado de navegação. Isso significa que qualquer componente pode acessar dados atualizados da página sem precisar passar props por toda a hierarquia.

<!-- src/lib/components/UserBadge.svelte -->
<script lang="ts">
	import { page } from '$app/state'

	// Access combined data from all layouts and current page
	// IMPORTANT: Use $derived since page is reactive
	let userName = $derived(page.data.user?.name ?? 'Guest')
	let isAdmin = $derived(page.data.user?.role === 'admin')
</script>

<div class="badge">
	<span>{userName}</span>
	{#if isAdmin}
		<span class="admin-badge">Admin</span>
	{/if}
</div>

As alterações em page só são reativas quando acessadas por meio de $derived(). Sempre use runes para reatividade com o objeto page.

Actions de Formulário: Tratando Requisições POST

+page.server.js também pode exportar actions para tratar envios de formulário. Esta é a abordagem recomendada pelo SvelteKit para mutações (criação, atualização e exclusão de dados).

// src/routes/contact/+page.server.ts
import type { Actions, PageServerLoad } from './$types'
import { fail } from '@sveltejs/kit'
import { db } from '$lib/server/database'

export const actions: Actions = {
	default: async ({ request }) => {
		const formData = await request.formData()
		const email = formData.get('email')
		const message = formData.get('message')

		// Validate
		if (!email) {
			return fail(400, {
				error: 'Email is required',
				email: '',
				message: message?.toString() ?? ''
			})
		}

		if (!message) {
			return fail(400, {
				error: 'Message is required',
				email: email.toString(),
				message: ''
			})
		}

		// Save to database
		await db.messages.create({
			data: {
				email: email.toString(),
				message: message.toString()
			}
		})

		return { success: true }
	}
}

Aprimoramento Progressivo com `use:enhance`

Os formulários do SvelteKit funcionam sem JavaScript, mas você pode aprimorá-los progressivamente para uma melhor experiência do usuário. A action use:enhance evita recarregamentos completos da página enquanto mantém todos os benefícios da validação no servidor.

<!-- src/routes/contact/+page.svelte -->
<script lang="ts">
	import type { PageProps } from './$types'
	import { enhance } from '$app/forms'

	let { form }: PageProps = $props()

	// Local UI state for submission feedback
	let isSubmitting = $state(false)

	// Derived values for cleaner template logic
	let hasError = $derived(!!form?.error)
	let wasSuccessful = $derived(!!form?.success)
</script>

{#if wasSuccessful}
	<div class="success" role="alert">
		<p>✓ Message sent successfully!</p>
	</div>
{/if}

{#if hasError}
	<div class="error" role="alert">
		<p>✗ {form.error}</p>
	</div>
{/if}

<form
	method="POST"
	use:enhance={() => {
		isSubmitting = true

		return async ({ update }) => {
			await update()
			isSubmitting = false
		}
	}}
>
	<div class="field">
		<label for="email">Email</label>
		<input
			id="email"
			name="email"
			type="email"
			value={form?.email ?? ''}
			disabled={isSubmitting}
			required
		/>
	</div>

	<div class="field">
		<label for="message">Message</label>
		<textarea id="message" name="message" disabled={isSubmitting} required
			>{form?.message ?? ''}</textarea
		>
	</div>

	<button type="submit" disabled={isSubmitting}>
		{#if isSubmitting}
			Sending...
		{:else}
			Send Message
		{/if}
	</button>
</form>

<style>
	.success {
		padding: 1rem;
		background: #d4edda;
		border: 1px solid #c3e6cb;
		border-radius: 4px;
		color: #155724;
	}

	.error {
		padding: 1rem;
		background: #f8d7da;
		border: 1px solid #f5c6cb;
		border-radius: 4px;
		color: #721c24;
	}

	button:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}
</style>

Actions Nomeadas

Quando sua página precisa suportar múltiplos tipos de envio de formulário, você pode definir actions nomeadas. Cada action nomeada é uma função identificada pelo seu nome, e você as referencia no formulário usando o atributo action.

// src/routes/posts/[id]/+page.server.ts
import type { Actions } from './$types'
import { db } from '$lib/server/database'
import { redirect } from '@sveltejs/kit'

export const actions: Actions = {
	update: async ({ params, request }) => {
		const formData = await request.formData()
		await db.posts.update({
			where: { id: params.id },
			data: { title: formData.get('title')?.toString() }
		})
		return { success: true }
	},

	delete: async ({ params }) => {
		await db.posts.delete({ where: { id: params.id } })
		redirect(303, '/posts')
	}
}

<!-- src/routes/posts/[id]/+page.svelte -->
<script lang="ts">
	import type { PageProps } from './$types'
	import { enhance } from '$app/forms'

	let { data }: PageProps = $props()
</script>

<!-- Edit form targets the 'update' action -->
<form method="POST" action="?/update" use:enhance>
	<input name="title" value={data.post.title} />
	<button type="submit">Save</button>
</form>

<!-- Delete form targets the 'delete' action -->
<form method="POST" action="?/delete" use:enhance>
	<button type="submit">Delete Post</button>
</form>

Use actions nomeadas para qualquer página com mais de um formulário ou tipo de mutação. Isso mantém seu código organizado e explícito.

Boas Práticas de Segurança

Não Exponha Dados Sensíveis

Seja sempre intencional sobre o que você envia ao cliente. Expor acidentalmente campos sensíveis é um risco de segurança comum e grave.

// AVOID: Exposing the entire user object
export const load: PageServerLoad = async ({ locals }) => {
	const user = await db.users.findUnique({
		where: { id: locals.userId }
	})
	return { user } // Includes passwordHash, internalNotes, etc!
}

// PREFERRED: Explicitly select only what the client needs
export const load: PageServerLoad = async ({ locals }) => {
	const user = await db.users.findUnique({
		where: { id: locals.userId },
		select: {
			id: true,
			name: true,
			email: true,
			avatar: true
		}
	})
	return { user }
}

Valide as Permissões do Usuário

Sempre aplique verificações de autenticação e autorização no servidor. Verificações no lado do cliente podem ser contornadas.

import { error, redirect } from '@sveltejs/kit'

export const load: PageServerLoad = async ({ locals, params }) => {
	// Check authentication
	if (!locals.user) {
		redirect(303, '/login')
	}

	// Fetch the resource
	const post = await db.posts.findUnique({
		where: { id: params.id }
	})

	// Check it exists
	if (!post) {
		error(404, 'Post not found')
	}

	// Check authorization
	if (post.authorId !== locals.user.id && locals.user.role !== 'admin') {
		error(403, 'You do not have permission to view this post')
	}

	return { post }
}

Tratamento de Erros com Segurança de Tipos

Defina os formatos dos seus erros em src/app.d.ts para segurança de tipos e consistência:

// src/app.d.ts
declare global {
	namespace App {
		interface Error {
			message: string
			code?: string
			details?: Record<string, string>
		}
		interface Locals {
			user?: {
				id: string
				name: string
				email: string
				role: 'admin' | 'editor' | 'user'
			}
		}
	}
}

export {}

Quando Escolher Cada Um

Use `+page.js` quando...	Use `+page.server.js` quando...
Os dados vêm de APIs públicas	Você precisa de acesso ao banco de dados
Não há segredos envolvidos	Você usa chaves de API privadas
Você quer navegação instantânea no cliente	Os dados devem permanecer no servidor
Os dados podem ser expostos com segurança	Você tem lógica de negócio sensível
Você precisa de APIs exclusivas do navegador	Você precisa de cookies ou dados de sessão

Conclusão

O arquivo +page.server.js é a fronteira de segurança do SvelteKit — onde operações sensíveis permanecem com segurança no servidor, nunca expostas ao navegador. Ao executar funções de carregamento exclusivamente no servidor durante tanto o SSR quanto a navegação no lado do cliente, ele permite acesso direto ao banco de dados, chaves de API privadas e lógica de negócio que deve permanecer confidencial.

Esse modelo de execução exclusiva no servidor transforma o carregamento de dados de uma preocupação de segurança em uma conveniência de desenvolvimento, permitindo que você escreva consultas de banco de dados e chamadas de API simples sem se preocupar com a exposição de credenciais.

Dominar o +page.server.js significa entender o conjunto completo de ferramentas do servidor: acessar cookies para autenticação, aproveitar locals para dados com escopo de requisição, transmitir promises para renderização progressiva e combinar funções de carregamento com actions de formulário para operações CRUD completas. Quando combinado com reatividade adequada usando $derived() para valores computados e $state() para estado de componente, os dados carregados no servidor fluem naturalmente durante a navegação, mantendo as garantias de segurança que protegem sua aplicação.

A chave está em saber quando usar carregamento exclusivo no servidor versus carregamento universal — use +page.server.js quando segurança ou APIs específicas do servidor estiverem envolvidas, e +page.js quando quiser navegação instantânea no cliente com dados públicos.

Principais Conclusões

+page.server.js fornece carregamento de dados exclusivo no servidor que nunca é executado no navegador, ideal para acesso ao banco de dados, chaves de API privadas e lógica de negócio sensível
Use $derived() para valores computados a partir de props data para manter a reatividade durante a navegação no lado do cliente no Svelte 5
Use $state() para estado local do componente como indicadores de carregamento, valores de formulário ou alternâncias de UI que não vêm do servidor
getRequestEvent() habilita guardas de autenticação reutilizáveis e lógica de servidor compartilhada ao fornecer acesso a cookies, locals e contexto de requisição de qualquer lugar
Os dados devem ser serializáveis - apenas tipos compatíveis com JSON; use o hook transport para personalizar a serialização de Dates, Maps ou classes personalizadas
O streaming de promises permite renderização progressiva - retorne promises diretamente do load para renderizar o esqueleto da página imediatamente enquanto dados lentos carregam em segundo plano
Actions de formulário com use:enhance fornecem aprimoramento progressivo para mutações, funcionando sem JavaScript enquanto se comportam como interações de SPA
$app/state fornece acesso a dados em qualquer lugar - leia dados da página em qualquer componente sem passar props por toda a hierarquia usando a rune page

Veja Também

Documentação Oficial do SvelteKit - +page.server.js
Form Actions - Tratamento de formulários no servidor
cookies - Sessão e autenticação
Contexto da Função de Carregamento - Entendendo locals, params, platform
Streaming com Promises - Padrões de renderização progressiva
getRequestEvent() - Acessando o contexto de requisição