리액트 서버 사이드 렌더링의 이해

서버, 클라이언트 사이드 렌더링이란?

서버 사이드 렌더링은 UI를 서버에서 렌더링 하는 것을 의미합니다. 서버 사이드 렌더링을 구현하면 사용자가 웹 서비스에 방문 했을 때 서버쪽에서 초기 렌더링을 대신 해주는 것 입니다. 그리고 사용자가 html을 전달 받았을 때 그 내부에 렌더링된 결과물이 보입니다.

 

반대로 클라이언트 사이드 렌더링은 브라우저에서 모두 처리하는 것이죠. 즉, 자바스크립트를 실행해야 우리가 만든 화면이 사용자에게 보입니다. 처음에는 빈 페이지로 시작하여 자바스크립트가 실행되고 리액트 컴포넌트가 렌더링되면서 화면이 보이는 것입니다.

서버 사이드 렌더링의 장점

일단 구글, 네이버, 등의 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있습니다. 리액트로 만든 SPA는 검색 엔진 크롤러 봇처럼 자바스크립트가 실행되지 않는 환경에서는 페이지가 제대로 나타나지 않습니다. 따라서 서버에서 대신 렌더링 해주면 검색 엔진이 페이지의 내용을 제대로 수집해 갈 수 있습니다. 또한 초기 렌더링 성능을 개선할 수 있습니다.

 

예를 들어 서버 사이드 렌더링이 구현되지않은 웹 페이지에 사용자가 방문하면, 자바스크립트가 로딩되고 실행될 때까지 사용자는 비어있는 페이지를 보며 대기해야 합니다. 여기에 API까지 호출한다면 대기 시간은 더더욱 늘어납니다.

서버 사이드 렌더링의 단점

서버 사이드 렌더링은 결국 원래 브라우저가 해야 할 일을 서버가 대신 처리하는 것이므로 서버 리소스가 사용된다는 단점이 있습니다. 갑자기 수많은 사용자가 동시에 웹 페이지에 접속하면 서버에 과부하가 발생할 수 있지요. 따라서 사용자가 많은 서비스라면 캐싱과 로드밸런싱을 통해 성능을 최적화 해주어야 합니다.

 

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

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

서버 사이드 렌더링과 코드 스플리팅을 함께 적용하면 작업이 꽤 까다롭습니다. 별도의 호환 작업 없이 두 기술을 함께 적용하면, 다음과 같은 흐름으로 작동하면서 페이지에 깜빡임이 발생합니다.

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

이러한 이슈를 해결하려면 라우트 경로마다 코드 스플리팅된 파일 중에서 필요한 모든 파일을 브라우저에서 렌더링하기 전에 미리 불러와야 합니다. Loadable Components 라이브러리에서 제공하는 기능을 써서 서버 사이드 렌더링 후 필요한 파일의 경로를 추출하여 렌더링 결과에 스크립트/스타일 태그를 삽입해 주는 방법입니다.

 

 

출처: 리액트를 다루는 기술