Prerendering issue during build
Unanswered
Abyssinian posted this in #help-forum
AbyssinianOP
When I run the build it tries to prerender server components by fetching my route handlers (the URL is localhost:3000/api/route)
But when the build process tried to fetch the above url it returns 404.
I was able to get around it by running the dev server simultaneously and then the build process would be able to fetch the data from the dev server as it's running.
Now all is good, except for when I have to dockerize the app as the Dockerfile only runs the build command, I can adjust it to run the dev server in the background first but that sometimes causes issues with jr build as well.
Have been looking for a solution for some time, couldn't find anything, maybe someone can help me?
But when the build process tried to fetch the above url it returns 404.
I was able to get around it by running the dev server simultaneously and then the build process would be able to fetch the data from the dev server as it's running.
Now all is good, except for when I have to dockerize the app as the Dockerfile only runs the build command, I can adjust it to run the dev server in the background first but that sometimes causes issues with jr build as well.
Have been looking for a solution for some time, couldn't find anything, maybe someone can help me?
15 Replies
Giant Angora
Can you share your fetch/ pages.js implementation fo rmore details?
Asian black bear
Mud-daubers
@Abyssinian did you fix it? I'm having the same issue
Brown bear
See the FAQ from near
@Brown bear See the FAQ from near
Mud-daubers
I did and I don't know what I'm doing wrong
Brown bear
Are you fetching on the serverside to localhost (same port as next)
Do the call directly, don't fetch server-side to server-side
Do the call directly, don't fetch server-side to server-side
Brown bear
e.g. have a function getNews somewhere, which you can use in your server component; and reuse it in your /api/news so if required the browser can still use this API
AbyssinianOP
Use server action directly
The code above fetches data in the homepage from localhost:3000/api using a server action. Here the server action fetches data from localhost:3000/api and then returns it to the server component (HomePage)
But this assumes and needs to have localhost:3000 running so that it can fetch data from /api/{endpoint}
but during build time /api isn't running (unless you have it running in another termianl, but this can also cause errors)
so instead just fetch the data in the server action itself from a different backend that is running or a local server:
//app/api/getName/route.ts
const GET = () => {
return ...
} // app/actions/getName.ts
export const getName = () => {
const name = fetch("http://localhost:300")..
return name;
}// app/page.tsx
const HomePage = async () => {
const name = await
return ..
}The code above fetches data in the homepage from localhost:3000/api using a server action. Here the server action fetches data from localhost:3000/api and then returns it to the server component (HomePage)
But this assumes and needs to have localhost:3000 running so that it can fetch data from /api/{endpoint}
but during build time /api isn't running (unless you have it running in another termianl, but this can also cause errors)
so instead just fetch the data in the server action itself from a different backend that is running or a local server:
// app/actions/getName.ts
export const = async () => {
const name = ... // get name from local server that is seperate from nextjs
or just dummydata:
return "John"
}@Abyssinian Use server action directly
//app/api/getName/route.ts
const GET = () => {
return ...
}
// app/actions/getName.ts
export const getName = () => {
const name = fetch("http://localhost:300")..
return name;
}
// app/page.tsx
const HomePage = async () => {
const name = await
return ..
}
The code above fetches data in the homepage from localhost:3000/api using a server action. Here the server action fetches data from localhost:3000/api and then returns it to the server component (HomePage)
But this assumes and needs to have localhost:3000 running so that it can fetch data from /api/{endpoint}
but during build time /api isn't running (unless you have it running in another termianl, but this can also cause errors)
so instead just fetch the data in the server action itself from a different backend that is running or a local server:
// app/actions/getName.ts
export const = async () => {
const name = ... // get name from local server that is seperate from nextjs
or just dummydata:
return "John"
}
Mud-daubers
So i justs have to add an error checking like, if fetch fails, return dummy data else return fetched data?
@Mud-daubers So i justs have to add an error checking like, if fetch fails, return dummy data else return fetched data?
AbyssinianOP
If you do that you won't be able to deal with actual errors since you'll be assuming the fetch fails because the server is down.
Might be a bit different if you use zod for validation but still not very good practice
Might be a bit different if you use zod for validation but still not very good practice
Basically only use api routes with external servers
@Abyssinian Basically only use api routes with external servers
Mud-daubers
If I have to do that, then what is the point of having backend and frontend in nextjs?
Or am I getting this all wrong?
Or am I getting this all wrong?
@Mud-daubers If I have to do that, then what is the point of having backend and frontend in nextjs?
Or am I getting this all wrong?
AbyssinianOP
Server components in my opinion do negate the need for api routes but I still see some libraries that only work with api routes, like next auth for example