Как сделать обновление данных в реальном времени в шаблоне html на django?

Question

[Никита Китсан]

Облазили пол интернета, но так и не нашли адекватного гайда, как сделать нормальное обновление данных на странице без ее перезагрузки. Суть в том, что в нашу базу данных записываются новые элементы с помощью запросов по API, и нам нужно обновлять выводимые цифры на странице с периодичностью в 10 секунд, но готового решение под Django найдено не было, кроме обновления полной страницы с соответствующими морганиями и анимацией в браузере))
был бы рад узнать правильные способы от мастодонтов

Answer 1

[Алексей Черемисин]

Без перезагрузки страницы вариантов несколько:
- использовать javascript + какой нибудь javascript фреймворк, подгружать данные по AJAX, и имплементировать их в дарево html.
- тоже самое, но по AJAX подгружать кусочки html в нужные места
- немного забыть про javascript и ajax и взять уже готовую javascript биьлиотеку, в которой это все реализовано в тегах html https://htmx.org/, или аналог. Кстати htmx прикручивается и к django.
Можно посмотреть на аналог попроще TwinSpark.js https://github.com/piranha/twinspark-js

Answer 2

[rPman]

Есть два основных направления
* устаревший, но не требующий javascript на клиенте - это разделение страницы на фреймы (iframe и frame) таким образом, чтобы изменяющиеся части попадали на свой фрейм
в этом случае будет мигать не вся страница а только изменяющаяся часть, и вообще то браузеры прекрасно это обрабатывают, даже курсор в формах остается на старом месте
Не рекомендую этот подход, он устарел и имеет смысл только если действительно нужно разрабатывать сайт для условий отключенного javascript (например tor/i2p сети).
Очень много логики можно реализовать на основе css, язык там уже на столько сложен и многофункционален что простые вещи типа отображение и смокрытие элементов на основе кликов - обычное дело.
Совет, чтобы мерцание не было видно, оптимизируйте ответ бакэнда таким образом чтобы ответ выдавался по времени быстрее некоторого порога (при его превышении страница будет мерцать)

* собирайте страницу с помощью javascript, вообще этот подход рекомендуется для всего сайта но меняет парадигму на SPA приложения, а так же немного мешает SEO через работу поисковиков, не полностью готовых к полностью динамическим страницам (это все решаемо, просто требуется прогрузиться в проблему по серьезнее)

Собирать на стороне клиента страницу можно по разному:

Например полная пересборка всей страницы под любые изменения точно так же может заставить мерцать содержимое (особенно такой говнокод виден там где разработчики бессмысленно нагромождают фреймворки и технологи до маразма, поднимая кодовую базу до мегабайтов) - не рекомендую

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

Как частный случай обновляется даже не структура html а только текстовые значения (и даже значения атрибутов), так как очень часто обновление имеет смысл для данных а не структуры, за исключением случаев когда есть списки и размеры их меняются. Этот подход спорный, я видел когда так реализовывали мультиязыковую поддержку (т.е. по умолчанию страница как бы пустая, а затем загружается языковой json и все элементы наполняются текстом соответственно уникальным id), несет некоторую нагрузку на процессор (незначительную, никто так не оптимизирует уже давно), требует некоторого учета при верстке (нужно везде прописывать минимальные размеры) но гарантированно не мерцает даже на медленных соединениях, так как данные можно сначала загузить полностью и только потом менять на странице
------------------------------

Обновления со стороны сервера можно получать двумя способами
- периодическими опросами (генерирует квадратичную нагрузку на сервер при увеличении одновременно работающих пользователей) но очень простой в реализации
- воспользоваться websocket/events, эти технологии специально созданы для того чтобы сервер мог оперативно сообщить какую то информацию клиентам без постоянных опросов и лишней нагрузке на сервер, но требует поднятие websocket сервера, удерживающего открытые соединения, для тех кто привык к http rest подходу с cgi короткоживущими приложениями, это может быть сложно, но результат того стоит

Answer 3

[Roman K]

JS + AJAX, элементарно. На стороне Django одним роутом отдаёшь html, ещё одним json - те данные, которые должны меняться