Why Page load functions (+page.js) in Svelte? - Purpose & Use Cases

The Big Idea

Discover how to make your pages load data instantly and effortlessly every time!

The Scenario

Imagine building a website where you have to fetch data every time a page loads by writing separate code in multiple places, like inside your components or even in the browser manually.

You might have to write repeated fetch calls and handle loading states yourself, scattered all over your app.

The Problem

This manual approach is slow and messy. You risk repeating code, causing bugs, and making your app harder to maintain.

Also, fetching data inside components can cause flickering or delays because the page renders before data arrives.

The Solution

Page load functions (+page.js) let you fetch data before the page renders, keeping your code organized and efficient.

This means your page shows complete data immediately, improving user experience and making your code cleaner.

Before vs After

✗ Before

import { onMount } from 'svelte';
onMount(() => { fetch('/api/data').then(res => res.json()).then(setData) })

✓ After

export async function load() { const data = await fetch('/api/data').then(r => r.json()); return { data } }

What It Enables

It enables smooth, fast page loads with data ready upfront, making your app feel professional and responsive.

Real Life Example

Think of an online store homepage that shows featured products immediately when you open it, without waiting for data to load after the page appears.

Key Takeaways

Manual data fetching on page load is repetitive and causes delays.

+page.js load functions fetch data before rendering, improving speed and code clarity.

This leads to better user experience and easier maintenance.