Головна » Розробка » Прогресивний JSON: що це таке і навіщо він потрібен

Прогресивний JSON: що це таке і навіщо він потрібен

У світі, де швидкість завантаження та продуктивність веб-застосунків мають вирішальне значення, з’являються нові підходи до передачі та обробки даних. Один із таких підходів — прогресивний JSON (Progressive JSON), або PJSON. Це технологія, яка дозволяє передавати великі JSON-документи частинами, щоб дані ставали доступними одразу після надходження, а не лише після повного завантаження.

Чому звичайний JSON може бути проблемою

Коли ми отримуємо великий JSON-файл через API, його потрібно повністю завантажити, перш ніж парсер зможе з ним працювати. Це спричиняє:

  • Затримки у відображенні даних на фронтенді.
  • Високе споживання пам’яті, особливо на мобільних пристроях.
  • Неоптимальну UX, коли користувач чекає, поки вся відповідь завантажиться.

Що таке прогресивний JSON

Прогресивний JSON — це метод серіалізації JSON, який дозволяє браузеру чи клієнту почати обробку частин даних ще до того, як завантажиться весь файл. Це досягається завдяки потоковій передачі та парсингу.

Як це працює

  1. Сервер відправляє JSON частинами (наприклад, масив об’єктів по одному або групами).
  2. Клієнт обробляє ці частини по мірі надходження, зазвичай через ReadableStream або спеціалізовані парсери.
  3. Користувач бачить перші результати майже миттєво, навіть якщо загальний обсяг даних великий.

Приклад використання (Node.js + Fetch API)

// На сервері
app.get('/data', (req, res) => {
  res.setHeader('Content-Type', 'application/json')
  res.write('[')

  for (let i = 0; i < 1000; i++) {
    const item = JSON.stringify({ id: i, name: `Item ${i}` })
    res.write(item + (i < 999 ? ',' : ''))
  }

  res.write(']')
  res.end()
})

// На клієнті (ES2020+)
fetch('/data')
  .then(res => res.body.getReader())
  .then(reader => {
    // обробка потоку вручну або через Streaming parser
  })

Переваги прогресивного JSON

  • ⚡ Швидший час до першого відображення (TTFB)
  • 📱 Краще на мобільних мережах
  • 🔄 Можливість скасування або пріоритезації даних

Недоліки та виклики

  • Не всі бібліотеки та фреймворки підтримують обробку потокових JSON.
  • Потоковий парсинг складніший, ніж звичайний JSON.parse().
  • Дебагінг може бути складнішим.

Коли використовувати

Прогресивний JSON особливо корисний для:

  • Величезних масивів даних (наприклад, логів або аналітики).
  • Інтерфейсів, що мають “безкінечну” прокрутку або поступове завантаження.
  • Програм з реального часу, де важлива перша відповідь.

Альтернативи

  • NDJSON (newline-delimited JSON) — кожен рядок — окремий JSON-об’єкт.
  • GraphQL with defer/stream — для складної ітеративної передачі частин запиту.
  • MessagePack або Protobuf — більш стислі, але менш гнучкі формати.

Висновок

Прогресивний JSON — це цікавий підхід до вирішення проблем з продуктивністю при роботі з великими обсягами даних. Він може суттєво покращити UX, зменшити затримки та зробити ваші застосунки більш адаптивними до повільних мереж. Якщо ви працюєте з великими даними на фронтенді — обов’язково зверніть увагу на цей формат.