no ssr component

Sharlotte ·2022년 11월 23일
0

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

profile
샤르르르

0개의 댓글