How to update page when fetching data from a hosted postgresql db

I'm building a react nextjs project, deployed to Vercel, that uses Prisma and a postgresql db hosted on Heroku. I'm following this tutorial: https://vercel.com/guides/nextjs-prisma-postgres.

When I update the db (by creating a new post) it does NOT update the posts displayed on the screen.

The strange thing is that it works as expected (updates the post feed) when running it on localhost.

Refreshing the page does NOT update the page's posts... But redeploying the same vercel build does update the page's posts.

Localhost and the deployed app use the same heroku db instance.

Here is the page that lists the Posts

export const getStaticProps: GetStaticProps = async () => {
  const feed = await prisma.post.findMany({
    include: {
      author: {
        select: {
          name: true,
        },
      },
    },
  })
  return {
    props: { feed },
  }
}

type Props = {
  feed: PostProps[]
}

const Blog: React.FC<Props> = ({ feed = [] }) => {
  const router = useRouter()

  const refreshData = () => {
    router.replace(router.asPath)
  }

  useEffect(() => {
    // Added this to try refresh page
    refreshData()
  }, [])

  return (
    <main>
      {feed.map((post) => (
        <div key={post.id} className="post">
          <Post post={post} />
        </div>
      ))}
    </main>
  )
}

export default Blog