Page 30 -

또한, 서버 사이드 렌더링을 하면 프로젝트의 구조가 좀 더 복잡해질 수 있고, 데이터 미리 불러오
기, 코드 스플리팅과의 호환 등 고려해야 할 사항이 더 많아져서 개발이 어려워질 수도 있습니다.

20.1.3 서버 사이드 렌더링과 코드 스플리팅 충돌

서버 사이드 렌더링과 코드 스플리팅을 함께 적용하면 작업이 꽤 까다롭습니다. 별도의 호환 작업

없이 두 기술을 함께 적용하면, 다음과 같은 흐름으로 작동하면서 페이지에 깜박임이 발생합니다.

그림 20-2 코드 스플리팅 깜박임 현상
1 2 3 4 5

1 서버 사이드 렌더링된 결과물이 브라우저에 나타남
2 자바스크립트 파일 로딩 시작
3 자바스크립트가 실행되면서 아직 불러오지 않은 컴포넌트를 null로 렌더링함
4 페이지에서 코드 스플리팅된 컴포넌트들이 사라짐

5 코드 스플리팅된 컴포넌트들이 로딩된 이후 제대로 나타남

이러한 이슈를 해결하려면 라우트 경로마다 코드 스플리팅된 파일 중에서 필요한 모든 파일을 브
라우저에서 렌더링하기 전에 미리 불러와야 합니다.

이 책에서는 이 문제점을 다음과 같은 방법으로 해결합니다. Loadable Components 라이브러

리에서 제공하는 기능을 써서 서버 사이드 렌더링 후 필요한 파일의 경로를 추출하여 렌더링 결과
에 스크립트/스타일 태그를 삽입해 주는 방법입니다.

이 장에서는 리액트 프로젝트에 서버 사이드 렌더링을 어떻게 구현하는지 알아보겠습니다. 실습
은 다음 흐름으로 진행됩니다.

540

리액트를 다루는 기술_개정판(본문)최종출력용.indb 540 2019-08-20 오전 11:03:32