複数APIの並列リクエストを、順次ブラウザに出力していく方法

実現したいこと

サイトAとBに並列でリクエストし、かつ、一方のレスポンスがきたら順次ブラウザに出力する方法は何が良いか知りたいです。

前提

自サイトに「サイトAからの検索」と「サイトBからの検索」を実装していて、これをなるべく早めたい、軽くしたい、という意図です。

発生している問題

良い方法がわかりません。

自分で考えたダメそうな方法１

並列でのAPI処理といえば、「Multi Curl」を思い浮かべます。
これは並列でAPIにリクエストは出せますが、しかしその結果をブラウザに順次出力するというのはできないのではと思っています。

もしできる方法がございましたら是非ご教示くださいませ。

自分で考えたダメそうな方法２

さらに調べて「Server Sent Events(SSE)」という方法を見つけました。
これはどうやらブラウザに順次出力することはできるようですが、しかし逆に並列でAPIにリクエストを出せないのではないかと思っています。

もしできる方法がございましたら是非ご教示くださいませ。

自分で考えた唯一できるが不安な方法

結局、並列リクエストと、順次出力、という２つをクリアするためには、JavaScript側で「サイトAからとってきてきてね」「サイトBからとってきてね」と並列のAjaxを実行するしかないかと思っています。
しかし、サイトAとBだけでなく、5個以上のサイトがありますので、サーバー側の負荷に不安を覚えています。

一応こういう感じを考えていますが・・・これしかないでしょうか。
もし負荷を減らす方法がございましたら是非ご教示くださいませ。

JavaScript

1const outputDiv = document.getElementById('output');2const urls = [3 'https://example.com',4 'https://example.net'5];6 7// 並列リクエストを実行する関数8async function fetchUrls() {9 const responses = await Promise.all(10 urls.map(async (url, index) => {11 const postData = (index === 0) ? 'apple' : 'orange';12 const response = await fetch(url, {13 method: 'POST',14 body: postData 15 });16 return await response.text();17 })18 );19 20 // レスポンスを順次表示21 responses.forEach(response => {22 const newLine = document.createElement('p');23 newLine.textContent = response;24 outputDiv.appendChild(newLine);25 });26}27 28fetchUrls();

補足情報（FW/ツールのバージョンなど）

PHP は 8.2 で、フレームワークはなしです。
JavaScript は Vanilla JS で考えています。

よろしくお願い致します。