www.cialloo.com/SERVER_POLLING.md

Server Data Polling Implementation

Overview

Implemented a centralized server data management system that fetches and polls server status data globally across the entire application.

Changes Made

1. Created ServerContext (src/contexts/ServerContext.tsx)

• Purpose: Global state management for server data
• Features:
  • Fetches A2S data for all servers on app initialization
  • Polls server data every 2 seconds to keep status fresh
  • Provides data to any component via React Context
  • Handles loading states and error management

2. Updated Main App (src/main.tsx)

• Wrapped the entire app with <ServerProvider> to make server data available globally
• Server data starts loading immediately when the app opens, regardless of which page

3. Refactored Servers Page (src/pages/Servers.tsx)

• Removed local data fetching logic
• Now uses useServers() hook to access global server data
• No duplicate API calls - reuses data already being polled
• Maintains all existing functionality (filtering, loading skeletons, etc.)

Benefits

Performance

• ✅ Data loads immediately on app start (any page: index, blog, servers, etc.)
• ✅ No delay when navigating to /servers page - data already available
• ✅ Automatic updates every 2 seconds keep data fresh
• ✅ Single polling loop instead of multiple instances

User Experience

• ✅ Server data pre-loaded before user navigates to servers page
• ✅ Real-time status updates without manual refresh
• ✅ Consistent data across all pages that might display server info
• ✅ Smooth loading transitions with skeleton placeholders

Code Quality

• ✅ Centralized data management (single source of truth)
• ✅ Reusable across multiple components
• ✅ Clean separation of concerns
• ✅ Easy to extend (add more server-related features)

How It Works

App Starts → ServerProvider initializes
    ↓
Fetches all server data via A2S API
    ↓
Sets up 2-second polling interval
    ↓
Any component can access data via useServers() hook
    ↓
Data automatically updates every 2 seconds

API Calls

• Initial Load: 9 parallel A2S queries (one per server)
• Polling: Same 9 queries every 2 seconds
• Bandwidth: ~4.5 requests/second (distributed)

Future Enhancements (Optional)

• Add configurable polling interval
• Implement smart polling (slower when tab inactive)
• Add WebSocket support for real-time updates
• Cache data in localStorage for faster initial loads
• Add server health monitoring and alerts