QR-master/articles/devto-hashnode/devto-edge-dynamic-qr-redirect-engine.md

title, description, tags, keywords, canonical_url

title	description	tags	keywords	canonical_url
Designing a Low-Latency Dynamic QR Redirect Engine at the Edge with Redis & Middleware	A comprehensive system architecture guide for building a sub-20ms dynamic QR code generator engine using Edge Functions, an editable QR code generator proxy, Redis, and scan tracking.	systemdesign, redis, serverless, webdev	dynamic qr code generator, free dynamic qr code generator, editable qr code generator, editable qr code, qr code generator with tracking, qr code tracking, dynamic qr code	https://www.qrmaster.net/blog/qr-code-analytics

Designing a Low-Latency Dynamic QR Redirect Engine at the Edge with Redis & Middleware

Static QR codes hardcode their destination URL directly into the matrix data. Once printed on 10,000 billboards or product packages, a typo in the URL means reprinting everything at massive cost.

A dynamic qr code generator solves this by encoding a permanent short proxy URL (e.g., https://qr.domain.com/r/xyz123). An editable qr code generator lets you change the target destination link in your dashboard anytime post-print. When scanned, an editable qr code intercepts the request, logs scan metrics (device type, geo-location, timestamp), and issues an HTTP 302 Found or 307 Temporary Redirect response to the target URL.

However, if your redirect engine takes 800ms to resolve a database query before forwarding the user, the physical scan experience feels sluggish. In this article, we will design a free dynamic qr code generator backend engine operating with sub-20ms global redirect latencies using Edge Middleware (Vercel Edge / Cloudflare Workers), Redis in-memory caching, and a qr code generator with tracking pipeline.

---

1. System Architecture Overview

To achieve sub-20ms global redirect latencies in a dynamic qr code generator, database calls must never block the HTTP response thread.

                  ┌─────────────────────────────────────────┐
                  │          Physical Phone Scanner          │
                  └────────────────────┬────────────────────┘
                                       │
                         HTTP GET /r/xyz123 (Proxy)
                                       │
                                       ▼
                  ┌─────────────────────────────────────────┐
                  │      Edge Middleware (Cloudflare/Vercel)│
                  │   - Fast Geo-IP & User-Agent Parsing    │
                  └──────────┬───────────────────┬──────────┘
                             │                   │
                     1. Cache Hit (<5ms)         │ 2. Async Log Stream
                             │                   │  (Non-blocking Queue)
                             ▼                   ▼
                  ┌─────────────────────┐ ┌─────────────────────────┐
                  │ Upstash Redis / K-V │ │ Kafka / Upstash QStash  │
                  └─────────────────────┘ └────────────┬────────────┘
                             │                         │
                     HTTP 307 Redirect                 ▼
                             │            ┌─────────────────────────┐
                             │            │ Analytics DB (ClickHouse│
                             ▼            │     or PostgreSQL)      │
                  ┌─────────────────────┐ └─────────────────────────┘
                  │ Final Target Webpage│
                  └─────────────────────┘

Key Architectural Decisions:

1. Edge Execution: Run redirect logic in multi-region PoPs (Points of Presence) close to the physical device.
2. Read Path (Hot Path): Fetch URL mappings from a distributed, low-latency Redis cache for your editable qr code generator.
3. Write Path (Analytics Async): Push scan metadata to a queue or log collector off the main execution thread so qr code tracking adds 0ms to user delay.
4. HTTP Status Code: Use 307 Temporary Redirect (or 302 Found). Never use 301 Moved Permanently, as browsers will cache the redirect locally and bypass your server on future scans, ruining qr code generator with tracking metrics!

---

2. Setting Up Edge Middleware in Next.js

Below is an implementation of Edge Middleware in Next.js (src/middleware.ts or Cloudflare Worker script) that handles dynamic redirection for an editable qr code generator.

Step 2.1: Installing Dependencies

npm install @upstash/redis @upstash/qstash

Step 2.2: Implementing Edge Redirect Middleware

Create or update middleware.ts:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { Redis } from '@upstash/redis';

// Initialize low-latency edge Redis client
const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL!,
  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});

