I'm trying to perform an ISR fetch revalidation request. I tried this:
let data=await fetch(process.env.NEXT_PUBLIC_NodeURL+'/admin/panel/api',{
next:{ revalidate: 60 }//1 minute
}).then((response)=>response.json())
route code(i.e. process.env.NEXT_PUBLIC_NodeURL+'/admin/panel/api'):
import { NextResponse } from 'next/server';
import { getISRdata_adminPanel_controller } from '@/server/controllers/admin';
export const dynamic="force-dynamic";//Forces fresh data every request
// called from admin/panel/page.js
export async function GET(){
return NextResponse.json(await getISRdata_adminPanel_controller())
}
controller func:
export async function getISRdata_adminPanel_controller(params){
console.log('controller method entered')
return data[{'testing','testing','testing'}, {'testing','testing','testing2'}]
}
It's working 4 out of 5 times however 1 out of 5 times I'm getting a build error indicating:
SyntaxError: Unexpected token 'T', "The deploy"... is not valid JSON
at JSON.parse (<anonymous>)
So it means the api wasnt called or it returned null. But I saw this line 'controller method entered' was printed which means the controller function was called. For some reason, 1 out of 5 times, the asynchronous fetch call returns null
Then I extended to this:
let data
let cntAttemptsISR=0
while(!data && cntAttemptsISR<500){
try{
data=await fetch(process.env.NEXT_PUBLIC_NodeURL+'/admin/panel/api',{
next:{ revalidate: 60 }//1 minute
}).then((response)=>response.json())
}catch{}
cntAttemptsISR++
if(!data) await new Promise(resolve=>setTimeout(resolve, 100))//add a small delay
}
if(!data) return(
<Card className={styles.mainDiv} >
<h1>Administrator Panel</h1>
<h3>This page is being updated, check back in a few minutes</h3>
</Card>
)
return(
<Card >..........{maincontent}
Trying for 500 times if null relooping hoping 1 times it won't be null. Upon testing, it's not generating a build error but 4 out of 5 times when I surf to the page I'm seeing the fallback which indicates that data is null:
I tried waiting for the revalidate interval to see if it'll refresh however it didn't.
I then went back to vercel, find the current deployment and redeploy it after which it worked fine. N.B. I didnt upload a new project, I simply redeploy in vercel and when I surf to the page it's working and I'm seeing the maincontent with my cached data.
One out of 5 times it's deploying without any issues and I'm seeing the maincontent with my cached data
Does anyone knows why this is happenning?