Ryan
Ryan

Reputation: 13

implementing Incremental Static Regeneration(ISR) without keyword "fetch"

I've tried many ways to make my one page in this web app build in ISR- this app uses Google Spreadsheets as a database and the user fills out the spreadsheet, and it populates the page. I want it to regenerate the schedule data every 3000 seconds

It uses NEXT.js 14 (which doesn't seem to support getServerSideProps. Originally had the data fetching done in a separate js file - app/agendaData.js and then pulled that data from the page app/schedule/page.tsx. The Google API doesn't use the word fetch, and I've tried to use the export const revalide = 3000 or force_cache, but this page still builds as static.
I put the data fetching call on the page itself, app/schedule/page.js as the 14 docs recommend. Please see my current code attempt and any help to make it build using ISR.


const serviceAccountAuth = new JWT({
   //google api credentials
  scopes: [
    'https://www.googleapis.com/auth/spreadsheets',
  ],
});


const theData= unstable_cache(async () => {
  try {

    const doc = new GoogleSpreadsheet(process.env.GOOGLE_SHEET_ID, serviceAccountAuth);

    await doc.loadInfo()


    const sheet = doc.sheetsByIndex[0];
    const rows = await sheet.getRows();


    let rowData: any[] | PromiseLike<any[] | undefined> | undefined = [];

    rows.map((row, index = 0) => {
      let rowNum = row['_rowNumber'];
      let day = row['_rawData'].shift()


      let newObj = {
        'id': rowNum,
        'day': day,
        'data': row['_rawData']

      }
 
      rowData.push(newObj);
    })

    return rowData;
  }

  catch (error) {
    console.log(error)
    await theData()
  }

}, { 
  revalidate: 60})





// @ts-ignore
// @ts-ignore

export default async function Schedule(){
  let data;
  do {
    try {
      data = await theData()
    } catch (error){
      console.log(error)
    }} while (data === undefined)
  let day1 = data.filter(item => item['day'] === '1');
  // @ts-ignore
  let day2 = data.filter(item => item['day'] === '2');
  // @ts-ignore
  let day3 = data.filter(item => item['day'] === '3')
 
  return HTML

Upvotes: 1

Views: 64

Answers (0)

Related Questions