no ssr component

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컴포넌트를 감싸니 잘 돌아간다.