Acessing a route api in app dir causes re-render loop.

okay, I'm just trying out the next js app routes. I'm getting a render loop when using it like this in /app/page.tsx:
"use client"

const getData = async () => {
const response = await fetch("http://localhost:3000/api/generate", {
method: "POST",
})
const data = await response.json()
return data
}

export default async function Home() {
const data = await getData()

return (
<main>
page
</main>
)
}
"use client"

const getData = async () => {
const response = await fetch("http://localhost:3000/api/generate", {
method: "POST",
})
const data = await response.json()
return data
}

export default async function Home() {
const data = await getData()

return (
<main>
page
</main>
)
}
Can someone please explain why this is happening and how to fix this? Thanks
3 Replies
Neto
Neto2y ago
remove the 'use client'; at the top
jeromemarshall
now Im getting a Unhandled Runtime Error - Unexpected token H in JSON at position 0 this is my route.ts
export async function POST(req: Request) {
return new Response(
JSON.stringify({
message: "Hello world",
})
)
}
export async function POST(req: Request) {
return new Response(
JSON.stringify({
message: "Hello world",
})
)
}
Neto
Neto2y ago
something is causing the bad serialization
Want results from more Discord servers?
Add your server