Building a Better View Counter

[ React Component ] → [ Views Provider (Context) ]
                            ↓ (Debounces & batches slugs for 50ms)
                    [ Next.js Server Action ]
                            ↓ (Single DB roundtrip via inArray)
                    [ Neon Serverless Postgres ] (Atomic .onConflictDoUpdate)

const BATCH_DELAY = 50

/**
 * Context provider that manages view counts across the application.
 * Implements a batching strategy to group multiple view requests into a single API call,
 * preventing network spam when rendering large lists of items (e.g., the component registry).
 * Also caches view counts locally to optimize navigation.
 *
 * @param children - The React tree to wrap with the provider.
 */
export function ViewsProvider({ children }: { children: ReactNode }) {
  const [viewsMap, setViewsMap] = useState<Record<string, number | null>>({})
  const viewsMapRef = useRef<Record<string, number | null>>({})

  const pendingSlugsRef = useRef<Set<string>>(new Set())
  const fetchingRef = useRef<Set<string>>(new Set())
  const batchTimeoutRef = useRef<NodeJS.Timeout | null>(null)

  const prefetchViews = useCallback(
    async (slugs: string[]) => {
      // 1. Filter out slugs that are already cached or currently being fetched
      const newSlugs = slugs.filter(
        (slug) =>
          !(slug in viewsMapRef.current) &&
          !fetchingRef.current.has(slug) &&
          !pendingSlugsRef.current.has(slug),
      )

      if (!newSlugs.length) return

      // 2. Add slugs to the pending batch queue
      newSlugs.forEach((slug) => pendingSlugsRef.current.add(slug))

      if (batchTimeoutRef.current) clearTimeout(batchTimeoutRef.current)

      // 3. Debounce fetch trigger by 50ms
      batchTimeoutRef.current = setTimeout(() => {
        const slugsToFetch = Array.from(pendingSlugsRef.current)
        pendingSlugsRef.current.clear()
        if (slugsToFetch.length) fetchBatch(slugsToFetch)
      }, BATCH_DELAY)
    },
    [fetchBatch],
  )

  // ...
}

const incrementViews = useCallback(
  async (slug: string) => {
    const sessionKey = `viewed-${slug}`

    // 1. Guard check: If viewed in current session, perform read-only fetch
    if (typeof window !== 'undefined' && sessionStorage.getItem(sessionKey)) {
      requestView(slug)
      return
    }

    try {
      // 2. Perform write to server
      const data = await incrementViewAction(slug)

      setViewsMap((prev) => {
        const next = { ...prev, [slug]: data.views ?? null }
        viewsMapRef.current = next
        syncCache(next) // Synchronize with global localStorage cache
        return next
      })

      // 3. Lock increment trigger for this session
      if (data.views !== null && typeof window !== 'undefined') {
        sessionStorage.setItem(sessionKey, 'true')
      }
    } catch (error) {
      console.error('Error incrementing views:', error)
    }
  },
  [requestView],
)

'use server'

import { sql } from 'drizzle-orm'
import { db } from '@/lib/db/drizzle'
import { views } from '@/lib/db/schema'

/**
 * Server action that atomically increments the view count for a specific route slug.
 * Uses a Postgres upsert (`ON CONFLICT DO UPDATE`) operation to prevent race conditions.
 *
 * @param slug - The unique identifier/path of the page being viewed.
 * @returns An object containing the new total `views` count.
 */
export async function incrementViewAction(slug: string) {
  if (!slug) return { views: null }

  try {
    const [result] = await db
      .insert(views)
      .values({ slug, count: 1 })
      .onConflictDoUpdate({
        target: views.slug,
        set: { count: sql`${views.count} + 1` }, // Atomic increment
      })
      .returning({ count: views.count })

    return { views: result?.count ?? 0 }
  } catch (error) {
    console.error('Error incrementing view count:', error)
    return { views: null }
  }
}

import { inArray } from 'drizzle-orm'

/**
 * Server action to efficiently fetch the view counts for multiple route slugs in a single query.
 * Optimized for grid/list views where showing views for dozens of items at once is necessary.
 *
 * @param slugs - An array of unique page identifiers.
 * @returns A dictionary mapping each slug to its current view count.
 */
export async function getViewsBatchAction(slugs: string[]) {
  if (!slugs?.length) return { views: {} }

  try {
    const result = await db
      .select({ slug: views.slug, count: views.count })
      .from(views)
      .where(inArray(views.slug, slugs))

    // Pre-initialize map with 0 counts for missing items
    const viewsMap: Record<string, number> = Object.fromEntries(slugs.map((slug) => [slug, 0]))

    for (const row of result) {
      viewsMap[row.slug] = row.count
    }

    return { views: viewsMap }
  } catch (error) {
    console.error('Error fetching view batch:', error)
    return { views: null }
  }
}