코드 스플리팅 Code Splitting & 서버 사이드 렌더링 Server Side Rendering

코드 스플리팅

• 컴포넌트를 분리된 파일로 저장하는 것
• 서버 사이드 렌더링 X: React.lazy Suspense로 구현
• 서버 사이드 렌더링 O: Loadable Components 라이브러리 사용 권장

---

서버 사이드 렌더링

• 단점: 웹 브라우저 일을 서버가 대신 사용하니 서버 리소스 사용됨 → 동시에 많은 사용자 접속하면 서버 과부하 발생 가능성 있음
• 보완: 사용자가 많은 경우 캐싱과 로드 밸런싱을 통해 성능 최적화 필요
• 서버 사이드 렌더링과 코드 스플리팅 함께 사용시 충돌이 있음(코드 스플리팅 깜빡임 현상)
  1. 서버 사이드 렌더링된 결과물이 브라우저에 나타남
  2. 자바스크립트 파일 로딩 시작
  3. 자바스크립트가 실행되면서 아직 불러오지 않은 컴포넌트를 null로 렌더링함
  4. 페이지에 코드 스플리팅된 컴포넌트들 사라짐
  5. 코드 스플리팅된 컴포넌트들이 로딩된 이후 제대로 나타남
  ⇒ 해결: 라우트 경로마다 코드 스플리팅된 파일 중 필요한 모든 파일 브라우저에서 렌더링하기 전에 미리 불러오기(Loadable Components 라이브러리에서 제공하는 기능으로 필요한 파일 경로 추출해 렌더링 결과에 스크립트/스타일 태그 삽입 가능)
• 서버 사이드 렌더링 프레임워크 Next.js, 리액트 라우터와 호환 가능한 Remix도 있음