🎮 Vercel API + Redis Template

A reference project for API routes and database patterns

1. Basic API Call

Simple GET request with query parameters → /api/hello

Click to test...

2. Redis Strings (SET/GET/KEYS/MGET)

Store and retrieve simple values → /api/redis-strings

Click to test...
Click "Get ALL" to see all scores...

3. Redis Hashes (HSET/HGET/HGETALL/KEYS)

Store objects with multiple fields → /api/redis-hashes

Click to test...
Click "Get ALL" to see all profiles...

4. Redis Sorted Sets (ZADD/ZRANGE)

Perfect for leaderboards! → /api/redis-sorted-sets

Click to test...

5. Redis Lists (LPUSH/LRANGE)

Activity feeds and recent events → /api/redis-lists

Click to test...

🔄 Real-Time Update Patterns

Three approaches for getting live updates from server to client

6. Short Polling (Simple Interval)

Repeatedly fetch data at fixed intervals. Simplest approach, but least efficient.
setInterval(() => fetch('/api/redis-sorted-sets'), 3000)

✓ Pros: Simple, works everywhere, no extra services
✗ Cons: Wasteful, high latency, scales poorly
○ Not running
Click "Start Polling" to begin...

7. Smart Polling (Change Detection)

Polling with optimization: server tracks when data last changed, skips sending data if unchanged.
fetch('/api/realtime/smart-polling?since=' + lastKnownUpdate)

✓ Pros: More efficient, reduces bandwidth, no extra services
✗ Cons: Still polling, still has latency
○ Not running
Click "Start Polling" to begin...

8. Pusher (Real-Time WebSockets)

Industry-standard solution: server pushes updates instantly via Pusher's WebSocket service.
pusher.subscribe('game-events').bind('leaderboard-update', callback)

✓ Pros: Instant updates, most efficient, scales massively
✗ Cons: Requires external service, additional setup
○ Not connected
Click "Connect to Pusher" to begin...

Send an Update (triggers to ALL clients!)

Open this page in another browser tab/window to see real-time sync!

🛠️ Real-Time Setup Guide

Short Polling & Smart Polling

No setup required! These work with your existing Redis + Vercel setup.

Pusher Setup (for approach 3)

  1. Create a free account at pusher.com
  2. Create a new "Channels" app
  3. Go to "App Keys" in your Pusher dashboard
  4. Add server-side environment variables (in Vercel dashboard or .env.local): PUSHER_APP_ID=your_app_id
    PUSHER_KEY=your_key
    PUSHER_SECRET=your_secret
    PUSHER_CLUSTER=your_cluster
  5. Update client-side code in src/main.js:
    Replace YOUR_PUSHER_KEY and YOUR_CLUSTER
  6. Run npm install to install pusher packages

Comparison Table

Approach Latency Efficiency Scalability Setup
Short Polling High (seconds) Poor Poor None
Smart Polling Medium (seconds) Medium Medium Minimal
Pusher Low (instant) Excellent Excellent Account needed

📚 Quick Reference

API Endpoints

  • GET /api/hello?name=X
  • GET/POST /api/redis-strings
  • GET/POST/PUT /api/redis-hashes
  • GET/POST /api/redis-sorted-sets
  • GET/POST /api/redis-lists

Real-Time Endpoints

  • GET /api/realtime/smart-polling?since=X
  • GET/POST /api/realtime/pusher-trigger

Redis Data Types

  • Strings: SET, GET, KEYS, MGET
  • Hashes: HSET, HGET, HGETALL, KEYS
  • Sorted Sets: ZADD, ZRANGE, ZRANK
  • Lists: LPUSH, LRANGE, LTRIM