File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -113,6 +113,49 @@ const { persistAtom } = recoilPersist({
113113
114114![ Example of persist state in localStorage] ( example.png )
115115
116+ ## Server Side Rendering
117+
118+ If you are using SSR you could see that error:
119+
120+ ```
121+ Unhandled Runtime Error
122+
123+ Error: Text content does not match server-rendered HTML.
124+ ```
125+
126+ It happens because on server you don't have any storages and react renders component with default value.
127+ However in browser it is rendering with values from storage.
128+ To prevent it we need to introduce hook for render with default value for the first time.
129+
130+ ```
131+ const defaultValue = [{ id: 1 }]
132+
133+ export const recoilTest = atom<{ id: number }[]>({
134+ key: "recoilTest",
135+ default: defaultValue,
136+ effects_UNSTABLE: [persistAtom],
137+ });
138+
139+ export function useSSR() {
140+ const [isInitial, setIsInitial] = useState(true);
141+ const [value, setValue] = useRecoilState(recoilTest);
142+
143+ useEffect(() => {
144+ setIsInitial(false);
145+ }, []);
146+
147+ return [isInitial ? defaultValue : value, setValue] as const;
148+ }
149+
150+
151+ export default function Component() {
152+ const [text, setText] = useSSR();
153+
154+ // rest of the code
155+ }
156+ ```
157+
158+
116159## API
117160
118161### recoilPersist(config)
You can’t perform that action at this time.
0 commit comments