version?

Disable [reactStrictMode](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactStrictMode):

next.config.js:

module.exports = {
  reactStrictMode: false,
}

Also: dont fetch inside your useEffect with server actions. Server actions dont exists to fetch stuff. They are made to mutate data on server

16

Strict mode is already set to false.

Not sure I understand what you meant, use effect and server actions are different things.

Why not fetch inside use effect and have server action for form submission?

I found out it is being fired twice because once you navigate to a different path, it tries to prefetch the page, then it does the real navigation

yes, useEffect and server actions are different things. Many people using them to fetch data on the client like this:

...
useEffect(() => {
  async function fetchAsync() {
    const result = await fetchingWithServerAction()
    setResult(result)
  }

  fetchAsync();
}, [])

There are serveral problems:
- Fetching using useEffect
- Fetching with server actions
- A lot of boilercode
- Unpredicable (re)renders

What would be the best case? To fetch stuff inside your client components, use a clientside fetching library like React Query or SWR. They contain on one side some utility functions/states, that are pretty helpful and on the other side they prevent unexpected behavior that you currently experiencing. Also instead of using a server action to fetch it, use a route handler for it

Uh no that is not the case.

Currently I have a simple page tsx server component that renders some basic html, divs, p's elements and so on.

I tried to log from that component which is an async function, but it fires twice.

That is my issue.


I ended up adding a custom component which all it does is use effect which sends API request to the server to log it

Instead of directly logging to the server in the server component.


Because it fired multiple times instead of one

hard to say without more information but if this component is accessed via a <Link /> you may need to try <Link prefetch={false} />

It is accessed with a button click which sends server action and based on the response redirects the user using router push

This is the workaround to prevent from functions fire twice at sever components?

yes. Another solution would be, to keep everyhing serverside, like you did before and wrap your function into a React.Cache to dedupe requests

I understand. For some reason it feels hacky just to prevent it from firing twice

Having a good solution is waaay better than have a bad solution for this issue. Especially when it comes to huge codebases

I will give that a try, thank you

sure, please mark solution[:](https://cdn.discordapp.com/attachments/1043615796787683408/1117191182133501962/image.png?ex=69309fde&is=692f4e5e&hm=d8f7cb1c4fa9ffb4b8b9de12241bca10d9f9945a927f4db947f6ddc4011918f8&)