NextJS app on Vercel not syncing with Notion API updates

Other Questions Notion
1

I’m having trouble with my NextJS blog that uses the Notion API for content. It’s weird because everything works fine on my local machine. I can make changes in Notion and see them right away. But when I deploy to Vercel, it’s like the app is stuck. The changes I make in Notion don’t show up on the live site. I’ve tried deploying straight from Vercel instead of going through Github, but no luck. Here’s a simplified version of my code:

const notionClient = new NotionClient(process.env.NOTION_API_KEY);

async function fetchBlogPosts() {
  const dbId = process.env.NOTION_DB_ID;
  const result = await notionClient.queryDatabase({
    database_id: dbId,
    filter: { property: 'isPublished', checkbox: { equals: true } },
  });

  return result.results.map(post => ({
    id: post.id,
    title: post.properties.postTitle.title[0].text.content,
    url: post.properties.urlSlug.rich_text[0].text.content,
    categories: post.properties.categories.multi_select.map(cat => cat.name),
    publishDate: post.created_time,
  }));
}

Any ideas on why it’s not updating on Vercel? I’m totally stumped!

2

hey, i had a similar issue. turned out vercel was caching my api calls. try adding a revalidation strategy to ur pages. in getStaticProps, add:

return {
  props: { posts },
  revalidate: 30 // revalidate every 30 secs
};

this tells nextjs to check for updates more often. hope it helps!

3

I encountered a similar issue with my NextJS app on Vercel using the Notion API. The problem turned out to be caching. Vercel caches API responses by default, which can cause delays in reflecting Notion updates.

To fix this, I added a revalidation strategy to my pages. In your getStaticProps function, try adding a revalidate property:

export async function getStaticProps() {
  const posts = await fetchBlogPosts();
  return {
    props: { posts },
    revalidate: 60 // Revalidate every 60 seconds
  };
}

This tells Next.js to regenerate the page after 60 seconds if a request comes in. You can adjust the time based on how frequently you update your content.

Also, make sure your environment variables are correctly set in Vercel. Sometimes, issues can arise from mismatched API keys between local and production environments.

If the problem persists, you might want to implement ISR (Incremental Static Regeneration) or switch to getServerSideProps for more dynamic content fetching.

4

Have you considered the potential impact of Vercel’s edge caching on your application? This could be the root cause of your sync issues. To address this, you might want to implement a custom caching strategy or utilize Vercel’s on-demand Incremental Static Regeneration (ISR).

For a quick fix, try adding cache-control headers to your API routes:

export default async function handler(req, res) {
  res.setHeader('Cache-Control', 's-maxage=1, stale-while-revalidate');
  // Your existing code here
}

This instructs Vercel to revalidate the cache more frequently. Additionally, ensure your Notion integration token has the correct permissions and is properly set in your Vercel environment variables. If the problem persists, you might need to investigate Vercel’s function logs for any API-related errors.