Introduction

Remix Runtime, Client, and Server, vite or edge

React Server Component

Client Component in Remix

modules

How to avoid rendering client components on the server side?

remix-utils

component

Let's look deeper into the code

1export function ClientOnly({ children, fallback = null }: Props) {
2  return useHydrated() ? <>{children()}</> : <>{fallback}</>;
3}

code

1import { useSyncExternalStore } from "react";
2
3function subscribe() {
4  return () => {};
5}
6
7export function useHydrated() {
8  return useSyncExternalStore(
9    subscribe,
10    () => true,
11    () => false,
12  );
13}

code

is a React API to subscribe an external state. For example, if you want to check if the user is online, you will use

. All of these are browser APIs. You can bring them into React by this hook.

This hook can be used on both sides, the server and the client.