In the App Router, what is the "correct" way of handling components that are populated with data from internal APIs?

I have an endpoint defined under app/api/<endpoint> that makes a request to an external API. I have a component that makes requests to that internal endpoint.

My Axios request makes a request to /api/<endpoint> and that appears to work, however, I see the following error in the console:

react-dom.development.js:17378 Uncaught Error: connect ECONNREFUSED 127.0.0.1:80
    at updateDehydratedSuspenseComponent (react-dom.development.js:17378:19)
    at updateSuspenseComponent (react-dom.development.js:17074:16)
    at beginWork$1 (react-dom.development.js:18396:14)
    at beginWork (react-dom.development.js:26741:14)
    at performUnitOfWork (react-dom.development.js:25587:12)
    at workLoopSync (react-dom.development.js:25303:5)
    at renderRootSync (react-dom.development.js:25258:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:24382:74)
    at workLoop (scheduler.development.js:261:34)
    at flushWork (scheduler.development.js:230:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)

which I've figured out is the SSR trying to pre-render the page but, for some reason, it's trying to call the API on port 80, despite the app running on port 3000. If I disable SSR in the component using dynamic(() => Promise.resolve(MyComponent), { ssr: false }) the error goes away, but this feels like a hack.

I'm also hitting a similar problem during CI/CD Because there is no server running during build, SSG is also unable to populate the page, I'd fixed that with export const dynamic = 'force-dynamic', but it has led me to wonder what the correct approach is.

I'm sure having components populated with data from internal APIs is a common pattern, so I'm hoping someone can shed some light on this for me! 🙂