+page.js

Often, a page will need to load some data before it can be rendered. For this, we add a +page.js (or +page.ts, if you’re TypeScript-inclined) module that exports a load function:

// src/routes/blog/[slug]/+page.ts
import { error } from '@sveltejs/kit';
import type { PageLoad } from './$types';
 
export const load = (({ params }) => {
  if (params.slug === 'hello-world') {
    return {
      title: 'Hello world!',
      content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
    };
  }
 
  throw error(404, 'Not found');
}) satisfies PageLoad;

This function runs alongside +page.svelte, which means it runs on the server during server-side rendering and in the browser during client-side navigation. See load for full details of the API.

As well as load, +page.js can export values that configure the page’s behaviour:

  • export const prerender = true or false or 'auto'
  • export const ssr = true or false
  • export const csr = true or false

You can find more information about these in page options.

Backlinks