typeof window
, window.document
and Document.createElement()
to check if the code is running on the browser.useState()
hook to define the inBrowser
state variable.useEffect()
hook to update the inBrowser
state variable and clean up at the end.useMemo()
hook to memoize the return values of the custom hook.const isDOMavailable = !!(
typeof window !== 'undefined' &&
window.document &&
window.document.createElement
);
const useSSR = () => {
const [inBrowser, setInBrowser] = React.useState(isDOMavailable);
React.useEffect(() => {
setInBrowser(isDOMavailable);
return () => {
setInBrowser(false);
};
}, []);
const useSSRObject = React.useMemo(
() => ({
isBrowser: inBrowser,
isServer: !inBrowser,
canUseWorkers: typeof Worker !== 'undefined',
canUseEventListeners: inBrowser && !!window.addEventListener,
canUseViewport: inBrowser && !!window.screen
}),
[inBrowser]
);
return React.useMemo(
() => Object.assign(Object.values(useSSRObject), useSSRObject),
[inBrowser]
);
};
const SSRChecker = props => {
let { isBrowser, isServer } = useSSR();
return <p>{isBrowser ? 'Running on browser' : 'Running on server'}</p>;
};
ReactDOM.render(<SSRChecker />, document.getElementById('root'));
Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️