---
title: "Client and server state · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/client-and-server-state
updated: 2026-10-20
licence: "All rights reserved"
---

# Client and server state

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

> Keep server data in one cache, keep screen state in the address, and keep the rest local. Update the screen at once only when you can undo it.

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/client-and-server-state`.

## Required

- [Keep server data in one cache](https://agentwranglers.se/playbook/app-ui/client-and-server-state/server-state-cache): Keep data that comes from the server in one data-fetching cache, and read it from there on every screen. Never copy it into a global store or component state.
- [Key cached data by every input](https://agentwranglers.se/playbook/app-ui/client-and-server-state/complete-cache-keys): Build every cache key from all the inputs that change the answer, including the account, the signed-in user, the filters, the sort and the page.
- [Show the answer to the latest request only](https://agentwranglers.se/playbook/app-ui/client-and-server-state/latest-request-wins): When a new request replaces an older one, such as a new search term, abort the older request and never render its answer.
- [Refresh every view a change touches](https://agentwranglers.se/playbook/app-ui/client-and-server-state/refresh-after-change): After a successful change, update or refetch every cached query that shows the changed record, including lists, counts and totals.
- [Keep screen state in the address](https://agentwranglers.se/playbook/app-ui/client-and-server-state/state-in-url): Put every choice that changes what a screen shows in the address, such as filters, search, sort, page, tab and the open record. Reloading or sharing the link shows the same screen.

## Recommended

- [Undo optimistic updates that fail](https://agentwranglers.se/playbook/app-ui/client-and-server-state/optimistic-with-rollback): When the screen changes before the server answers, keep a copy of the old data. If the request fails, put it back and say so in words. Refetch either way.
- [Compute values instead of storing them](https://agentwranglers.se/playbook/app-ui/client-and-server-state/derived-values): Compute totals, counts, filtered lists and labels from the source data when you render. Never keep them in their own state to update by hand.

- Previous: [Forms](https://agentwranglers.se/playbook/app-ui/forms)
- Next: [Lists and tables](https://agentwranglers.se/playbook/app-ui/lists-and-tables)
- [All chapters](https://agentwranglers.se/playbook/app-ui)