How to run mutation on page load in Next.js?

Question

My goal is to run a mutation as soon page loads and update the page when the mutation is complete, i.e. This is what I am trying at the moment:

useEffect(() => {
  void trpc.generateArticle.useMutation();
}, []);

The problem is that useEffect() runs twice when in development mode.

I understand why – it is covered in this Stack Overflow question.

However, I don't understand what is the proper way to implement this pattern (starting mutation as soon as page loads) if I am not supposed to use useEffect here.

How to run mutation on page load in Next.js and run it only once?