Warning: Text Content did not match. Server: ... , Client: ....

[SoYoung210]

Desc

server에서 내려주는 html의 내용과 client에서의 내용이 일치하지 않는다는 이슈이다.
Server에서 store를 만들어 내려 줄때, Clinet에서 동기화를 놓쳐서 생기는 이슈이다.

Solve

clinet/store/stores.ts (clinet에서 store를 만드는 부분) 에 다음과 같은 코드를 추가해주면 된다.

  const preloadedState = root.__PRELOADED_STATE__;

  delete root.__PRELOADED_STATE__;

  const epicMiddleware = createEpicMiddleware();
  const composeEnhancers = (root as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const store = createStore(
    reducers, preloadedState, composeEnhancers(applyMiddleware(epicMiddleware))
  );

server에서 __PRELOADED_STATE__ 로 초기 state를 넘겨주었기 때문에 이 값을 이용해서 동기화 시켜주는 작업이다.

Ref : redux.js.org/server-rendering