複数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/search/from-a',
4	'https://example.com/search/from-b'
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 で考えています。

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

Lhankor_Mhy

2023/07/31 01:30

『サーバー側の負荷』というのは、たとえば『サイトAとB』などのサーバの負荷をご心配されているということですか？　『5個以上のサイト』はそれぞれ別のサーバなのではないか、それならば同じサーバにアクセスを5回以上行うわけではないからそれほど心配はいらない、と思っているのですが、これは違いますか？

zappy

2023/07/31 12:36

ありがとうございます。いえ、自サイトの負荷です。以下は ② の方が自サイトの負荷が軽くて済むと考えていました。 ➀ JavaScript から自サイトへ5回のリクエストを受けて、cURL で外部サイトにリクエストを出す ② JavaScript から自サイトへ1回のリクエストを受けて、Multi Curl で5つの外部サイトにリクエストを出すしかし ② の Multi Curl は順次出力ができなそうで困ってしまった。という経緯になります。尚、『5個以上のサイト』はそれぞれ別のサーバというのはその通りです。別の会社の別のサイトです。

Lhankor_Mhy

2023/08/01 00:39

なるほど、ご提示のコードだと『自サイトへのリクエスト』が書かれていませんが、あくまで参考ということで実際のコードとは異なるのですね。理解しました。

zappy

2023/08/01 04:45

> ご提示のコードだと『自サイトへのリクエスト』が書かれていません仰る通りでした。 const urls = [ 'https://example.com', 'https://example.net' ]; これでは誤解されますね。ご指摘ありがとうございます。 const urls = [ 'https://example.com/search/from-a', 'https://example.com/search/from-b' ]; に修正させて頂きました。