Create Next App

Example 3 (no router refresh)

In this example we have the router refresh option disabled disableRouterRefresh: true.
Notice when the router refresh is disabled the server component does not rerender when the state is updated, This option is to be used if router refresh is not necessary.

Server Component

Note:

Client Component

Note:

Client component with server actions

Note:

1import {
2  createServerState,
3  getServerState,
4  useServerState
5} from 'next-server-state';
6
7type MyStateProps = {
8  note: string;
9};
10
11const myState =
12  createServerState<MyStateProps>('example-three', {
13      note: ''
14    },
15    {
16      persist: true,
17      disableRouterRefresh: true //<-- disable router refresh on state change
18    });
19
20function useMyServerState() {
21  return useServerState<MyStateProps>(myState);
22}
23async function getMyServerState() {
24  return getServerState<MyStateProps>(myState);
25}
26
27export myState, useMyServerState, getMyServerState;
28