Retrieve remaining countdown time

The failure mode

// The bug this endpoint exists to prevent.
//
// Date.now() is the VISITOR'S clock. It can be wrong by minutes,
// wrong by years, or deliberately changed to beat your deadline.
const remaining = deadline - Date.now();   // <- do not trust this

Fetch once, tick locally

// Fetch once, then tick locally against an offset.
// One request, a smooth UI, and the server stays the authority.

async function startCountdown(timerId, onTick) {
  const response = await fetch(`/api/countdown/${timerId}`);  // your proxy
  const { remaining_seconds, server_time } = await response.json();

  // How far the visitor's clock is from ours, measured once.
  const skew = Date.now() - new Date(server_time).getTime();

  const endsAt = Date.now() - skew + remaining_seconds * 1000;

  const id = setInterval(() => {
    const left = Math.max(0, Math.round((endsAt - (Date.now() - skew)) / 1000));
    onTick(left);
    if (left === 0) clearInterval(id);
  }, 1000);

  return () => clearInterval(id);
}

Next.js React Server Component

// React Server Component — the countdown is correct in the
// first byte of HTML, with no loading state and no client fetch.
export default async function OfferBanner({ timerId }) {
  const response = await fetch(
    `https://countdownshare.com/api/v1/timers/${timerId}/status`,
    {
      headers: { Authorization: `Bearer ${process.env.COUNTDOWNSHARE_API_KEY}` },
      cache: "no-store",   // the entire point of this call is freshness
    },
  );

  const { data } = await response.json();

  if (data.ended) return <ExpiredNotice />;

  return (
    <CountdownClock
      initialSeconds={data.remaining.total_seconds}
      serverTime={data.server_time}
    />
  );
}