모든 컴포넌트를 lazy loading한다면?

어떤 것이 궁금한지

모든 컴포넌트를 lazy loading한다면 어떤 결과가 나올까?

왜 궁금한지

• React로 개발 시 어차피 클라이언트에서 렌더링이 이루어져 SEO가 중요하지 않다면, 초기 로딩 속도를 더 빠르게 하기 위해 모든 컴포넌트를 lazy loading해도 괜찮지 않을까 궁금하다.

lazy loading이란?

필요한 모듈만 동적으로 로드하여 초기 로딩 속도를 개선하고 네트워크 트래픽을 줄이며, 사용자 경험을 향상시키는 방법입니다. 초기 렌더링 시 모든 모듈을 가져오지 않고, 실제로 필요한 순간에만 로드합니다.

장점

1. 초기 로딩 시간 감소: 초기 로딩 시 필요한 최소한의 리소스만 로드하여 초기 렌더링 속도를 개선.
2. 네트워크 효율성: 사용자가 필요한 컴포넌트만 로드하므로 네트워크 트래픽 감소.
3. 메모리 사용 최적화: 불필요한 컴포넌트를 미리 로드하지 않아 메모리 사용량 절감.

단점

1. 복잡성 증가: 모든 컴포넌트를 lazy loading으로 처리하면 코드 복잡성이 높아지고, 의존성 관리가 어려워질 수 있음.
2. 사용자 경험: 특정 컴포넌트를 요청할 때 로딩 지연이 발생해 사용자 경험이 저하될 수 있음. 네트워크 상태가 나쁠 때 더욱 문제.
3. CLS (Cumulative Layout Shift): 레이아웃 변경 문제 발생 가능.
4. 불필요한 네트워크 요청: 과도한 요청으로 네트워크 오버헤드 증가.

불필요한 네트워크 요청이 안좋은 점

1. 성능 저하

• 네트워크 지연: 각 요청마다 지연이 발생하며, 누적된 지연이 사용자 경험을 저하시킬 수 있음.
• 브라우저 제한: 동일 도메인에 대한 연결 수 제한으로 중요한 요청이 지연될 가능성.

2. 리소스 낭비

• 서버 부하 증가: 불필요한 요청 처리로 서버 성능 저하 가능.
• 데이터 사용량 증가: 불필요한 데이터 전송으로 사용자 데이터 소모 증가.

3. 에너지 소비 증가

• 배터리 소모: 모바일 기기에서 요청 증가로 배터리 사용량 증가.
• 환경 영향: 데이터 전송과 서버 운영에 필요한 에너지 소비 증가로 환경에 부정적 영향.

4. 보안 위험

• 공격 표면 증가: 과도한 요청이 보안 취약점을 노출시킬 가능성.

결론

• 모든 컴포넌트를 lazy loading하면 네트워크 효율이 높아질 것 같지만, 실제로는 불필요한 네트워크 트래픽 증가 등 문제점이 있다.
• 중요한 컴포넌트는 미리 로드하고, 덜 중요한 컴포넌트만 lazy loading하자.
• 남용하지 말자, 무조건적인 lazy loading은 피하자.
• 유연함이 핵심: 상황에 맞게 조정하는 것이 가장 중요하다! 뭐든지 유도리!