# Preload & navigate

Seed a route's named query from its loader so navigation is local-first: present rows enter immediately, the server subscription revalidates in the background, and extra queries ride into the SSR first paint without blocking.

A route declares its data intent with `rindle.loader({ query, ssr, until })`. `query` is preloaded
and retained, so a locally-present view enters **immediately** on navigation and its server-authority
subscription revalidates in the background. `ssr` names extra queries that belong in the server-rendered
first paint but must **not** block a client-side navigation. `until: "present"` commits the navigation
as soon as usable rows exist rather than waiting for the authoritative read.

## In the wild — tantaman.github.io

The article route preloads the post for instant navigation and folds its comments into the first
paint only:

```tsx
// src/routes/_shell.$slug.tsx
export const Route = createFileRoute("/_shell/$slug")({
  loader: rindle.loader({
    // TanStack intent-preload and click navigation share this retain. A locally present article can
    // enter immediately; Rindle keeps its server-authority revalidation alive in the background.
    query: ({ params }) => postQuery(params.slug),
    // Comments belong in the server-rendered first paint, but do not block client navigation.
    ssr: ({ params }) => [
      postCommentsQuery({ postId: params.slug, limit: POST_COMMENTS_PAGE_SIZE }),
    ],
    until: "present",
  }),
  component: PostView,
});
```

*[`rindle-site/src/routes/_shell.$slug.tsx` L25–37](https://github.com/tantaman/tantaman.github.io/blob/5889c6d72add4bd2825230223130fe896ceac4e3/rindle-site/src/routes/_shell.%24slug.tsx#L25-L37) · tantaman.github.io*

A loader can seed several named queries at once — the blog index primes both the page and the
featured list:

```tsx
// src/routes/_shell.index.tsx
export const Route = createFileRoute("/_shell/")({
  loader: rindle.loader({
    query: () => [postsQuery({ limit: POSTS_PAGE_SIZE }), featuredPostsQuery({})],
  }),
  component: Home,
});
```

*[`rindle-site/src/routes/_shell.index.tsx` L16–21](https://github.com/tantaman/tantaman.github.io/blob/5889c6d72add4bd2825230223130fe896ceac4e3/rindle-site/src/routes/_shell.index.tsx#L16-L21) · tantaman.github.io*

## See also

- [TanStack Start](/docs/tanstack) — the adapter behind `rindle.loader` and `rindle.Provider`.
- [Server rendering](/docs/ssr) — where the `ssr` queries are read and dehydrated.

---

[View this page on Rindle](https://rindle.sh/docs/preloads)