Увеличьте скорость своей страницы с помощью потокового API

Для получения данных из любого источника мы традиционно используем http, где мы отправляем простой HTTP-запрос на получение данных и визуализируем их после получения ответа. Это хороший подход, но для длинного фрагмента данных нам нужно дождаться ответа API, чтобы нарисовать нашу страницу.

Например, если какой-либо API занимает 5 секунд, чтобы ответить, нам нужно подождать целых 5 секунд, чтобы показать что-то на странице. Как правило, это снижает производительность приложения, а также взаимодействие с пользователем. С новыми потоковыми API мы можем смягчить эту проблему.

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

Давайте посмотрим на это в действии, мы собираемся использовать библиотеку fetch-event-source, предоставленную Microsoft, для получения данных в Steam.

import { fetchEventSource } from "@microsoft/fetch-event-source";

Метод fetchEventSource имеет обратные вызовы, которые мы будем использовать для последовательного извлечения фрагментов из бэкэнда и добавления к нашим исходным данным для рисования страницы.

let hostUrl = "http://www.sourceURL.com";
let connected = false;
let headers = {
  ...some sample headers
}
await fetchEventSource(hostUrl, {
    headers: {
      ...headers,
      accept: "text/event-stream",
    },
    openWhenHidden: true,
    onopen(response) {
      if (response && !connected) {
        //dispatch action to redux that connection is established
        // to set initial loader or base variables
        connected = true;
      }
    },
    onmessage(msg) {
      if (msg) {
        if (msg?.event === "response-headers") {
          //Header listener to tell the response header sent by backedn
        } else if (msg?.event === "response") {
          // dispatch event to append data 
        } else if (msg?.event === "error") {
          // dispatch event to reset data in case of error
        }
      }
    },
    onerror(error) {
      if (error) {
        console.log("error", error);
        // dispatch event if any error
        throw error; // rethrow to stop the operation
      }
    },
    onclose() {
      // dispatch event that connection is closed and complete data is received
    },

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

Это все, что касается потокового API, который мы можем рассматривать как хорошую альтернативу обычному http-запросу, который мы традиционно используем для наших повседневных операций. Не стесняйтесь давать предложения или задавать любые вопросы.