Optimizing Next.js TV Dashboard Refresh to Preserve Neon Scale‑to‑Zero

把电视仪表盘的自动刷新时间从30秒改成15分钟，就能让云端数据库“睡个好觉”，省下不少钱。这是开发者分享的真实优化案例：数据库服务Neon按计算资源计费，频繁的查询会让它一直保持“清醒”状态，即使数据根本没变化，也在持续消耗额度。调低刷新频率后，数据库能进入休眠，费用自然降了下来。这个过程还试过5分钟间隔，但依然会频繁唤醒数据库，最终15分钟最合适。听起来只是改一个数字，背后却是“资源利用”的智慧——不是所有数据都需要实时更新，尤其在数据本就很少变动时。对普通人来说，这件事提醒我们：很多App后台都在默默频繁刷新，既耗电又耗流量。而对企业开发者，这则案例展示了如何通过优化代码来降低云服务成本，让产品运营更经济。简单说，就像人没必要每30秒就睁眼看一下表，改成15分钟看一次，既不影响工作，还能睡个好觉。

<h1> Optimizing Next.js TV Dashboard Refresh to Preserve Neon Scale‑to‑Zero </h1> TL;DR: I bumped the TV dashboard auto‑refresh interval from 30 s to 15 min in <code>src/features/tv/TVDashboard.tsx</code>. This change frees up Neon compute resources and prevents unnecessary scaling events, keeping the database in a low‑cost state. <h2> The Problem </h2> Neon, our Postgres‑as‑a‑service provider, scales compute resources up and down automatically. With the TV dashboard polling the database every 30 seconds, the DB stayed “warm” all the time, consuming compute credits even when the data was static. The symptom was a spike in Neon compute usage and a higher bill, without any functional benefit. <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>ERROR: Neon compute headroom exceeded - Frequent polling prevented scale‑to‑zero </code></pre> </div> <h2> What I Tried First </h2> <ol> <li> Leave the 30 s interval unchanged – no improvement, compute still stayed active.</li> <li> Reduce to 5 min – still caused occasional scaling up because the refresh triggered a new connection each cycle.</li> <li> Add a debounce in the query layer – added complexity without addressing the root cause of the polling frequency.</li> </ol> The root issue remained: the UI kept re‑fetching data too often for a data source that changes only on manual sync. <h2> The Implementation </h2> <h3> 1. Update the refresh constant </h3> In <code>src/features/tv/TVDashboard.tsx</code>, the polling interval was originally set to 30 seconds: <div class="highlight js-code-highlight"> <pre class="highlight tsx"><code>// src/features/tv/TVDashboard.tsx const REFRESH_MS = 30_000; // 30 s </code></pre> </div> I first bumped it to 5 minutes: <div class="highlight js-code-highlight"> <pre class="highlight tsx"><code>const REFRESH_MS = 300_000; // 5 min </code></pre> </div> But to give Neon more headroom, I then increased it further to 15 minutes: <div class="highlight js-code-highlight"> <pre class="highlight tsx"><code>const REFRESH_MS = 900_000; // 15 min </code></pre> </div> The final diff looks like this: <div class="highlight js-code-highlight"> <pre class="highlight diff"><code>-const REFRESH_MS = 30_000; +const REFRESH_MS = 900_000; // 15 min </code></pre> </div> <h3> 2. Use the constant in the polling effect </h3> The component uses <code>useEffect</code> with <code>setInterval</code> to re‑fetch TV data: <div class="highlight js-code-highlight"> <pre class="highlight tsx"><code>useEffect(() => { const interval = setInterval(() => { fetchTvData(); // async call to API/DB }, REFRESH_MS); return () => clearInterval(<s