Как кэшировать ответы API + кэширование веб-страниц

Наверняка вы часто сталкивались с тем, что при нажатии кнопки "Назад" в веб-браузере уже загруженная страница перезагружается.

Например, в интернет-магазине вы нажимаете на товар из результатов поиска, а затем, нажав кнопку "Назад",

происходит повторный поиск.

Повторная загрузка уже загруженной страницы негативно сказывается на UX, но с точки зрения системы проблема ещё серьёзнее.

Повторная загрузка страницы приводит к ненужным вызовам API и увеличению трафика.

Это может привести к финансовым проблемам, а если на данной странице происходит сбор данных, то возникнет проблема избыточного сбора определённых данных.

Для решения этой проблемы использование кэширования страниц или результатов API даёт значительный эффект.

1. Использование хранилища браузера (localStorage, SessionStorage, IndexedDB)

- localStorage сохраняет данные даже после закрытия браузера.

- sessionStorage удаляет данные после закрытия браузера или вкладки.

- IndexedDB используется для хранения больших объёмов данных. Позволяет асинхронное сохранение и является NoSQL базой данных. Можно хранить изображения и видео. Максимальный размер зависит от браузера, но составляет около 50 МБ. Доступен в автономном режиме.

2. Axios Interceptor

Если вы используете axios, вы можете использовать встроенную функцию interceptor. Для одного и того же запроса ответ возвращается без отправки на сервер.

Кэширование в фреймворке Nuxt

Оборачивая любой компонент в тег keep-alive, можно кэшировать компонент.

Можно настроить, будет ли вызываться fetch() во время рендеринга на стороне сервера. Если false, fetch будет вызываться только на стороне клиента.

Также можно использовать Vuex. Принцип работы аналогичен хранилищу браузера.

Можно использовать веб-сервер (Nginx) для добавления настроек кэша в заголовок ответа.

Однако, из-за кэша немедленное применение изменений при распространении ресурсов, таких как изображения, может быть невозможно, поэтому в этом случае необходимо очистить кэш. Можно изменить имя файла, добавить запрос на очистку кэша или, если вы используете AWS CloudFront, применить очистку кэша.

Также существует способ хранения самих страниц, обработанных на сервере Nuxt, в кэше памяти.

Это кэширование на стороне сервера, при котором кэшируется не только API, но и вся страница. Это означает, что при нажатии кнопки "Назад" страница загружается мгновенно. Это очень эффективно, но следует помнить, что используется память сервера.

Если 10 000 пользователей запрашивают одну и ту же страницу,

При первом запросе пользователя страница рендерится и кэшируется.

После этого, когда 9999 пользователей обращаются к той же странице, сервер отвечает кэшированным результатом.

-> Этот способ не подходит, если необходимо отображать персонализированные данные для каждого пользователя.

+ Внутренне cache использует пакет lru-cache.

* lru: алгоритм кэширования, который в первую очередь удаляет данные, которые не использовались дольше всего.

Использует структуры данных хеш-таблица или двусвязный список для быстрого поиска пар ключ-значение: временная сложность O(1).