# Data Loading

> 

Vuloom has two loading layers.

## App shell data: `app/loader.ts`

Use `app/loader.ts` for request-aware data needed by the document shell:

- theme
- locale
- session snapshot
- shell navigation data

Read it with `useAppData()`.

## Route data: `app/pages/**/loader.ts`

Use route loaders for page and layout data.

```ts
export async function loader({ params }: { params: Record<string, string> }) {
  return {
    slug: params.slug
  };
}
```

Read route data with:

- `useLoaderData()` for the current matched node
- `useRouteLoaderData(routeId)` for an explicit route id

## Generated typing

`vuloom prepare` generates route registries in `.vuloom/types/`.

That lets these APIs infer data by route id:

```ts
const blogData = useRouteLoaderData('blog/[slug]/page')
const appData = useAppData()
```