A Better useSSR Implementation

Published 📅: ....
Last modified 📝: ....

Share this post on Bluesky See discussion on Bluesky

For teams working within a server side rendered react app (like when using Next.js or Remix), I often see a useSSR (or useClient) hook within the codebase.

These hooks usually return a boolean indicating if we're on the client or being server rendered - this can be useful to introduce some functionality when we are on the client and now have access to the window or navigator globals for example, or can be a useful way to render different UI on the server or the client!

import {useState, useEffect} from 'react';

export function useSSR() {
  let [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true)
  }, [])

  return mounted;
}

import {useSyncExternalStore} from 'react';

let emptySubscribe = () => () => {};

export function useSSR() {
  return useSyncExternalStore(
    emptySubscribe,
    // client value:
    () => true,
    // server value:
    () => false,
  );
}

A Better useSSR Implementation

A Better useSSR Implementation

Tags:

Related Posts

Web Development

Related Posts

Web Development

Tip

React