nextjs15 prerender-error TypeError: fetch failed

[GuidDotEmpty]

Summary

When building the application, I encounter an error in a server component because the API used by the application is unavailable. I can work around this by adding export const dynamic = 'force-dynamic'; to the page that performs the fetch, but this feels more like a workaround than a proper solution.

See the repo for an example.

How should this be done?

Additional information

No response

Example

https://github.com/GuidDotEmpty/builderror-repo

[GuidDotEmpty]

The Error:
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
at async c (C:\temp\my-app.next\server\chunks\ssr[root-of-the-server]__159e24b3..js:1:5751)
at async e (C:\temp\my-app.next\server\chunks\ssr[root-of-the-server]__159e24b3..js:1:5852) {
digest: '2461942061',
[cause]: [Error: unknown scheme]

[icyJoseph]

As long as that server is not your own server... cuz otherwise this is an extra HTTP round trip back to yourself - sort of - so it is bound to have some latency. Rather you should go straight to the source. https://nextjs-faq.com/fetch-api-in-rsc.

But of course, that source might not be live during build time. You could do this, with the connection API, essentially the same as you did with force-dynamic, but more semantic - you put the limit.

When PPR becomes stable, this can also mean, pre-render until this point, and let the rest be calculated at request time.

As of today if there data is not there, during build time you have to "defer" it to later on.

import { connection } from 'next/server'
import { getPosts } from '@/actions/apiCalls';
import styles from './page.module.css';

async function Posts() {
  await connection()
  const posts = await getPosts();
  return (
     <ul>
        {posts.map((post) => (
         <li key={post.id}>{post.title}</li>
       ))}
     </ul>
  )
}

export default function Home() {
  return (
    <div className={styles.page}>
      <main className={styles.main}>
        <Suspense fallback={'...'}>
          <Posts />
        </Suspense>
      </main>
    </div>
  );
}