Как правильно периодически обнулять state? Как избежать излишних запросов на API сервер?

Question

[pavelkunyavskiy]

Есть небольшое приложение, по сути контентный сайт.
Для того чтобы при каждом переходе по роуту не отправлять запрос за JSONом, я делаю проверку, типо

if (!store.state.articles.length) {
  axios.get...
  store.commit('SET_ARTICLES', data)
}

Все работает, приложение не лезеть на сервер если и так уже есть заполненный стейт. Но как быть с обновлением данных? Например, человек открыл сайт, и примерно через минутку добавляется новая статья. Он ее не увидит, так как данные у него будут закешированы. Единственное что приходит в голову - обнулять периодически стейт на клиенте. Например, раз в 5 минут.

Как это правильно делать? И какие есть другие способы? Может быть как-то по другому запрашивать надо, или еще какие практики неведомые мне.

Answer 1

[Evgeny Kulakov]

1. Периодический запрос на сервер
2. Вебсокеты, если нужно в реальном времени получать данные

Comments

[pavelkunyavskiy]

1. Конкретнее, что имеется ввиду под "периодическим запросом на сервер"?
2. Рилтайм не нужен совершенно.

[Evgeny Kulakov]

pavelkunyavskiy, Примерно то, что вы написали: обнуляете стейт через какое-то время и по логике вашего приложения отправится запрос, чтобы получить данные. Либо сами по таймеру инициируете запрос на сервер и забираете данные.

[pavelkunyavskiy]

Evgeny Kulakov, так мой вопрос и заключается - как это правильно делать. И где.

[Evgeny Kulakov]

Что значит правильно?) Варианты собственно названы, дальше дело вкрутить это в код. Но куда вкручивать зависит от структуры вашего проекта.
Можно что-то типа такого:

экшн, в котором вы забираете данные:

fetch_items(context) {
  return axios.get(path_to_items)
  .then(res => {
    context.commit('set_items', res.data)
    setTimeout(() => {
      context.dispatch('fetch_items')
    }, 1*60*1000)
  })
}

Answer 2

[markmariner]

Вам стоит настроить бекэнд таким образом, чтобы он возвращал статус 304 Not Modified, если данные не изменились.

То есть вы каждый раз (« при каждом переходе по роуту») отправляете запрос на сервер. Если данные изменились, то сервер возвращает вам новые данные, если нет — возвращает пустой ответ со статусом «Без изменений». Как именно это сделать — задача бекэнд-разработки.

Здесь подробнее на эту тему: https://ruhighload.com/post/%D0%9A%D0%B5%D1%88%D0%...

Если вам нужно обновление без перехода на другую страницу мгновенно (например для сообщений в чате), то вам необходимо использовать протокол WebSockets, с помощью которого вы будете подписываться на изменений, а бекэнд будет самостоятельно уведомлять фронтенд об изменении данных. Материалов о вебсокетах много, реализация зависит от языка. Про JS: https://learn.javascript.ru/websockets

Можно настроить простое кеширование на бекэнде — запрос будет обрабатываться, но обращения к БД не будет происходить, таким образом не страшно, что вы будете отправлять запросы часто.

Периодические (по таймеру) запросы на сервер — самое неэлегантное решение, использовать его не стоит.

Comments

[wufapexef]

Какой 304, вы вообще о чем? Откуда серверу знать, если речь о выборке данных из базы?

[markmariner]

wufapexef, в нашем проекте сделано так, что энжинкс кэширует выборку, а бекэнд очищает кэш, если произошло редактирование или добавление контента в БД.

[wufapexef]

markmariner, тогда да, это супер решение. А почему не редис для кеша?

[markmariner]

wufapexef, энджинкс как раз и хранит в редисе. Энджинкс управляет кэшем вместо бекэнда потому, что это быстрее и менее затратно.

[wufapexef]

markmariner, Энджинкс и редис это два не связанных продукта, он ничего не может хранить в редисе по умолчанию.