SSR은 대부분의 상황에서 UX를 개선시키므로 좋은 렌더링 방법이다. 하지만 대부분의 상황에서 하이드레이션 실패나 text content 에러와 같이...
끔찍한 렌더링 문제를 겪게 된다. 이때 대부분의 개발자들은 몇가지 해결법을 차용하는데, 대표적으로
React.useEffect
와 같은 방법으로 랜더링 이후 재랜더링을 유도하여 초기 랜더링이 일치하도록 유도React.lazy
나 next.js의 dynamic
에서 no ssr 사용Suspense
동원이때 dynamic
는 외부 모듈을 lazy하게 가져오는 방법인데, 이걸 발전시켜 리액트 컴포넌트로 만들면 DX가 매우 향상될 것이다.
import dynamic from 'next/dynamic'
import React from 'react'
const NOSSR: React.FC<React.PropsWithChildren> = props => (
<React.Fragment>{props.children}</React.Fragment>
)
export default dynamic(() => Promise.resolve(NOSSR), {
ssr: false
})
Text content does not match 에러가 떳던 페이지가 전체에 NOSSR컴포넌트를 감싸니 잘 돌아간다.