Как принудительно обновлять страницы страниц с одной страницей (SPA)?

Ответ 1

Да при рендеринге на стороне сервера, если вам нужно обновить небольшую часть страницы, вам также понадобится перезагрузить всю страницу. Но в SPA-системах вы обновляете свои материалы с помощью ajax, поэтому нет необходимости перезагружать страницу. Увидев вашу проблему, у меня есть некоторые предположения:

Вы видите, что один из ваших компонентов обновлен, но другие компоненты, получающие данные из одного API, не обновлялись. Здесь представлена ​​ Архитектура потока. где у вас есть ваши данные в магазине, и ваш компонент прослушивает изменения в магазине, всякий раз, когда данные в вашем магазине меняют все ваши компоненты, слушающие его изменение, будут обновлены (нет сцены кэширования).

или

Вам необходимо контролировать, чтобы ваш компонент обновлялся автоматически. Для этого

• Вы можете запросить свой сервер для данных через определенные промежутки времени.
• Websockets может помочь вам обновить данные компонентов с сервера.

Ответ 2

Вы можете иметь компонент React, чтобы выполнить запрос ajax на ваш сервер, когда приложение загружается, чтобы получить "версию интерфейса". В API-интерфейсе сервера вы можете сохранить инкрементное значение для клиентской версии. Компонент React может хранить это значение на клиенте (cookie/local storage/etc). Когда он обнаруживает изменение, он может вызывать window.location.reload(true);, который должен заставлять браузер отказываться от кеша клиента и перезагружать SPA. Или еще лучше сообщите конечному пользователю, что новая версия будет загружена, и спросите их, хотят ли они сохранить работу, а затем перезагрузите ее и т.д. В зависимости от того, что вы хотите сделать.

Ответ 3

Вы можете отправлять версии приложений с каждым ответом от любой конечной точки вашего API. Так что, когда приложение делает любой запрос API, вы можете легко проверить новую версию, и вам нужна жесткая перезагрузка. Если версия в ответ API более новая, чем та, которая хранится в localStorage, установите window.updateRequired = true. И вы можете иметь следующий реагирующий компонент, который обертывает react-router Link:

import React from 'react';
import { Link, browserHistory } from 'react-router';

const CustomLink = ({ to, onClick, ...otherProps }) => (
  <Link
    to={to}
    onClick={e => {
      e.preventDefault();
      if (window.updateRequired) return (window.location = to);
      return browserHistory.push(to);
    }}
    {...otherProps}
  />
);

export default CustomLink;

И используйте его вместо response-router Link во всем приложении. Поэтому всякий раз, когда обновление и пользователь переходит на другую страницу, будет сложная перезагрузка, и пользователь получит последнюю версию приложения.

Также вы можете показать всплывающее сообщение: "Там обновление, нажмите [здесь], чтобы включить его". если у вас есть только одна страница или ваши пользователи перемещаются очень редко. Или просто перезагрузите приложение, не спрашивая. Это зависит от вашего приложения и пользователей.

Ответ 4

Как и Стив Тейлор, но вместо конечных точек API для версий я буду использовать клиентское приложение следующим образом.

Каждый HTTP-запрос отправляет настраиваемый заголовок, например:

X-Client-Version: 1.0.0

Затем сервер сможет перехватить такой заголовок и ответить соответствующим образом.

Если серверу известно, что версия клиента устарела, например, если текущая версия 1.1.0, ответьте на код состояния HTTP, который будет соответствующим образом обработан клиентом, например:

418 - I'm a Teapot

Затем клиент может быть запрограммирован на реагирование на такой ответ, обновив приложение:

window.location.reload(true)

Основная предпосылка заключается в том, что сервер знает о последней версии клиента.

EDIT:

Аналогичный ответ дается здесь.

Ответ 5

Верните свой API.

Каждый URL-адрес конечной точки API должен выглядеть примерно так:

https://example.com/api/1.0.0/REST/customer/52

В приведенном выше примере ваш внешний интерфейс может получить клиента с идентификатором 52. Когда вы обновляете все веб-приложение, это может измениться примерно на следующее:

https://example.com/api/1.1.0/REST/customer/52

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