CSR at a component level vs a route level?
Is it possible to only CSR certain components? I know you can do it at the route level in the createFileRoute({ssr: false}), but wondering if certain components could be excluded. I need to load in data from local storage to be used in a component, but it can be loaded in after a server render. I would like to avoid using a useEffect hook, if possible.
4 Replies
ratty-blush•5mo ago
You could take inspiration from remix-util’s ClientOnly component
The useHydrated trick is not remix specific, worth checking the file code
https://github.com/sergiodxa/remix-utils/blob/main/src/react/client-only.tsx
GitHub
remix-utils/src/react/client-only.tsx at main · sergiodxa/remix-utils
A set of utility functions and types to use with Remix.run - sergiodxa/remix-utils
adverse-sapphire•5mo ago
we'll also soon expose our impl here
https://github.com/TanStack/router/pull/3969
GitHub
feat(react-router): Export
ClientOnly by zrosenbauer · Pull Requ...Exposes the ClientOnly component for preventing rendering & hydration errors.
Background
When you attempt to prevent content from rendering using something like typeof document !== '...
ratty-blushOP•5mo ago
Thank you both for sharing!
xenophobic-harlequin•4mo ago
there is a better solution - ClientOnly component - https://tanstack.com/router/latest/docs/framework/react/api/router/clientOnlyComponent