logo

EventSourceとSWR(refreshInterval)を比較してみる

2023-12-23
a year ago

開発環境

  • next 14.0.4
  • react 18.2.0

前提

具体的なコード実装例はありませんのでご了承ください。

本題

EventSourceとは?

EventSource は、ウェブページがサーバーからのイベントストリームを受信するためのAPIです。これは、サーバーサイドのイベントが発生したときに自動的にクライアントに通知するためのもので、一方向の通信を提供します。

一般的な使用例としては、リアルタイムの情報更新や、ウェブアプリケーションでのプッシュ通知などが挙げられます。EventSource を使用すると、サーバーからのデータを待機することなく、非同期的にデータを受信できます。

EventSource オブジェクトは、ウェブブラウザの標準機能として提供されており、JavaScriptを使用して簡単に実装することができます。

SWR(refreshInterval)との比較

SWRなど利用している場合、refreshIntervalを利用して定期的なポーリングができます。

動作としてはEventSourceと同じようなことが実現できるので簡単な比較をしてみます。


SWRのrefreshIntervalを利用する場合

メリット:

  1. 簡単な実装: フックとして提供されており、使用する際には比較的簡単に実装できます。
  2. 柔軟性: refreshIntervalを設定することで、データの更新頻度を柔軟に制御できます。
  3. キャッシュ機能: データのキャッシュを提供し、再取得時にキャッシュを使用することで、負荷を減らすことができます。

デメリット:

  1. ポーリング方式: refreshIntervalを使用する場合、定期的にサーバーにリクエストを送信するポーリング方式になります。これにより、不必要なリクエストが発生する可能性があります。
  2. リアルタイム性: リアルタイム性が必要な場合、ポーリング方式では実際のイベント発生との間に遅延が生じる可能性があります。


EventSourceを利用する場合

メリット:

  1. リアルタイム性: サーバーからのイベントストリームをリアルタイムで受信するため、データの即時反映に適しています。
  2. サーバー負荷の削減: サーバーとの双方向通信を提供するため、ポーリングよりもサーバーの負荷が低減されます。

デメリット:

  1. ブラウザサポート: すべてのブラウザで完全にサポートされているわけではなく、一部の古いブラウザでは動作しない場合があります。
  2. 複雑な実装: EventSourceを使用するには、サーバー側とクライアント側の両方で対応する必要があり、実装がやや複雑になることがあります。

どちらを選択すべきか

  • リアルタイム性+不要なリクエストを抑えたい場合: EventSourceを使用することで、リアルタイムなデータ更新を実現しつつ必要なタイミングでサーバーからメッセージを受信できます。
  • 簡易な実装が必要な場合: SWRのrefreshIntervalを使用することで、比較的簡単に実装できます。

EventSourceを利用する場合の注意点

  • CORS対応は必要(Nextjsを利用している場合、Route Handlerを経由してサーバーへリクエストを送信することでセキュアに通信を行うことがありますが、EventSourceはブラウザから通信を行うことになります)
  • SSE は開いている接続の最大数に制限(6)が設けられている(コンポーネント単位でEventSourceと接続を行うような実装は難しいです。サーバーからメッセージを受け取った時、どのようにクライアントで管理しているデータを再検証していくか、十分に検討する必要があります)
  • 不必要な接続に注意(Nextjsで利用する場合useEffectを用いた実装がよくありますが、アプリケーション全体で常に接続が必要なケースはおそらく稀なので、適切なタイミングで切断する必要があります)

さいごに

リアルタイム性を求められるアプリケーションに携わった場合の参考になれば幸いです!

参照