Next.js Discord

Discord Forum

ISR Can't handle API Calls

Answered
Idra posted this in #help-forum
Open in Discord
Hello everyone, i'm trying to switch my dynamic client side rendered page into a Incremental Static Regenerated page (ISR).

When i'm in dev mode it works fine, but this error comes only when i run pnpm run build.

This is my Client Side version (that works in prod.):

export async function getServerSideProps({ params }) {
const { slug } = params;
const res = await fetch(${process.env.CONTENTS_API_URL}?slug=${slug});
const data = await res.json();

if (data.length === 0) {
return {
notFound: true,
};
}

return {
props: { data: data[0] },
};
}

This is the code that i'm trying to make it work for the ISR (it doesn't work in prod.):

https://hastebin.skyra.pw/obubowenoz.ts

And this is the error i get whenever i run pnpm run build:

cause: Error: connect ECONNREFUSED ::1:3000
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
errno: -4078,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '::1',
port: 3000
}
}

Build error occurred
Error: Failed to collect page data for /content/[slug]
at D:\Programmi\Axira\reep-demo1\node_modules.pnpm\next@13.4.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\build\utils.js:1155:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'Error'
}

I Was thinking: what if this problem occurs because the data that nextjs needs to fetch isn't available because the api is located in the same website that is now offline because it needs to build?

Maybe this could be the problem but i don't know how to fix it
Could someone Help me please?
Thanks in advance!
Answered by joulev
Don't fetch your own API routes in getServerSideProps and similar functions; import your server-side logic directly instead. See more info [here](https://nextjs-discord-common-questions.joulev.dev/fetching-own-api-endpoint-in-getserversideprops-and-similar-functions)
View full answer

22 Replies

@Idra Hello everyone, i'm trying to switch my dynamic client side rendered page into a Incremental Static Regenerated page (ISR). When i'm in dev mode it works fine, but this error comes only when i run `pnpm run build`. This is my Client Side version (that works in prod.): > export async function getServerSideProps({ params }) { > const { slug } = params; > const res = await fetch(`${process.env.CONTENTS_API_URL}?slug=${slug}`); > const data = await res.json(); > > if (data.length === 0) { > return { > notFound: true, > }; > } > > return { > props: { data: data[0] }, > }; > } This is the code that i'm trying to make it work for the ISR (it doesn't work in prod.): <https://hastebin.skyra.pw/obubowenoz.ts> And this is the error i get whenever i run `pnpm run build`: > cause: Error: connect ECONNREFUSED ::1:3000 > at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) { > errno: -4078, > code: 'ECONNREFUSED', > syscall: 'connect', > address: '::1', > port: 3000 > } > } > > Build error occurred > Error: Failed to collect page data for /content/[slug] > at D:\Programmi\Axira\reep-demo1\node_modules\.pnpm\next@13.4.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\build\utils.js:1155:15 > at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { > type: 'Error' > } I Was thinking: what if this problem occurs because the data that nextjs needs to fetch isn't available because the api is located in the same website that is now offline because it needs to build? Maybe this could be the problem but i don't know how to fix it Could someone Help me please? Thanks in advance!
Don't fetch your own API routes in getServerSideProps and similar functions; import your server-side logic directly instead. See more info [here](https://nextjs-discord-common-questions.joulev.dev/fetching-own-api-endpoint-in-getserversideprops-and-similar-functions)
Answer
@joulev what do you mean?
For example, i have 10 Thousand contents, Do i need to fetch all of them every time i build, generating all static pages?
say if you have a LOT of products to display, then you probably need to use pagination/infinite scrolling
yeah then you shouldn't fetch all of them
instead only fetch the first, say, 100 items in gssp
send it to the client side as initial value for react-query or swr
then use react-query/swr to handle pagination/infinite scrolling where you will fetch more items when you need to
Oh okay! So, can i not generate all 10 thousand static pages every time at build?
oh so you are talking about 10 thousand pages and not displaying 10 thousand items in the same page?
then ignore what i said
for example, i could take: limit, with prisma
in that case you should generate only 100 pages in getStaticPaths
but use fallback: "blocking"
or fallback: true
Oh okay, but what if a user wants to access a page that is outside that is the 101°?
Will the page get generated even if isn't part of the first 100?
@Idra Oh okay, but what if a user wants to access a page that is outside that is the 101°?
with fallback: blocking/true, the page will be server-side rendered at request time (so it will be slower than statically generated pages), but that page will be cached from then on and the second visit to that page will have static performance
read the link for more info
Okay, thanks! 😄