ISR Can't handle API Calls
Answered
Idra posted this in #help-forum
IdraOP
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
This is my Client Side version (that works in prod.):
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
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!
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)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 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>)
IdraOP
Oh okay! Now it works, thanks!
If for example i have a LOT of contents, do i need to fetch all of them with prisma?
If for example i have a LOT of contents, do i need to fetch all of them with prisma?
@joulev what do you mean?
IdraOP
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
IdraOP
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
IdraOP
for example, i could
take: limit, with prismain that case you should generate only 100 pages in getStaticPaths
but use
fallback: "blocking"or
fallback: trueIdraOP
Oh okay, but what if a user wants to access a page that is outside that is the 101°?
IdraOP
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
IdraOP
Okay, thanks! 😄