I was trying to call an API from generateStaticParams to create SSG for some ids from the database. But the call results in the fetch failed.

Where does the code work

export async function generateStaticParams() {
    const userIds = ['1', '2', '3', '4'];
    return userIds.map((userId) => {
      return{
        userId,
      }
    })
}

The SSG is generated for static input and also for the below API:

export async function generateStaticParams() {
     const res = await fetch('https://dummyjson.com/posts');
     const data = await res.json();
     return data.posts.map((post: any) => {
     return {
        userId: post.id.toString(),
     }
     })
 }

Where does it fail:

export async function generateStaticParams() {

   const res = await fetch('http://localhost:3000/api', {
     cache: 'no-store'
   });
  const data = await res.json();
  return data.map((user: any) => {
    return {
         userId: user.toString(),
     }
 })
}

When I put up a yarn build to check the SSG pages I also tried with 127.0.0.1 and the env variable. I get the error for the above code that the Fetch Failed but whereas for the other two I get the below output.

└ ● /user/[userId]                       138 B          87.2 kB
├ /user/1
├ /user/2
├ /user/3
└ /user/4

○  (Static)  prerendered as static content
●  (SSG)     prerendered as static HTML (uses getStaticProps)

I even tried using the revalidate method and dynamicProps = true / false but the result is same.