Вы знаете Progressive JPEG, но вы знаете о Progressive JSON?

Пару дней назад Дэн Абрамов написал статью объясняя новый тип стриминга данных с сервера. Обычно, когда мы стримим данные, мы стримим строчку за строчкой или отправляем какие-либо инкрементальные сообщения. Тут предлагается отправлять json используя обход дерева в ширину. Ну, те самые ненужные структуры данные и алгоритмы.

Т.е. сперва вы поймаете верхнюю структуру с ключами-заглушками, которые поступят позже:

{
  "imageUrl": "$1",
  "title": "$1",
  "comments": "$3"
}

Вот эти $1, $2, $3 это как раз те заглушки, которые обработаются на клиенте как промис. Это позволяет разбить все данные на куски и отправлять их по мере готовности и оптимизировать запросы на стороне сервера. Таким образом, мы можем начать заполнять данные на странице по частям, а не ждать пока все загрузится. С одной стороны эти запросы можно разбить на несколько частей и грузить параллельно, но что если нам для каких-то целей удобнее грузить что-то одним потоком?

Оказывается именно так и подгружаются серверные компоненты в React. Приложение тоже своего рода дерево. Дэн Абрамов объясняет, что Progressive JSON позволяет загружать данные по частям, что делает загрузку более эффективной и отзывчивой. При этом мы всегда знаем, какие компоненты еще не загрузились и можем отобразить их в виде заглушек.

Понятное дело, что тут они оптимизирут отправку иерархической структуры данных по сети. Я подозреваю, что оно ляжет в один поток QUIC. Т.е. если бы можно было разбить этот стрим на несколько, то quic смог бы тянуть несколько потоков? Я понимаю, что смешиваю транспортный уровень и уровень приложения, но все же.

В любом случае интересно, мозги шуршат.

https://overreacted.io/progressive-json/