Skip to content

Commit 050c87f

Browse files
committed
add SSR section to readme
1 parent 14d1f7b commit 050c87f

1 file changed

Lines changed: 43 additions & 0 deletions

File tree

README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff 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)

0 commit comments

Comments
 (0)