---
title: Data that arrives in the same response
description: Load page data with an async computed value inside @try, and the server sends it in the same response.
sidebar: { label: Data loading }
---

Last page, a click asked the server for the next page. So what happens when that page waits for slow data?

There is no special loader function. A page loads data the way any component does: an async `computed()` inside `@try`.

Think of a restaurant that brings your bread first. The main dish comes later, to the same table. This is an analogy.

Press **Next** to step through one page load.

<AppStreamFigure />

Notice that the data comes in the same response. The browser makes no second request.

## The code

```tsrx pages/feed.tsrx
import { computed } from '@markless/core';
import type { PageProps } from '@markless/router';
import { slowGreeting } from '../lib/slow.ts';

export default function Feed({ url }: PageProps) @{
	const data = computed(async () => slowGreeting(url.pathname));

	<main>
		<h1>Feed</h1>
		@try {
			<p>{data.text}</p>
		} @pending {
			<p>Loading...</p>
		} @catch {
			<p>Failed</p>
		}
	</main>
}
```

If `slowGreeting` is slow, one response comes in two parts:

1. The heading and the `@pending` content come first.
2. When the data is ready, the same response adds the `@try` content. The page puts it in place, and the response ends.

If the data is ready quickly, the server puts it in the first part. You turn nothing on.

:::warning[Why does fetch fail on the server?]
On the server, `fetch` needs a full URL. Build it from the `url.href` prop, not from a path like `/api/feed`.
:::

:::tip[Can the server wait for all the data first?]
Not with `router()`. It has no option for that. A slow `@try` always sends `@pending` first.
:::

For the rules of async values, see [Async](/state/async).

**Coming from another framework?**

The router has no `loader` or `action` export. A page gets only `params`, `url`, and `status` as props. Data comes from async values in the page, and slow parts stream in the same response.

**Next:** What if the data comes from your own server? [API routes →](/apps/api-routes)