I'm using NextJS 13 with the App Router.

Given this example:

async function getData() {
  const res = await fetch('https://api.example.com/abc')
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main>{ data.title }</main>
}

Current Behaviour
When I run next build the page is optimized to become static. It expects the API to both; be available at build-time, and never change.

I can disable cache on the fetch call in order to fetch the API at runtime on the server as well, but the API will still be called at build-time.

The Issue
Assuming access to all the APIs that server components might call seems a bit weird to me for a build script. Currently my API server is not running when the build script is called. Is there a way to ensure that these fetch requests are not called at build-time, whether that's on a project-level or on a per-component basis.

Investigated Solutions
I don't want to disable static optimization completely either as I may still have static pages that do not rely on API calls.

Or should I be rethinking the way I'm deploying my site? (currently the API and NextJS are updated in parallel, maybe I need to take down the NextJS server, then stop and update the API server, start the API server, update and build the NextJS server, then restart the NextJS server.