Cargando datos

Antes de poder renderizar un componente +page.svelte (y los componentes que lo contienen +layout.svelte), a menudo es necesario obtener algunos datos. Esto se hace definiendo funciones load.

+page.ts

• Un archivo +page.svelte puede tener un hermano +page.js que exporta una función load, cuyo valor de retorno está disponible para la página a través de la propiedad data
• Gracias al módulo $types generado, obtenemos seguridad de tipos completa.
• Una función load en un archivo +page.js se ejecuta tanto en el servidor como en el navegador (a menos que se combine con export const ssr = false, en cuyo caso solo se ejecutará en el navegador ).

+page.ts

src/routes/blog/[slug]/+page.ts

import type { PageLoad } from './$types';

export const load: PageLoad = ({ params }) => {
	return {
		post: {
			title: `Title for ${params.slug} goes here`,
			content: `Content for ${params.slug} goes here`
		}
	};
};

+page.svelte

src/routes/blog/[slug]/+page.svelte

<script lang="ts">
	import type { PageData } from './$types';

	export let data: PageData;
</script>

<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div>

+page.server.ts

• Una función load en un archivo +page.js se ejecuta tanto en el servidor como en el navegador (a menos que se combine con export const ssr = false, en cuyo caso solo se ejecutará en el navegador ).
• Si la función load siempre debe ejecutarse en el servidor (porque usa variables de entorno privadas, por ejemplo, o accede a una base de datos), entonces +page.server.js iría en su lugar.
• El tipo cambió de PageLoad a PageServerLoad, porque las funciones load del servidor pueden acceder a argumentos adicionales

Una versión más realista de la función load de una publicación de blog , que solo se ejecuta en el servidor y extrae datos de una base de datos, podría verse así:

src/routes/blog/[slug]/+page.server.ts

import * as db from '$lib/server/database';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params }) => {
	return {
		post: await db.getPost(params.slug)
	};
};