Reputation: 13
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