---
url: >-
  https://lit-ui-router.dev/reference/lit-ui-router-ssr/client/functions/withServedRender.md
---
[lit-ui-router-ssr](../../index.md) / [client](../index.md) / withServedRender

# Function: withServedRender()

```ts
function withServedRender(Base): ServedUiViewConstructor & typeof UiView;
```

Defined in: [packages/lit-ui-router-ssr/src/served-view.ts:212](https://github.com/simshanith/lit-ui-router/blob/6e47ef8d8a4b24e99c074fb5c8c9cfaddfdb36a4/packages/lit-ui-router-ssr/src/served-view.ts#L212)

Adds the served-render side of `<ui-view>` to `Base`.

The result is still a `<ui-view>`: it extends the class it is given, so
`instanceof UiView` holds, an enclosing view adopts it as a parent, and the
`ui-view` tag map entry still describes it.

What it adds is the element's half of a prerendered page. The view sleeps
while `defer-hydration` is on it, rendering nothing and holding the nodes the
server drew. Removing the attribute wakes it: it re-seeks its router, so the
render it is about to make reads the settled registration, then requests
[adoptUiViewContext](../variables/adoptUiViewContext.md) once and calls the adopter it gets, first
handing core the element a routed class rendered on the server, so the
view adopts that element rather than building its own. With none, it
drops the held render and renders cold, warning in development. A view
detached before that wake update runs stays asleep, holding its nodes, until
it is attached again. Whatever the author wrote ahead of the held render is
the view's fallback set, taken at the wake and left standing where it is.
`renderLight()` answers the [uiViewSlot](../variables/uiViewSlot.md) part with `noChange`.

`lit-ui-router-ssr/register` applies it to core's `UiView` and defines the
`ui-view` tag with the result. Apply it by hand to put a served view under a
tag of your own, alongside `lit-ui-router/pure`, which registers nothing.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `Base` | *typeof* `UiView` | core's `UiView` |

## Returns

[`ServedUiViewConstructor`](../interfaces/ServedUiViewConstructor.md) & *typeof* `UiView`

the served class, branded

## Example

```ts
import { adoptServedElement, UiView } from 'lit-ui-router/pure';
import { withServedRender } from 'lit-ui-router-ssr/client';

customElements.define('app-view', withServedRender(UiView));
```