useEffect's router.push triggers a double-render

[kelvinkoon]

Describe the issue
After hours of investigating, the conclusion is it may be a bug as per: vercel/next.js#18127
Initially suspected to be hydration, but router.isReady didn't help: https://nextjs.org/docs/pages/building-your-application/rendering/automatic-static-optimization#how-it-works
Only happens on hard refresh.

Acceptance Criteria

• Find root cause of the router woes
• Try to make it a single-render
• If not, mitigate API call on first render somehow
• If nothing else, implement caching layer