import 를 해야하는데 dynamic(); 함수를 써야 할 경우가 있다.
Next.js는 기본적으로 서버 측 렌더링(SSR)을 지원하며, 페이지를 사전 렌더링하여 초기 로딩 속도를 개선한다. 그러나 일부 외부 라이브러리는 서버 환경에서 동작하지 않거나 서버 측에서 필요하지 않은 코드를 포함할 수 있다.
dynamic 함수는 Next.js에서 동적으로 모듈을 로드 할수 있도록 한다.
옵션으로 ssr:false 을 입력하면 서버 사이드 렌더링을 비활성화 해서 해당 라이브러리가 클라이언트 측에서만 실행되도록 설정한다.
예시 ) const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });이 함수는 동적으로 react-apexcharts 를 가져오는 함수이다. CSR에서 import가 시작된다.
왜 사용해야 하는가?
Next.js는 기본적으로 SSR을 지원한다. 추가적으로 SSG 도 지원해주는데
만약 동적인 차트라면 SSG로 빌드하게 되면 빌드할때만 새로운 정보를 받아오게 되어서 차트 내용이 자주 바뀐다면 계속 빌드해줘야 한다.
SSR 로 사용하게되면 서버측에서 그려서 주기 때문에 초기 렌더링에 많은 비용과 시간이 소요될수 있다. 서버측에서 그려서 서버측에서 받기 때문에 시간이 더 소요 될것이다. 그리고 만약 차트 라이브러리 처럼 용량이 엄청 크다면 서버측에서 비용도 엄청 나게 소요 될것이다.
그럴때 CSR을 이용하게 된다. 클라이언트 측에서 라이브러리를 받아오기 때문에 용량도 해결될수 있고 속도 면에서도 빠르다고 한다.
기본 옵션으로는 ssr:true 값이라고 한다.
옵션으로 loading 을 넣어줄수가 있어서 loading 일때 다른 태그를 보여줄수 있다.
nextjs는 기본으로 ssr인데 ssr:true이면 왜 사용하는거야 ? 에 대한 궁금증이 생겼는데 찾아보니 정확하게 나온것이 없었다.
그런데 결국 사용하는 이유가 사용자가 원할때 동적으로 import 하는것.
button 태그로 클릭할때 동적으로 실행되도록 설정해서 사용하는것 같다.
그러니 ssr에서 일단 정보를 받아오고 로딩은 클라이언트 사이드에서 그리는것 같다.
ssr:false일때는 정보를 위한 데이터 다운도 CSR에서 이루어지고 로딩도 CSR로 이루어 지는것으로 추측한다.
