---
title: Zone
description: Define part of a view that can refresh on its own.
---

A zone defines a named part of a view that the client can request again without a
request for the complete view. Use it for content that changes independently.

The zone name must be unique in its view. It can contain letters, numbers,
underscores, and hyphens. A zone cannot contain another zone.

## API

```ts
zone(name, resolver)
zone(name, atoms, resolver)
```

The resolver can be synchronous or asynchronous. It returns one block or an
array of blocks. Backlit adds the current resource and view address to the
protocol output.

Register filters, a paginator, or a sorter in `atoms`. Read `ctx.parse(zone)`
and place bindings from `zone.state`. See [Search state](/reference/state).

## Basic zone

Pass a unique name and a resolver that produces the zone content.

<BacklitExample path="zone/basic" view="overview" />

## Async content

Use an async resolver when the zone must fetch or compute its content.

<BacklitExample path="zone/async_content" view="overview" />

## Multiple content items

Return an array when one zone must refresh several related blocks together.

<BacklitExample path="zone/multiple_content_items" view="overview" />

## Zone in a section

A zone can appear in a section or another block that accepts content. A partial
zone response does not include the section because it is already on the screen.

<BacklitExample path="zone/section" view="overview" />

## Multiple zones

A view can have several zones. Each zone has its own name and refresh boundary.

<BacklitExample path="zone/multiple_zones" view="overview" />

## Partial requests

`app.renderZone` runs the view resolver again to find the zone. It runs the
requested zone resolver and skips sibling zone resolvers. Put expensive queries
inside zone resolvers so sibling refreshes can skip them. Keep view composition
free of mutations because both full and partial requests execute it.

A zone must be in an authored content slot. Do not return a zone from another
zone resolver. A zone inside a parameterized view carries the view arguments.
Use `ctx.refreshZones(['name'])` after an action to refresh a named zone.