"use client" function based

[rentalhost]

Goals

Hello, I would like to suggest something to make server and client components more practical in Next.js. Currently, it's necessary to specify whether a component is for the server or client using "use client" when required.

The issue is that in some cases, I need something "mixed". For instance, when defining the page.tsx (which theoretically should be kept as server since it would have access to metadata control only supported on the server) and needing to use something like SWR, I'm then forced to turn it into a client (which conflicts with the server metadata).

To solve this problem, we need to create an additional file as a client component, and our page.tsx just acts as a proxy for the main component.

export default function Home() {
  return <ClientComponent />
}

I have two suggestions in this regard: either allow the definition to be done through a function, for example:

export default function Home() {
  "use client";
  const ... SWR
  return <>...
}

Or Next.js could automatically identify functions that depend on client resources. For example, if I have a function that uses useState(), then this function is for the client, while the file itself would always be treated as for the server. This would be the ideal solution, but I'm uncertain about the complexity of such automatic analysis.

[chrisyalamov]

Big +1 for this feature.

Like @rentalhost mentioned, a common use case is when you need something "mixed," e.g. using components which require both data and client-side interactivity.

For instance:

<DataList
  data={myData}
  onItemClicked={item => alert(item.title + " clicked")}
/>

If I want to use this in the same component where I query the data, I need to create an intermediary component in a separate file, which receives the data and injects interactivity itself.

Being able to use "use client" inline would help to avoid excessive decoupling, keeping a much cleaner file tree. Obviously, a lot of people disagree with a many components-one file convention, but it should at least be available as an option for avoiding unnecessary complexity in particular cases.

[rentalhost]

I'm in favor of "the more files, the better", the problem is that this issue of the "use client" working the way it does today creates a problem of "lots and lots of files" just to serve as a "proxy" (as you also mentioned), which creates something more than necessary. Too much sugar makes you sick, in this case.

I really hope that the Vercel team hears from us here as soon as possible, it's currently the only thing that makes the process less enjoyable that I can think of at the moment.