confusion about server vs client components

[pdeva]

i am coming to remix from nextjs 13 ‘apps folder’ code. one thing i cant seem to find any explanation for is when is a component rendered server side vs client side? nextjs makes this very clear, but all the docs i read for remix say it does only server side rendering….

[sergiodxa]

In Remix all components do SSR and after hydration they all do CSR.

Remix doesn't use React Server Components feature like Next 13 app folder.

[kiliman]

You can use the <ClientOnly> component from remix-utils

[pdeva]

i see. so the docs for remix-utils say this:

If you're using React 18 and a streaming server rendering API (eg. renderToPipeableStream) you probably want to use a boundary instead.

 return (
   <Suspense fallback={<SimplerStaticVersion />}>
     <ComplexComponentNeedingBrowserEnvironment />
   </Suspense>
 );
}

does the Suspense boundary recommendation apply to remixjs or should ClientOnly be specifically used (as in the docs)?

export default function Component() {
  return (
    <ClientOnly fallback={<SimplerStaticVersion />}>
      {() => <ComplexComponentNeedingBrowserEnvironment />}
    </ClientOnly>
  );
}

[sergiodxa]

It applies to Remix, remix-utils package is specific for Remix, I wouldn't write anything there that doesn't work in a Remix app.

[pdeva]

ok. so maybe my react-foo is pretty weak, but i dont get when would one use <Suspense> vs <ClientOnly> when using Remix. Does using <Suspense> make the component inside 'client-only'?

The docs specifically say to use <Suspense> when "using React 18 and a streaming server rendering API". I personally dont know anything about streaming server rendering API. I am indeed using React, but with Remix. I dont know if Remix internally uses streaming server rendering API. So if i am using Remixjs, am i supposed to be using Suspense or ClientOnly to make my component render client-only?

[sergiodxa]

Suspense catch errors thrown by component like accessing client APIs (e.g. useState(() => window.innerWidth)) and render the fallback, then when the app hydrates it will try to render it again but because it's on the browser now it will work and replace the fallback with the actual UI, but without causing hydration errors.

The thing is that you can't use Suspense on SSR if you don't use React 18 with Streaming SSR.

I don't know if Remix internally uses streaming server rendering API

Newly created Remix apps has streaming SSR already configured, however because you own the entry.server file where SSR happening you control this, Remix doesn't render your app for you, you're doing it in that file.

So if i am using Remixjs, am i supposed to be using Suspense or ClientOnly to make my component render client-only?

IMO you can have a simpler time using ClientOnly all the time and ignore all of that, but because it's possible to also use Suspense and don't depend on Remix Utils for this I mention it.