Reducing Neon Compute Costs by Tuning the TV Dashboard Refresh Interval

<h1> Reducing Neon Compute Costs by Tuning the TV Dashboard Refresh Interval </h1> <p><strong>TL;DR:</strong><br><br> I increased the TV dashboard refresh interval from 30 s to 5 min, then to 15 min, saving Neon compute credits and preventing scale‑to‑zero issues. The change is a single constant in <code>src/features/tv/TVDashboard.tsx</code>, but the impact on cost and reliability is huge.</p> <h2> The Problem </h2> <p>The TV dashboard (<code>/tv</code>) was auto‑refreshing every 30 seconds. Neon, our serverless Postgres provider, charges per second of compute usage. With a 30 s poll, the database stayed hot for most of the day, consuming compute credits and causing the pool to stay awake. This prevented Neon from scaling to zero, which would otherwise save us money when the site was idle. Additionally, the data in the dashboard rarely changes more frequently than a few minutes, so the frequent polling was unnecessary.</p> <p>The symptoms were simple:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight console"><code><span class="gp">$</span><span class="w"> </span>npm run dev <span class="c">... </span><span class="go">⚠️ Neon compute headroom: 0.3s remaining </span></code></pre> </div> <p>And the cost dashboard in Vercel spiked during traffic peaks.</p> <h2> What I Tried First </h2> <p>Initially, I thought a quick fix would be to add a debounce or throttle to the polling logic in the dashboard component. I wrapped the <code>useEffect</code> that triggers <code>fetchDashboardData</code> with a <code>setTimeout</code> of 30 s:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight tsx"><code><span class="nf">useEffect</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">id</span> <span class="o">=</span> <span class="nf">setTimeout</span><span class="p">(</span><span class="nx">fetchDashboardData</span><span class="p">,</span> <span class="mi">30</span><span class="nx">_000</span><span class="p">);</span> <span class="k">return </span><span class="p">()</span> <span class="o">=></span> <span class="nf">clearTimeout</span><span class="p">(</span><span class="nx">id</span><span class="p">);</span> <span class="p">},</span> <span class="p">[]);</span> </code></pre> </div> <p>However, this still caused a database hit every 30 s, so the compute usage didn’t change. I also considered moving the polling to the server side via Vercel Edge Functions, but that would add complexity and latency. The simplest path was to adjust the polling interval directly.</p> <h2> The Implementation </h2> <h3> 1. Identify the Refresh Constant </h3> <p>In <code>src/features/tv/TVDashboard.tsx</code>, the refresh interval is defined as a constant:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight tsx"><code><span class="c1">// src/features/tv/TVDashboard.tsx</span> <span class="kd">const</span> <span class="nx">REFRESH_MS</span> <span class="o">=</span> <span class="mi">30</span><span class="nx">_000</span><span class="p">;</span> <span class="c1">// 30 s — data only changes on manual sync, no need to poll faster</span> </code></pre> </div> <h3> 2. First Change – 5 min Refresh </h3> <p>I bumped this to 5 minutes to give Neon a chance to scale to zero during idle periods:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight tsx"><code><span class="c1">// src/features/tv/TVDashboard.tsx</span> <span class="kd">const</span> <span class="nx">REFRESH_MS</span> <span class="o">=</span> <span class="mi">300</span><span class="nx">_000</span><span class="p">;</span> <span class="c1">// 5 min — data only changes on manual sync, no need to poll faster</span> </code></pre> </div> <p><strong>Why 5 min?</strong> </p> <ul> <li>The TV data changes only when a new broadcast is scheduled or a user manually syncs.</li> <li>5 min