Fetching own API endpoint in getServerSideProps and similar functions
As part of data-fetching, I'm fetching the data from my own API routes with a
But I have to use an absolute URL instead of a nicer relative URL here. Why is that? Is this the right way to fetch data?
No, this is not the right way to fetch data in
getServerSideProps (and similar functions such as
getStaticProps). In short, do not fetch your own API routes in server environments like those functions, instead just call the server-side logic directly. Instead of the code above, you should do something like this:
For more information, see Fetching own API endpoint in React Server Components which concerns the exact problem here but for the
app router. Read it with "server components" as "
getServerSideProps and similar functions" and "route handlers" as "API routes".
Basically, if you find yourself having to fetch from
localhost:3000 in your own Next.js app (assuming this Next.js app runs on port 3000) and the fetch requires an absolute URL, you are very likely doing something wrong.