A Better useSSR Implementation

Published ....
Last modified ....

Share this post on BlueskySee 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!

Most of these implementations look something like this:

import { useState, useEffect } from "react";

export function useSSR() {