Azure / static-web-apps

Azure Static Web Apps. For bugs and feature requests, please create an issue in this repo. For community discussions, latest updates, kindly refer to the Discussions Tab. To know what's new in Static Web Apps, visit https://aka.ms/swa/ThisMonth
https://aka.ms/swa
MIT License
318 stars 53 forks source link

NextJS on demand revalidation (ISR) not updating pages in Azure SWA (works locally and on Vercel) #1503

Open znssss opened 3 days ago

znssss commented 3 days ago

Describe the bug I have a NextJS app that uses the pages router in Azure SWA. It is literally just an npx create-next-app with one page configured to get data from a headless CMS inside getStaticProps and then display the data on the page.

I have then set up an api route in Next that uses .revalidate() to revalidate the page (code below).

Everything works fine when I create and locally host a production build using npm run build and npm run start. Everything also works when I deploy to Vercel. I change the data in the CMS > call the API route to trigger revalidation > reload page > see changes. Just not seeing the same results in Azure SWA, as the content is not updating.

Using npx create-next-app also creates an api endpoint /hello which i have tested after deploying to Azure SWA and that seems to be working fine.

I am on the free hosting plan. not sure if this makes any difference?

To Reproduce Steps to reproduce the behavior:

  1. Create new Next app using npx create-next-app using the pages directory.
  2. Configure '/' page to get data from headless CMS.
  3. Create api route using code above.
  4. Deploy to Azure SWA.
  5. Update content in headless CMS.
  6. Call API endpoint to revalidate page.
  7. Refresh page hosted on Azure SWA - content should have updated but it hasn't.

API route that handles revalidation request:

export default async function revalidate(req, res){
    try {
        console.log('revalidating: /')
        await res.revalidate('/')
        return res.status(200).json({ message: 'Revalidated: /' })
    } catch (error) {
        return res.status(500).json({ error: error.message })
    }
}

Expected behavior Same steps as the To Reproduce section, except the final step sees updated content. Again - this is working locally and in Vercel.

Device info (if applicable): Not device specific. Tried across multiple machines.

Additional context My first time creating an issue in Github. Please let me know if any more details are needed.