TIL 62. 2024-03-29

팀 프로젝트 진행 중, 처음 보는 코드를 해석해본다.

const PreJoinNoSSR = dynamic(
  async () => {
    return (await import("@livekit/components-react")).PreJoin;
  },
  { ssr: false }
);

해석 순서)

1. dynamic 키워드를 사용하여 모듈을 동적으로 불러오고 있다.
2. SSR 렌더링 방식을 사용하지 않고 CSR 렌더링 방식으로 사용
3. PreJoin 컴포넌트를 새로운 컴포넌트인 PreJoinNoSSR로 할당하여 동적으로 사용한다.

   요약: livekit/components-react 모듈(파일)에서 PreJoin이라는 컴포넌트를 dynamic 키워드를 사용하여 해당 컴포넌트를 동적으로 할당하여 코드 스플리팅을 수행, SSR아닌 CSR렌더링 방식을 통해 클라이언트 측에서 로드된다.

주의 사항)

• dynamic 함수의 { ssr: false } 옵션을 사용하면 해당 모듈이 클라이언트 측에서만 렌더링되도록 할 수 있지만, 일부 컴포넌트는 SSR이 필요할 수 있으므로 코드 분할 지점을 신중하게 결정하여 사용해야한다.
• 동적 모듈을 사용할 때 캐싱 문제를 고려해야한다.

일반적인, import 키워드를 사용하여 모듈을 불러오면, 해당 모듈의 컴포넌트가 사용되는 모든 페이지 포함되어 로드됩니다.
예를 들어, 컴포넌트 A와 B가 각각 다른 페이지에 포함되어 있고, 이 두 컴포넌트에서 동일한 모듈을 import 하면, 이 모듈은 두 페이지 모두에 포함되어 로드됩니다.

dynamic: Next.js에서 제공하는 함수로, 코드 스플리팅을 구현하는 데 사용됩니다. 이 함수를 사용하면 특정 모듈을 동적으로 로드할 수 있습니다.

코드 스플리팅: 하나로 번들링된 코드를 여러 코드로 나눠 당장 사용하는 부분만을 로딩하고, 현재 필요하지 않은 부분은 따로 분리시켜 나중에 로드함으로써 로딩시간을 개선한다.