I just updated the next version to 13 in a project to test out the app
dir.
I have a function called getData()
:
export const getData = async () => {
await dbConnect()
return await DataModel.find()
}
My dbConnect()
function is a generic function that uses the cached connection if it is cached, or connects to mongodb if it isn't connected.
My server component, inside app/page.tsx
export const page = async () => {
const data = await getData() // <-- Gets stuck here
}
I have tried using dbConnect()
inside the server component aswell, but the same problem occurs.
If I add an API route that runs getData()
and use my server component like this:
const fetchData = async () => {
return await fetch('/api/data')
}
export const page = async () => {
const data = await fetchData() // <-- Works if I call internal API
}
However, calling your own API seems redundant and might worsen performance. I also loose TS return type from the getData()
function.