Why does this minimal client component render 2x just on load?

[dsign-phil]

Summary

So here's a simple page.tsx:

That one ./overview component snips like this:

Well the console in that page, just freshly-F5-refreshed, shows the first log call being repeated 2x and the second 4x:

How do these repeats happen? For over-the-network fetches, I'd rather not have them done 2-4x where 1x was intended..

Additional information

No response

Example

No response

[icyJoseph]

In Dev Mode, React's Strict Mode is enabled. https://react.dev/reference/react/StrictMode

Verify that this doesn't happen in prod, or try disabling reactStritctMode in next.config.js, https://nextjs.org/docs/app/api-reference/config/next-config-js/reactStrictMode

[icyJoseph]

Also that comment about use client:

• Why do Client Components get SSR'd to HTML? reactwg/server-components#4
• https://nextjs.org/docs/app/getting-started/server-and-client-components#on-the-server

Client Components and the RSC Payload are used to prerender HTML.

So, a file having use client directive, is more of an indication that the should also be bundled to be sent to the client, and executed over there. Server Components, the default with out the directive, means, that the code for these components, will not be bundled and will not ever be sent to the client.