Example of server read-only component

server-read-only-component.tsx

// src/components/server-read-only-component.tsx

'use client';

import { useAtom } from 'jotai';
import { useHydrateAtoms } from 'jotai/utils';
import { userAtom } from '../state';

type Props = {
  userData: {
    isLoggedIn: boolean;
    isAdmin: boolean;
  };
};

export const ServerReadOnlyComponent: React.FunctionComponent<Props> = ({ userData }) => {
  useHydrateAtoms([[userAtom, userData]]);

  const [user] = useAtom(userAtom);

  if (!user.isLoggedIn) return null;

  return (
    <>
      {user.isAdmin ? <div>An admin feature</div> : null}
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </>
  );
};