How to force Zustand to work on client side only?

When using Zustand for state management, it is important to ensure it only operates on the client side, especially in server-side rendering (SSR) environments like Next.js. To achieve this, we can take the following steps:

1. Utilize Browser Global Variables

Since Zustand is fundamentally built on React, we can leverage React lifecycle hooks (such as useEffect) to ensure the Zustand store is initialized and subscribed exclusively in the browser environment. This is because useEffect executes only on the client side.

Example code:

javascript
import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}));

const Counter = () => {
  const { count, increment } = useStore();

  useEffect(() => {
    // This code runs exclusively on the client side
    increment();
  }, []);

  return <div>Count: {count}</div>;
};

2. Distinguish Between Server-Side and Client-Side Logic

In frameworks like Next.js, we can use typeof window to determine whether the code runs on the server or client. If executed on the server, avoid initializing or manipulating the Zustand store.

Example code:

javascript
import create from 'zustand';

let useStore;

if (typeof window !== 'undefined') {
  // Initialize the store exclusively on the client
  useStore = create(set => ({
    count: 0,
    increment: () => set(state => ({ count: state.count + 1 }))
  }));
} else {
  // Provide an empty or read-only store on the server
  useStore = () => ({ count: 0, increment: () => {} });
}

const Counter = () => {
  const { count, increment } = useStore();

  return <div onClick={increment}>Count: {count}</div>;
};

3. Implement Dynamic Imports

In Next.js, we can use dynamic imports (next/dynamic) to ensure components load and render only on the client side. This prevents rendering or initializing Zustand-related logic during server-side rendering (SSR).

Example code:

javascript
import dynamic from 'next/dynamic';

const CounterWithStore = dynamic(() => import('../components/Counter'), {
  ssr: false  // Ensures no server-side rendering
});

// When using the CounterWithStore component, it loads and renders exclusively on the client

By employing these methods, we can effectively ensure Zustand operates solely on the client side, thereby avoiding unnecessary complexity or potential errors during server-side rendering.