Skip to content

Record (Запросы API) / Кэширование ^ 1.1.0

Особенности: Не поддерживает SSR

В Nuxoblivius предусмотрен встроенный механизм кэширования запросов. Он особенно полезен для SPA-приложений, где данные редко обновляются и нет смысла повторно обращаться к серверу при каждом рендере.


Основные особенности работы:

  1. Кэширование доступно только для GET-запросов.
  2. В кэш попадают только успешные ответы (код 2xx).
  3. Повторные запросы с теми же параметрами могут брать данные из кэша, не обращаясь к API.

Почему это может пригодиться?

Такой подход снижает нагрузку на сервер и ускоряет работу приложения, особенно при навигации между страницами или повторных открытиях компонентов.

Быстрая настройка кэширования: ^1.7.19

Для простого и автоматического кэширования в Nuxoblivius используется метод .withAutoCache(). Он создаёт ключ кэша на основе URL, а также всех path и query параметров.

Если запрос с теми же параметрами уже выполнялся ранее и был успешен — Record вернёт сохранённые данные вместо повторного запроса к API.

ts
import { Record } from "nuxoblivius";

const posts = Record.new("/api/posts", [])
  .query({
    page: 1,
  })
  .withAutoCache(); // Автоматическое кэширование

await posts.get(); // Первый запрос — обращение к серверу
await posts.get(); // Второй — данные возвращаются из кэша

Где можно использовать?

⚡ Метод особенно удобен для часто повторяющихся запросов — списков, фильтров, подгрузок, и других данных, которые редко меняются.

Низкоуровневая настройка кэширования

Изначально Nuxoblivius строился вокруг концепции тегов кэширования и ручного управления сохранёнными данными. Такой подход нужен, когда требуется тонкий контроль над тем, что именно и в каком объёме кэшируется.

Система тегов

Система тегов описывает стратегию кэширования для конкретных параметров запроса.

Доступны два режима:

  • simply — сохраняет только последние данные.
  • full — сохраняет всю историю изменений.

Создание тега выполняется через метод .createTag().

Он принимает два аргумента:

  1. Что кэшировать:
  • path:<name> — path-параметр запроса.
  • query:<name> — query-параметр запроса.
  1. Как кэшировать:
  • simply или full.
ts
import { Record } from "nuxoblivius";

const posts = Record.new("/api/posts", []);

posts.createTag("query:page", "simply");
posts.createTag("path:id", "full");

Получение кэшированных данных

В низкоуровневом режиме система не подставляет кэш автоматически. Чтобы получить сохранённые данные, используется взаимствование (borrowFrom) в связке с методом .cached().

Метод .cached() принимает объект с условиями получения данных:

  • * — если данные существуют (!== null).
  • null — если данные отсутствуют (=== null).
  • Любое значение — если данные равны этому значению (== <значение>).
ts
import { Record } from "nuxoblivius";

const posts = Record.new("/api/posts", []);

posts.createTag("path:id", "full");

const data = posts.cached({ id: 1 });
ts
import { Record } from "nuxoblivius";

const posts = Record.new("/api/posts", []);

posts.createTag("path:id", "full");
posts.borrowFrom(
  () => true,
  () => [{}]
  (_, { path }) => posts.cached({ id: path.id })
);

2023-2025 Power tool for creating project with Enjoy!