Page Load Functions

export const load = async ({ fetch }) => ({ items: await fetch("/api/items") });

// Topic: Page Load Functions
const route = { ssr: true, dataLoaded: true };
console.log(route.ssr && route.dataLoaded ? 'route ready' : 'loading');

// Expected Output: route ready

route ready

• 1Page Load Functions relies on route load functions that prepare serializable page data for this page, load, functions lesson.
• 2Keep universal and server-only loading responsibilities explicit. Keep decisions specific to page, load, functions.
• 3Its main failure mode is Returning non-serializable data or leaking secrets into universal load exposes failures. Do not copy assumptions from a neighboring topic into page, load, functions.
• 4Useful evidence is data freshness and serialization safety measured for page, load, functions.

• 1Identify the owning component, store, action, route, load function, or server handler.
• 2Keep state local until multiple owners genuinely need it.
• 3Keep server secrets and validation outside browser components.
• 4Define cleanup for subscriptions, actions, timers, and requests.

• 1Test SSR, navigation, params, parent data, errors, and invalidation. Include an assertion that directly exercises page, load, functions.
• 2Check initial render, assignment-driven updates, user interaction, and cleanup.
• 3Confirm keyboard and screen-reader behavior for visible UI.
• 4Measure production output only after correctness passes.

• 1Build the smallest Page Load Functions example.
• 2Introduce this failure: Returning non-serializable data or leaking secrets into universal load exposes failures. Do not copy assumptions from a neighboring topic into page, load, functions.
• 3Correct it using this rule: Keep universal and server-only loading responsibilities explicit. Keep decisions specific to page, load, functions.
• 4Record data freshness and serialization safety measured for page, load, functions before and after the change.