React+SSR+i18n 렌더링 문제

express 서버를 연결한 뒤로 hydration중에 i18n의 키값이 먼저 렌더링된 후 다시 벨류로 재렌더링되는 플래쉬 현상이 나타났다.

1.useSuspense

react-i18next는 useSuspense: true가 기본값이기 때문에 namespace가 로드되는동안 잠깐 키값으로 렌더링 되는 것이기 때문에 먼저 useSuspense flag를 false로 바꿔준다.
(참고로 v9의 wait이 useSupense로 바뀐 것이니 v10이라면 wait을 쓰지 않고 useSuspense를 사용한다.)

i18n
  .init(
    react: {
   // wait: true,
      useSuspense: false,
    }
  })

2. Ready status

first language 와 namespace 전부가 로드 된 상태를 레디 상태라고 한다.

// are we ready? yes if all namespaces in first language are loaded already (either with data or empty object on failed load)
  const ready =
    (i18n.isInitialized || i18n.initializedStoreOnce) &&
    namespaces.every((n) => hasLoadedNamespace(n, i18n, i18nOptions));

useSuspense를 사용하지 않기 때문에 언제 렌더링 할 지를 ready를 사용해서 정해준다. !ready일때 null보다는 로딩 요소를 넣는게 좋겠다.

  const { t, i18n, ready } = useTranslation();
  useEffect(() => {
  }, [ready])

  if (!ready) {
    return null;
  }
  

나는 App컴포넌트에서 이렇게 설정해주었다.

function App() {
  const { t, i18n, ready } = useTranslation();
  useEffect(() => {
  }, [ready])

  if (!ready) {
    return null;
  }

  return (
    <div className='home'>
      <Navbar t={t} i18n={i18n} />
      <div className='sections'>
        <Terminal t={t} i18n={i18n} />
        <Modal t={t} />
       	<Contact t={t} />
      </div>
    </div>
  );
}

참고
https://react.i18next.com/legacy-v9/withnamespaces
https://github.com/i18next/react-i18next/blob/master/src/useTranslation.js