mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-10-28 15:46:58 +09:00
Bogdan Chadkin
d0a00a3ebc
We don't need canvas to be rendered server side either. ```diff build/server - 1164 kB + 812 kB ``` Removed components metas form static json since we not longer bundle all components on server. Also refactor client only component with useSyncExternalStore which render without waiting for effect commit and avoids hydration errors at the same time.
21 lines
426 B
TypeScript
21 lines
426 B
TypeScript
import { type ReactNode, useSyncExternalStore } from "react";
|
|
|
|
export const ClientOnly = ({
|
|
fallback,
|
|
children,
|
|
}: {
|
|
fallback?: ReactNode;
|
|
children: ReactNode;
|
|
}) => {
|
|
// https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store
|
|
const isServer = useSyncExternalStore(
|
|
() => () => {},
|
|
() => false,
|
|
() => true
|
|
);
|
|
if (isServer) {
|
|
return fallback;
|
|
}
|
|
return children;
|
|
};
|