@Polar bear
I never used client-only before but I am almost sure that they are totally different

so use client directive is from Next.js app router (RSC)

In app router, there are two types of components called Server Component and Client Component.

use client directive is used to indicate that the component is a client component with user interaction - like event handlers

you can also use hooks there while you are not able to use hooks in server components

Yeah I understand they are different, I am just trying to understand the different approaches.

It seems like if I have a component that has client only features, and all I do is mark it as use client, then anyone using the component is just left to solve the issues on their own.

If I use the client-only package, and ensure that my component can only be imported into client components, then there should not be any issues.

what do you mean by client only features?

use client components run on both, client and server (they are pre-rendered on the server )
client-only components are restricted to running exclusively on the client and do not have any server-side pre-rendering.
I use client-only with some libraries that have issues running on server

use client can still benefit from SEO because it allows pre-rendering on the server before becoming interactive on the client. On the other hand, client-only doesn't pre-render, so it's less favorable for SEO.

i have used client-only with some libraries or features that had issues running on server, so i restrict them

oh makes sense

then I think client-only is something like dynamic import with ssr: false

btw what kind of issues do you have running them on the server?

is client-only library work smooth in next.js? as we do dynamically import with ssr: false?

I havent used ssr: false, but yeah I think its something similar, just more declarative way
I had the issue with some maps at the beginning of next 13 when most libraries weren't ready for SSR, now they fixed it and it works fine
also with code that uses the window object
they talk a bit more of client-only at here
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment

So if I have a Button component that has event handlers, and it is marked as use client, my options are that I can either

1. Mark the parent as a client component so I can pass in the event handlers as props
2. Set my event handlers as server actions using use server

import "client-only"; is meant to throw an error if imported in a server component (counterpart to import "server-only";.) Both are NPM packages.

In contrast, "use client"; is a directive that instructs the compiler to change how it imports the file and transform the code inside, where it would execute it, etc. Counterpart to "use server"; where it would create RPC-similar endpoints to handle calls transparently between client and server.

That' how I understand them.

yeah this is nice explanation:
* use client creates client boundary
* client-only requires it to be imported into file in client boundary

Yeah this all makes sense. So from a library author perspective, my questions are stemming from what provides the best experience and the most flexibility for someone using my component.

also note that if you have import "server-only" and you expect your lib to work in normal environments it will throw error (as it abuses export conditions where default is bad) - iirc client is inverse so your fine

well are you exporting a client component, or something that should only be used by client

Yeah we only considered using client-only and letting the user decide where their client boundary is, instead of adding use client to every component.

I am exporting UI components like Button and TextField.

-# (also i havent looked enough but im not sure if "use client" does stuff in nodemodeules, but im sure it does)

They utilize client only functionality, like event handlers and hooks/context

adding use client to every component. - why?

The components will only work on the client

yeah I mean why to every component?

having 'use client` in the parent component

and then you can have client component inside it I think

This is a library of components that our users will install to build their apps

Its an internal company design system/component library.

oh, you were an author of a UI library? amazing

We have dozens of apps using the components across NextJS, Remix and Vite.

wow, I think it should be a big company