요기서 이것 저것 해봤는데 다 별로인 것 같다. 왜냐면 다 hydration mismatch를 해결하는 게 아니고 피해가는 것이기 때문인듯...

그러니까 애시당초 'mismatch'가 발생하는 건

1. client state가 client에서만 액세스 가능한 곳에 persist 되어있어서
2. server에서 액세스가 안되니까
3. UI 상태가 달라질 수 밖에 없다.

인데 그렇다면

1. client state persist를
2. server에서 액세스 가능한 곳에 하면 되는 것잉게롱.

그래서 좀 손이 가지만 걍 이렇게 해봤는데,

1. persist엔 cookie를 사용한다.
2. 왜냐면 쿠키는 서버 컴포넌트에서 읽기 가능이므로. 암튼 그래서 플로우는,
3. 서버 컴포넌트에서 cookie를 읽어서 고 안에 들어있는 persisted state를 가져온다.
4. mismatch가 발생하는 클라이언트 컴포넌트에 위 state를 넘겨줄 prop을 하나 뚫는다.
5. 그리고 같은 클라이언트 컴포넌트에 useState로 local state를 하나 만드는데,
6. 만들면서 initialState로 위 서버 컴포넌트에서 받아온 prop을 넘겨준다.
7. useEffect를 하나 추가해서
8. 클라이언트 컴포넌트가 쓰고 있는 persisted store을 local state에 묶어준다.
9. 깅까 대략

   export function useSyncedState<T>(clientState: T, serverState?: T) {
     const [state, setState] = React.useState<T>(serverState ?? clientState)
   
     React.useEffect(() => {
       setState(clientState)
     }, [clientState])
   
     return state
   }

   export function useSyncedState<T>(clientState: T, serverState?: T) {
     const [state, setState] = React.useState<T>(serverState ?? clientState)
   
     React.useEffect(() => {
       setState(clientState)
     }, [clientState])
   
     return state
   }

10. 왈료

이러면

1. 어차피 서버도 클라이언트도 같은 걸 보고 있으므로 애시당초 mismatch가 아님.
2. hydration이 되기 전에 이미 같은 상태의 UI가 보이므로 깜빡임 같은 게 없음.

↘↓↓↓↓↓↓↓↓↓↓↓↓↓↙ → ← → ← → ← ↗↑↑↑↑↑↑↑↑↑↑↑↑↑↖

굳

---

근데:

1. 서버 호출을 해야 됨
2. 그래서 요렇게 한 컴포넌트가 들어있는 페이지는 static export가 안됨