개발자
Next.js에서 코드 스플리팅을 적용할 예정인데 궁금한 점이 있습니다.
Next.js에서 제공해주는 dynamic을 사용해서 스플리팅을 할 건데 어떤 경우에 옵션을 사용하면 좋을 까요?? ProjectCardContainer에는 react-query로 api를 비동기적으로 호출받고 있습니다. const ProjectCardContainer = dynamic( () => import('@/components/container/ProjectCardContainer') ); 위의 부분처럼 받아오거나 const ProjectCardContainer = dynamic( () => import('@/components/container/ProjectCardContainer'), { ssr: false, } ); 그리고 위의 ssr을 해체하는 경우 ssr을 해체하는 경우에는 공식문서에서 window나 외부 API같은 작업을 할 때 사용한다 하는데 여기서 말하는 외부 API가 서버에서 가져오는 API가 맞나요??
답변 0
첫 답변을 기다리고 있어요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 05월 03일
`dynamic()` 함수의 옵션으로 `ssr: false`를 사용하는 경우, 해당 컴포넌트는 서버 사이드 렌더링(SSR) 없이 클라이언트 사이드에서만 렌더링됩니다. Next.js문서에서 언급하는 "외부 API"는 메인 스레드에 접근하거나 window 및 document 객체에 접근하는 것을 의미하는데, 이런 작업들은 서버사이드(즉, Node.js 환경) 에서 수행할 수 없기 때문입니다. 예를 들면, `window` 객체나 `localStorage`, 브라우저 내장 Fetch API 등과 같은 웹 API들을 사용해야 하는 경우 `ssr: false` 옵션을 사용해야합니다. 이렇게 하면 그 컴포넌트는 Client Side Rendering(CSR) 방식으로만 렌더링되고, 서버 사이드에서는 무시됩니다. 따라서 여러분의 `ProjectCardContainer`가 위와 같은 클라이언트 전용 기능을 사용하거나, DOM 요소에 직접적으로 접근해야 한다면 `ssr: false` 설정을 추가해주세요. 하지만 만약 해당 컴포넌트가 react-query로 비동기적으로 데이터를 호출한다면, SSR을 사용하여 초기 페이지 로딩 속도를 향상시키고 SEO 최적화를 할 수 있습니다. 이 경우에는 `ssr: false` 옵션을 사용하지 않는 것이 좋습니다. 결정하는 기준은 여러분이 앱에 어떤 방식의 렌더링(SSR 또는 CSR)을 적용하길 원하는지, 그리고 각 방식의 장점과 단점을 고려해서 결정하게 될 것입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!