#Attempting to use dynamic fetching causes error on build

22 messages · Page 1 of 1 (latest)

trail orchid
# 
export const revalidate = 0

async function getPosts(): Promise<Post[]>{
    const data = await fetch("http://localhost:3000/api/get-posts")
    return data.json()
}

export default async function Page() {
  const posts = await getPosts()
  console.log(posts)
  return (
    <div>
      <h1 className="text-slate-600">Hello, NextJS, Typescript and Prisma!</h1>
      <div className="grid grid-cols-4 gap-4 py-4">
        {posts.map(post => (
          <PostComponent postData={post} key={post.id} />
      ))}
      </div>
    </div>
  )
}

Dev works fine but if I try to build it or deploy it I get this error:
Application error: a client-side exception has occurred (see the browser console for more information).

If I remove revalidate option it also works fine but doesn't fetch after build and only uses cache

short citrus
#

this sounds like a bug

#

have you tried export const dynamic = 'force-dynamic'; instead of reavalidate = 0?

trail orchid
#

Tried it now, same error

#

Also tried using the revalidate option directly in the fetch to no prevail

#

This is how my api is looking, its a simple prisma query to a postgresql db

export async function GET() {
    const posts: any = await prisma.post.findMany()
    console.log(posts)
    return NextResponse.json(posts)
}
blissful ridge
#

I'm having the same issue, whenever I try to build Next tries to prerender the api page?

Error occurred prerendering page "/api/guesses". Read more: https://nextjs.org/docs/messages/prerender-error

short citrus
#

you can do the logic directly in the component

trail orchid
#

Before I was fetching the prisma data directly in the component using await ....

fading yoke
#

there r currently cache issues

#

idk if something exists on github tho

trail orchid
#

But it was caching it

trail orchid
# short citrus fyi you shouldn't be fetching your own api route from a rsc

If I do it like this:

async function getPosts(): Promise<Post[]>{
    const data = await prisma.post.findMany()
    return data
}

export default async function Page() {
  const posts = await getPosts()
  console.log(posts)
  return (
    <div>
      <h1 className="text-slate-600">Hello, NextJS, Typescript and Prisma!</h1>
      <div className="grid grid-cols-4 gap-4 py-4">
        {posts.map(post => (
          <PostComponent postData={post} key={post.id} />
      ))}
      </div>
    </div>
  )
}

Is there a way to revalidate it? Cuz it's currently using the cache on build

short citrus
#

try changing the dynamic exported config to 'force-dynamic'

trail orchid
#

Same error again, seems to be entirely caused by dynamic rendering

short citrus
#

try checking if this still happens with the canary release

#

if it does then it might be better to open an issue in the repo

trail orchid
#

Im using Next.js v13.4.1 I think thats canary

#

Ok actually

#

I ran the update now