Next.js - next/dynamic 이용해서, 특정 컴포넌트 SSR 안하고, 클라이언트에서만 렌더링하기.

Next.js 를 이용해서 서버사이드 렌더링을 하고 있다.

Next.js 에서는 최초에 한번 서버사이드에서 렌더링해서 내보내 주고,

그 이후는 클라이언트에서만 라우팅을하며 렌더링 해주는 방식으로,

SSR 과, SPA(CSR) 의 장점을 매우매우 훌륭하게 조합하여 구현해준다.

그런데 간혹, 특정 Component 에 한해서, 서버사이드에서는 렌더링 하지 않았으면 하는 마음이 있다.

그 '특정 컴포넌트' 라 함은, 특별히 SSR 이 중요하지도 않은데, 매우 무거워서, 최초 로딩 performance 에 악영향을 미치는 경우라 할 수 있겠다.

Next.js 에서 3.0부터 제공하는 'dynamic' 기능을 이용해서, 이런 문제를 해결할 수 있다.

import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(

import('../components/HeavyComponent'), {

loading: () => (<div>서버사이드에서 대체되는 영역</div>),

ssr: false,

},

);

이렇게 해두면, 

서버사이드에서 렌더링을 하다가, HeavyComponent 를 만나면,

<div>서버사이드에서 대체되는 영역</div>

요렇게 지정해둔 컴포넌트로 대체해서 렌더링해서, 응답을 내려준 후,

클라이언트 단에서 자동으로 원래 컴포넌트였던 HeavyComponent 를 렌더링 해 주는 것이다.

단,

임시로 대체되는 Component와, 실제로 클라이언트단에서 보여지는 Component 가 확연하게 다르게 보일 경우,

SPA 의 단점인 '깜빡임 현상' 을 볼 수 도 있으니, 상황에 따라, 잘 대체해줘야 할것이다.