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•2y ago

remove the 'use client'; at the top

jeromemarshallOP•2y ago

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•2y ago

something is causing the bad serialization

Gaming

Programming

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