NextJS App trouble with backend fetch when server side rendering

anton-petrenkoTRIAL

5 months ago

I have a backend service (FastAPI) and a frontend service (NextJS) in my application.

I am trying to use NextJS to fetch the backend using the internal URL as such

const res = await fetch(`http://${process.env.BACKEND_URL}:${process.env.BACKEND_PORT}/desk`);

Where BACKEND_URL is the internal url of my backend "poliwatch.railway.internal"

and BACKEND_PORT is 8080

The deploy command for backend that I am using is "web: hypercorn main:app --bind [::]:$PORT"

The deploy logs for my backend look fine as well.

I am able to access the backend via public URL. The only error log I have from the fetch function is "fetch failed", as for some reason my nextjs logs don't show up in the railway logs.

Working on a personal project, so no rush. Thank you!

Solved

2 Replies

anton-petrenkoTRIAL

5 months ago

I was able to fix this issue by adding export const dynamic = 'force-dynamic'; to the page in question (home page)

This is outlined in NextJS docs here https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#fetching-data-on-the-server-with-the-fetch-api

It seems like the issue was that it was pre-rendering the page at build time. I'm not exactly sure why that would be an issue, but that was the issue in my case.


5 months ago

Ah because the private network is not available during build time.

Glad you were able to come to a solution!


Status changed to Awaiting User Response railway[bot] 5 months ago


Status changed to Solved brody 5 months ago


NextJS App trouble with backend fetch when server side rendering - Railway Help Station