export async function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl;

  // Match route pattern: /r/:code (e.g., /r/campaign-2026)
  if (pathname.startsWith('/r/')) {
    const code = pathname.split('/r/')[1];
    if (!code) {
      return NextResponse.redirect(new URL('/404', req.url));
    }

    const startTime = performance.now();

    // 1. Fetch destination URL from Redis cache (Hot Path)
    const targetUrl = await redis.get<string>(`qr:link:${code}`);

    if (!targetUrl) {
      // Fallback: If not in cache, redirect to fallback page or 404
      return NextResponse.redirect(new URL('/link-expired', req.url));
    }

    // 2. Extract Device & Geo Metadata from Edge Request Headers for QR Code Tracking
    const ip = req.headers.get('x-forwarded-for') || req.headers.get('x-real-ip') || '127.0.0.1';
    const userAgent = req.headers.get('user-agent') || 'Unknown';
    const country = req.headers.get('x-vercel-ip-country') || req.headers.get('cf-ipcountry') || 'US';
    const city = req.headers.get('x-vercel-ip-city') || 'Unknown';

    // 3. Asynchronously Log Scan Analytics (Fire and Forget)
    const scanEvent = {
      code,
      targetUrl,
      timestamp: new Date().toISOString(),
      ip,
      userAgent,
      country,
      city,
      latencyMs: Math.round(performance.now() - startTime),
    };

    // Queue analytic event asynchronously without awaiting
    const logPromise = redis.lpush('queue:scan_analytics', JSON.stringify(scanEvent));

    if (typeof (req as any).waitUntil === 'function') {
      (req as any).waitUntil(logPromise);
    }

    // 4. Return HTTP 307 Temporary Redirect immediately
    return NextResponse.redirect(targetUrl, {
      status: 307,
      headers: {
        'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
        'X-Redirect-Latency': `${Math.round(performance.now() - startTime)}ms`,
      },
    });
  }

  return NextResponse.next();
}

export const config = {
  matcher: '/r/:path*',
};

---

3. Asynchronous Analytics Processing Pipeline for Tracking

Logging scan events directly to a relational database (like PostgreSQL or MySQL) inside the request loop introduces locking overhead and database connection pool exhaustion under high traffic spikes.

A robust qr code generator with tracking streams events into a queue and processes them with a background consumer job.

Background Consumer Worker (scripts/analyticsWorker.ts)

import { Redis } from '@upstash/redis';
import { PrismaClient } from '@prisma/client';

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL!,
  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});

const prisma = new PrismaClient();

interface ScanEvent {
  code: string;
  targetUrl: string;
  timestamp: string;
  ip: string;
  userAgent: string;
  country: string;
  city: string;
  latencyMs: number;
}

async function startWorker() {
  console.log('🔄 QR Code Tracking Worker active. Polling scan queue...');

  while (true) {
    try {
      // Pop up to 100 scan events in batch from Redis list
      const rawEvents = await redis.rpop('queue:scan_analytics', 100);

      if (rawEvents && rawEvents.length > 0) {
        const events: ScanEvent[] = rawEvents.map((item) => JSON.parse(item));

        // Batch insert into database
        await prisma.scanLog.createMany({
          data: events.map((e) => ({
            qrCode: e.code,
            destination: e.targetUrl,
            scannedAt: new Date(e.timestamp),
            ipAddress: e.ip,
            deviceUserAgent: e.userAgent,
            countryCode: e.country,
            cityName: e.city,
            processingLatency: e.latencyMs,
          })),
        });

        console.log(`✅ Processed ${events.length} scan records.`);
      } else {
        await new Promise((resolve) => setTimeout(resolve, 1000));
      }
    } catch (err) {
      console.error('❌ Analytics Worker Error:', err);
      await new Promise((resolve) => setTimeout(resolve, 2000));
    }
  }
}

startWorker();

---

4. Handling High-Traffic Campaign Spikes

When a printed editable qr code appears on live television or a viral promotional banner, traffic can surge from 10 scans/sec to 20,000 scans/sec instantly.

Key Resilience Strategies:

1. Pre-Warming the Edge Cache: When a user updates a dynamic destination URL in their editable qr code generator dashboard, publish the update to Redis immediately:

   await redis.set(`qr:link:${code}`, newTargetUrl);
   

2. Stale-While-Revalidate Fallback: If Redis experiences an outage, fallback to an edge-cached static mapping file or memory LRU cache.
3. Bot & Crawler Filtering: Search engine spiders (Googlebot, Bingbot) and messaging app link prefetchers (WhatsApp, iMessage, Twitter previews) generate fake scans. Filter them out using User-Agent detection before counting unique scans:

   const isBot = /bot|google|baidu|bing|msn|duckduckbot|teoma|slurp|twitterbot|facebookexternalhit|whatsapp/i.test(userAgent);
   if (isBot) {
     // Tag or ignore bot scans in qr code tracking
   }
   

---

Conclusion

By executing redirect logic at the Edge with Redis and isolating analytics processing asynchronously, you can build a free dynamic qr code generator backend achieving ultra-low <15ms redirect latencies regardless of geographic location.

To save time and avoid building analytics infra from scratch, explore QR Master Dynamic QR Code Generator, an enterprise-grade platform offering dynamic QR management, real-time GA4/UTM integration, and sub-second analytics dashboards.