In a use-client file, I'm creating a context and exporting a provider and access hook. In this example, I'm rendering the provider in a client component, but I've seen the same when rendering in a server component (like a layout).

After making changes and reloading the page, I see server rendering errors:

Uncaught Error: Switched to client rendering because the server rendering errored:

Cannot read properties of null (reading 'useContext')

Restarting local dev and these errors go away. Just want to make sure I'm not misunderstanding the server/client weaving.

// SessionList.tsx (server)
async function SessionsList() {
  const { gameSessions } =
    await api.poker.gameSession.getSessions();

  return (
    <div className="flex flex-col gap-2">
        <Heading>Live sessions</Heading>
        {gameSessions.map((gameSession) => (
          <Session {...gameSession} key={gameSession.id} />
        ))}
    </div>
  );
}

export function LazySessionsList() {
  return (
    <Suspense fallback={<p>Loading sessions...</p>}>
      <SessionsList />
    </Suspense>
  );
}

export function Session(session: Session) {
  return (
    <Card className="p-2">
      <SessionProvider session={session}>
        <SessionHeader />

        <div className="mt-2 border-t border-t-gray-400 py-2">
          <SessionDetails />
        </div>
      </SessionProvider>
    </Card>
  );
}