Core Concept

A common request for advanced uses cases is the ability to detect if your NexJS application code is executing on a server or a client environment.

We know that once deployed our nextjs application first executes on the server and then after it sends the initial response to the client, React hydrates our user interface and starts executing it on the browser.

While its executing on the server, you might access some data using a database driver, but when you are executing on the client you would need to access that information using an http call to an api.

So essentially you can abstract this behind a utility (e.g. loadData()) that might choose to do different things based on the environment it is currently executing in.

Using Environment Specific Globals

Fortunately its not that hard to detect the runtime environment. A simple way to achieve this is by checking the presence some global feature that is only present on the server or only present on the client.

A common pattern is:

const isClient = typeof window !== 'undefined';

This is demonstrated below with a component that renders different messages on Server vs. Client.

lib/DetectEnvironment.tsx

app/server/page.tsx

app/client/page.tsx

const isClient = typeof window !== "undefined";

export default function DetectEnvironment() {
  return <div>{isClient ? "Client-side" : "Server-side"}</div>;
}

Beware of Hydration Errors

However the approach of using global variable detection is not ideal as it can result in hydration errors. What this means is that the content we render on the server might not match what is rendered on the client.

This is demonstrated below.

app/hydrate/page.tsx

lib/DetectEnvironment.tsx

"use client";

import DetectEnvironment from "@/lib/DetectEnvironment";

export default function Page() {
  /** 
   * This will result in a runtime hydration error
   * Reason: 
   * - client components render on server and hydrate on client
   * - the output of both should match
   * - this is not the case for <DetectEnvironment/>
   */
  return <DetectEnvironment />;
}

Note that hydration errors will only happen if the rendered content on the server doesn’t match what we render on the client. If we take different execution paths based on the environment BUT return the same content, then it will not be an issue.

Safely Executing Client Specific Code

But what if we want to render something different, once our code has been successfully bootstrapped on the client. For that you can execute your logic on the component mounted event. We know from our React course that the built in hook for this purpose is called useEffect.

useEffect(() => {
  // Runs only on the client
  setIsClient(true);
}, []);

This is demonstrated below, the key thing to focus over here is that you can utilize the useEffect component did mount pattern to contain code that will only execute on the client.

lib/UpliftOnClient.tsx

app/page.tsx

"use client";

import { useEffect, useState } from "react";

export default function UpliftOnClient() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    // Runs only on the client
    setIsClient(true);
  }, []);

  return <div>{isClient ? "Client-side" : "Server-side"}</div>;
}

Transcript