`definePageData`

Export a pageData constant using definePageData to fetch data server-side before the page renders:

import { definePageData } from '@beatzball/litro';

export const pageData = definePageData(async (event) => {
  const slug = event.context.params?.slug ?? '';
  const post = await fetchPostBySlug(slug);
  return { post };
});

The event parameter is an H3 H3Event. You can read URL params, headers, cookies, and request bodies.

How Data Flows

The page handler calls pageData.fetcher(event) before rendering.
The result is JSON-serialized and injected into the HTML as <script type="application/json" id="__litro_data__">.
During SSR, the data is passed as a .serverData property on the component so render() sees the real data immediately.
On the client, the router reads the JSON from the DOM on first load and sets this.serverData on the component instance before mounting.

Reading Server Data

Access server data via this.serverData in your component:

@customElement('page-blog-slug')
export class BlogSlugPage extends LitroPage {
  override render() {
    const data = this.serverData as { post: Post } | null;
    if (!data) return html`<p>Loading...</p>`;
    return html`<h1>${data.post.title}</h1>`;
  }
}

Error Handling

Throw an H3 error to return a 404 or other error status:

import { createError } from 'h3';

export const pageData = definePageData(async (event) => {
  const slug = event.context.params?.slug ?? '';
  const post = await fetchPost(slug);
  if (!post) throw createError({ statusCode: 404, message: 'Post not found' });
  return post;
});