Skip to content

React 19 + SWR real-time data fetching

In the context of the Hermes HUD Web UI, the combination of React 19 and SWR (Stale-While-Revalidate) is utilized to create a responsive, real-time monitoring dashboard that automatically updates when the underlying AI Agent's state changes^[001-TODO__Hermes_HUD_Web_UI_-_Agent_意识监控仪表盘.md].

Data Synchronization Flow

The application employs a specific architecture to ensure the frontend stays in sync with the Hermes Agent's file-based state directory (~/.hermes/). This is achieved through a custom implementation of the "Stale-While-Revalidate" pattern^[001-TODO__Hermes_HUD_Web_UI_-_Agent_意识监控仪表盘.md].

The synchronization pipeline operates as follows:

  1. File Change Detection: The backend uses watchfiles to monitor the ~/.hermes/ data directory for any modifications^[001-TODO__Hermes_HUD_Web_UI_-_Agent_意识监控仪表盘.md].
  2. Cache Invalidation: Upon detecting changes, the backend's file watcher clears its internal cache to ensure fresh data is served^[001-TODO__Hermes_HUD_Web_UI_-_Agent_意识监控仪表盘.md].
  3. Event Broadcasting: A WebSocket connection is used to broadcast a notification of the change to the frontend^[001-TODO__Hermes_HUD_Web_UI_-_Agent_意识监控仪表盘.md].
  4. Silent Revalidation: On the frontend, SWR intercepts this WebSocket event and triggers a silent revalidation (refetch) of the affected data without requiring a manual page refresh^[001-TODO__Hermes_HUD_Web_UI_-_Agent_意识监控仪表盘.md].

Technical Implementation

The frontend relies on React 19 and Vite 8 for the build process, while SWR handles the complexities of data fetching, caching, and automatic revalidation^[001-TODO__Hermes_HUD_Web_UI_-_Agent_意识监控仪表盘.md].

  • React 19: Serves as the UI framework.
  • SWR: Manages the data layer, utilizing the received WebSocket signals to invalidate stale data and update the UI seamlessly^[001-TODO__Hermes_HUD_Web_UI_-_Agent_意识监控仪表盘.md].
  • [[Hermes HUD Web UI]]
  • [[WebSocket]]
  • [[Cache Invalidation]]

Sources

  • 001-TODO__Hermes_HUD_Web_UI_-_Agent_意识监控仪表盘.md