next-isomorphic

Share state between the client and server using cookies.

Install

1# npm
2npm install next-isomorphic

1# yarn
2yarn add next-isomorphic

1# pnpm
2pnpm add next-isomorphic

Usage

Define your initial state on the server

1// isomorphic.server.ts
2import { createIsomorphicStore } from "next-isomorphic/server";
3
4export const appStore = createIsomorphicStore("myPrefix", {
5  isSidebarOpen: true as boolean, // required because ts infer this as `true`
6  isDark: true as boolean,
7});
8
9// Export the type to allow the client to read the state type
10export type AppStore = ReturnType<typeof appStore>;

Declare a client for use the state client-side

1// isomorphic.client.ts
2"use client";
3
4import { createIsomorphicClient } from "next-isomorphic/client";
5import { type AppStore } from "./isomorphic.server";
6
7export const isomorphicClient = createIsomorphicClient<AppStore>({
8  // You can also listen for change events
9  onChange({ newState }) {
10    if (newState.isDark) {
11      document.documentElement.classList.add("dark");
12    } else {
13      document.documentElement.classList.remove("dark");
14    }
15  },
16});

Use and change the state on the client. Any component can listen for the changes and change the value and affect all the others consumers.

1'use client';
2
3export function MyComponent() {
4  const [isDark, setIsDark] = isomorphicClient.isDark.useValue();
5  const [isSidebarOpen, setIsSidebarOpen] = isomorphicClient.isSidebarOpen.useValue();
6
7  return <div>{/* jsx */}</div>;
8}

How it works?

The state is preserved using insecure cookies (document.cookie), this can be set and read client and server side.

Because the cookies are not secure should not be used to store sensitive information, also cookies have a max size, this depend on the browser but for Google Chrome this is around 4096 bytes.

https://chromestatus.com/feature/4946713618939904

The values to store should be JSON serializable, so values like Date cannot be store, instead you could store the date as a number Date.now() or convert the date to string for example using date.toISOString() and create the date using it.

What information can I store?

Information like the user theme, language, and state for UI elements like if the sidebar is open or an element is visible can be store using the isomorphic store.