Question 73330 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to render component only client side with Remix? – Reactjs

I have a three.js component that should only be rendered client side, how do I do this with Remix? Does Remix expose any utilities to help determine if we’re in a server or client context? Could not find anything.

Here is an example of what I’m attempting to do with fictional hooks that don’t exist in remix.

import React from 'react';
import { useRemixContext } from '@remix-run/react';

const MyComponent = () => {
  const remixContext = useRemixContext();
  if(remixContext.server) {
     return null;
  }
  return <div>Should only be rendered on the client</div>
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    One can use the ClientOnly component exposed by the remix-utils library, which takes a function returning a component as a child which will be rendered client side only.

    This component uses the hook useHydrated internally which is also exposed if you do not wish to use the component only for client side rendering.

    Note that in development mode this did not originally work for me, I don't know if this is because I'm using remix-deno template or that it just does not work in general with the live reload, but once deployed in production it worked like a charm.

    import React from 'react';
import { ClientOnly } from "remix-utils";

const App = () => {
  return <ClientOnly fallback={null}>
     {() => <MyComponent/>}
  </ClientOnly>
}

    Also note that Suspense will eventually be released which should replace the above code.


  2. 0

    There is no client-only option when using Remix or any other server-side framework. You can only decide how much to render on the server side vs client side.

    You would just write vanilla React code. There will always be some component code rendered on the server-side, but you can minimize this by using the standard approaches to writing a React project (useState/useEffect/fetching).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search