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

Question

В полностью рендеринге на стороне сервера (не Web 2.0) развертывание кода на стороне сервера будет непосредственно обновлять страницы клиентской стороны при перезагрузке страницы. Напротив, в приложении с одиночной страницей, основанной на React, даже после обновления компонентов React все еще будут некоторые клиенты, использующие старую версию компонентов (они получают только новую версию при перезагрузке браузера, что должно произойти редко) -> Если страницы полностью SPA, возможно, что некоторые клиенты только обновляют страницы через несколько часов.

Какие методы следует использовать, чтобы убедиться, что старые версии компонентов больше не используются никакими клиентами?

Обновление: API не изменяется, обновляется только компонент React Component с более новой версией.

Answer 1

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

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

Или

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

1. Вы можете запросить сервер для данных в определенных интервалах
2. WebSockets может помочь вам обновление данных компонентов с сервера.

Answer 2

Верните свой 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 Теперь будет возвращать полезную нагрузку ошибки с кодом ошибки, понятном переднего конца, означает, что она должна полностью перезарядить себя ,

Answer 3

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

Answer 4

Вы можете отправить версию приложения с каждым ответом от любой конечной точки вашего API. Так что, когда приложение делает любой запрос API, вы можете легко проверить, есть ли новая версия, и вам нужна жесткая перезагрузка.Если версия в ответ API более новая, чем та, которая хранится в localStorage, установите window.updateRequired = true. И вы можете иметь следующий срабатывают компонент, который оборачивает react-router «s 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; 

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

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

Answer 5

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

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

X-Client-Version: 1.0.0

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

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

418 - I'm a Teapot

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

window.location.reload(true)

основная Prem ise - сервер знает о последней версии клиента.

EDIT:

Аналогичный ответ дан here.