Documentation
useSSR

useSSR

The useSSR hook allows you to identify whether your code is running in a server-side or client-side environment. This is particularly useful for handling logic that should only execute in the browser, such as DOM manipulations or accessing browser-specific APIs.

Usage

First, you need to import the useSSR hook from the kitchn package.

import { useSSR } from "kitchn";

Example

Here is an example of how to use the useSSR hook in a component:

Is this running in the browser? Yes

Is this running on the server? No

Code Editor
() => {
  const { isBrowser, isServer } = useSSR();

  return (
    <Container>
      <Text>Is this running in the browser? {isBrowser ? "Yes" : "No"}</Text>
      <Text>Is this running on the server? {isServer ? "Yes" : "No"}</Text>
    </Container>
  );
};

Parameters

The useSSR hook does not accept any parameters.

Return Value

The useSSR hook returns an object with the following properties:

NameTypeDescription
isBrowserbooleantrue if the code is running in the browser; false otherwise.
isServer booleantrue if the code is running on the server; false otherwise.
Last updated on