I’m not sure I understand RR7 "client components"

[EricWVGG]

I'm putting an interactive P5 canvas component in my React Router 7 (framework mode) app using the @p5-wrapper/react package. It's kind of a paint/doodling app, and I fully expected SSR to choke on it (which it happily does).

What I don't get is how to tell the server not to render this component. I tried naming the file footerfx.client.tsx, and that got nowhere. I also tried React's built in lazy component import, and <Suspense> to initialize upon load. Also didn't work.

Ultimately the only thing that worked is adding this to footerfx.tsx:

return typeof window === 'undefined' ? null : <P5Canvas sketch={sketch} ... />

What am I missing here? If naming a file .client doesn't specifically tell the SSR engine to not render the component, what is that even for?

[sergiodxa]

There's no such thing as client components in RR.

Adding .client to a file tells the bundler to don't include that file on the server bundle, which is useful for code that will break on import (e.g. if you use a browser API on the module itself).

If you only want to prevent rendering but the component being imported server-side is ok, you need to skip the render, what you did works, but will cause hydration errors, a better solution is to use something like ClientOnly, you can check the code of that repo and copy the implementation as it's quite simple.