Как сделать мгновенное обновление страницы до ответа от сервера?

Question

[J. Snow]

Пишу сайт на React. Допустим это обычный TODO-лист.

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

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

Какие есть варианты решения?
Спасибо!

Answer 1

[camelCaseVlad]

В UI Development существует концепт оптимистичного UI (optimistic UI).

Самый простой пример данного концепта - нажатие на кнопку "Мне нравится" со счетчиком поставленных лайков. На клиенте можно сделать +1 сразу же, и не заставлять юзера ждать, пока с сервера придет новое значение лайков на данной кнопке.

Решение вашей проблемы зависит от выбранных вами инструментов при создании приложения, но вы можете сделать нечто похожее на это:

Вот как выглядит ТУДУ с ожиданием сервера:



Вот как выглядит с оптимистичным юай:



Тут видно, что новый, не записанный на сервере Item отображается в стиле "Loading..."

Используйте данный подход, дайте загружаемой Item временный ID

Answer 2

[Кирилл Горелов]

Ну смотри.

аяксом отправляешь todo, а саму задачу просто отображаешь как будто она уже добавлена. К тому же как я понял это уже сделано.
Так вот, пока ты отобразишь задачу и пока пользователь будет ее разглядывать, ты уже получишь id, а просто подставишь туда куда тебе нужно.
ну можно такой костыль придумать)