Client-Side Cache: How to Keep Server Data Under Control

In this talk, we’ll explore a familiar state management scenario: a list of addresses determines the active address, which determines the nearest store, which in turn determines the product catalog. It already sounds complicated.

First, we’ll discuss Application State and Local State. Then we’ll implement the entire scenario using a popular approach: putting everything into a store. Through specific examples, we’ll see why this approach quickly becomes difficult to manage.

Next, we’ll look at data whose source of truth lives on the server. On the client, that data is a cache with a name of its own: Server State. We’ll define what we expect from it and see which libraries already provide everything we need.

We’ll rewrite the example using Pinia Colada, a Vue alternative to TanStack Query. We’ll see how much code disappears, how the dependencies become explicit, and why the original problems no longer need to be solved manually.

Finally, we’ll discuss the pitfalls of Server State and how to organize it as a dedicated architectural layer in your project. I’ll present my Server State Layer structure and share a ready-to-use skill that will help you apply this approach to your own project.