Getting error while fetching data in server component

[furqanmirzaa]

Summary

I came across a problem that I am fetching data in a server component in next.js and it requires absolute url and I know the absolute url on my localhost i.e http://localhost:3000/....
Everything works fine till here. But when I try to deploy the site then it gives me error as it is no longer on my localhost. So what can I do with the url to fetch data on the server side.

Additional information

if i try to use relative path then i have to make the component client component which i do not want coz there is no client interactivity. i want it to be server side. but when i try deploy the website on netlify then it gives error as the api is no longer on localhost. A link is given below to the project repository.

Example

https://github.com/eclipssed/CRUD-APP-WITH-NEXT.JS

[icyJoseph]

Hi,

The problem is that you are trying to use relative paths with server side fetch. There's no base url reference to make request relative to.

What you have done is a bit of a hack, but the problem you face now is just one more instance of the issue. Ultimately, the problem will be that you are making an additional HTTP round trip, out to the internet and back to the server itself again.

Please read through these articles:

• https://nextjs-faq.com/fetch-api-in-rsc
• https://nextjs-faq.com/fetch-api-in-getserversideprops

So, even though you can still hack this with the VERCEL_URL environment variable, you are fundamentally doing something wrong.

Other frameworks have an escape hatch for this, for example Nuxt.js https://nuxt.com/docs/guide/concepts/server-engine#direct-api-calls, has Direct API calls, which skip the HTTP round trip, but that doesn't exist in Next.js, which instead does as Node.js does.

In your case, the solution is to take the GET code from:

• https://github.com/eclipssed/CRUD-APP-WITH-NEXT.JS/blob/main/app/api/topics/%5Bid%5D/route.js

And just put it in:

• https://github.com/eclipssed/CRUD-APP-WITH-NEXT.JS/blob/main/app/editTopic/%5Bid%5D/page.jsx

And then, unless, your own browser client, or 3rd parties, need to do GET requests for that data, you'd probably want to remove the GET request handlers from the route files.

[furqanmirzaa]

Thank you so much man. I just found out what I was doing wrong and also fixed it too. Thanks for your help. Your help is highly appreciated and thanks for your time.

…

On Tue, Jan 16, 2024, 1:47 PM Joseph ***@***.***> wrote: Hi, The problem is that you are trying to use relative paths with server side fetch. There's no base url reference to make request relative to. What you have done is a bit of a hack, but the problem you face now is just one more instance of the issue. Ultimately, the problem will be that you are making an additional HTTP round trip, out to the internet and back to the server itself again. Please read through these articles: - https://nextjs-faq.com/fetch-api-in-rsc - https://nextjs-faq.com/fetch-api-in-getserversideprops So, even though you can still hack this with the VERCEL_URL environment variable, you are fundamentally doing something wrong. Other frameworks have an escape hatch for this, for example Nuxt.js https://nuxt.com/docs/guide/concepts/server-engine#direct-api-calls, has Direct API calls, which skip the HTTP round trip, but that doesn't exist in Next.js, which instead does as Node.js does. In your case, the solution is to take the GET code from: - https://github.com/eclipssed/CRUD-APP-WITH-NEXT.JS/blob/main/app/api/topics/%5Bid%5D/route.js And just put it in: - https://github.com/eclipssed/CRUD-APP-WITH-NEXT.JS/blob/main/app/editTopic/%5Bid%5D/page.jsx And then, unless, your own browser client, or 3rd parties, to do GET requests for that data, you'd probably want to remove the GET request handlers from the route files. — Reply to this email directly, view it on GitHub <#60691 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BCGTLR32ZSHBIRUGMTODXWDYOY5D5AVCNFSM6AAAAABB4JKVS2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DCNBRGM4TK> . You are receiving this because you authored the thread.Message ID: ***@***.***>