next-server-statev1.0.3
InstructionsExample 1Example 2 (persist)Example 3 (no router refresh)

Example 2 (with persist enabled)

In this example we have a counter state, The persist option is enabled persist: true, meaning the state will be preserved even after you refresh or navigate out of this page

Server Component

Counter: 0

Client Component

Counter: 0

Client component with server actions

Counter: 0

1import {
2  createServerState,
3  getServerState,
4  useServerState
5} from 'next-server-state';
6

7type MyStateProps = {
8  counter: number;
9};
10

11const myState =
12  createServerState<MyStateProps>('example-two', {
13      counter: 0
14    },
15    {
16      persist: true // <-- enables persist data
17    });
18

19function useMyServerState() {
20  return useServerState<MyStateProps>(myState);
21}
22async function getMyServerState() {
23  return getServerState<MyStateProps>(myState);
24}
25

26export myState, useMyServerState, getMyServerState;
27