Клиентский кеш: как держать серверные данные под контролем

На докладе разберем знакомый всем пример работы с состоянием: список адресов, от которого зависит активный адрес, от него — ближайший магазин, а от магазина — каталог. Уже звучит непросто.

Сначала поговорим об Application State и Local State, а затем соберем весь сценарий популярным способом — утащим всё в store. На конкретных проблемах увидим, почему этот подход быстро перестает быть удобным.

После этого разберемся, что данные, источник истины которых находится на сервере, — это кеш. Дадим ему отдельное имя — Server State. Сформулируем требования к работе с ним и посмотрим, какие библиотеки уже умеют всё необходимое.

Перепишем пример на Pinia Colada — аналоге TanStack Query для Vue. Увидим, сколько кода исчезнет, как зависимости станут явными и почему прежние проблемы больше не придется решать вручную.

В завершение обсудим слабые места Server State и то, как организовать отдельный архитектурный слой в проекте. Покажу свою структуру Server State Layer и дам готовый skill, который поможет перенести этот подход в ваш проект.