react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

📌 서버 사이드 렌더링이란?

• UI를 서버에서 렌더링하는 것을 말한다.
  cf) 클라이언트 사이드 렌더링: UI 렌더링을 브라우저에서 처리하는 것

📙 서버 사이드 렌더링 장점

1. 검색 엔진 최적화
   서버 사이드 렌더링이 이루어지면 검색 엔진이 애플리케이션의 페이지 내용을 원활하게 수집할 수 있다. 클라이언트 사이드 렌더링의 경우 자바스크립트를 이용하여 UI를 렌더링하는데 자바스크립트를 실행하지 않는 검색 엔진은 페이지의 정보를 제대로 수집할 수 없게 된다. 서버에서 클라이언트 대신 렌더링을 하면 검색 엔진이 페이지의 내용을 제대로 수집할 수 있다.
2. 초기 렌더링 성능 개선
   클라이언트 사이드 렌더링의 경우 자바스크립트가 로딩되고 실행될 때까지 사용자는 빈 페이지를 보며 대기해야 한다. 여기에 API까지 호출해야 한다면 사용자의 대기 시간이 더욱 길어진다.
   반면 서버 사이드 렌더링을 이용하면 자바스크립트가 다 로딩되지 않은 시점에서도 html 상에 사용자가 볼 수 있는 콘텐츠가 있기 때문에 대기 시간이 최소화되고, 이로 인해 사용자 경험도 향상된다.

📙 서버 사이드 렌더링 단점

1. 서버 리소스가 사용되므로 수많은 사용자가 동시에 웹 페이지에 접속하면 서버에 과부화가 발생할 수 있다.
2. 프로젝트 구조가 좀 더 복잡해질 수 있고, 데이터 미리 불러오기, 코드 스플리팅과의 호환 등 고려해야 할 사항이 더 많아져서 개발이 어려워질 수 있다.

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

페이지 깜박임 현상

별도의 호환 작업 없이 동시에 적용하면 페이지 깜박임 현상이 발생한다.
1. 서버에서 HTML을 생성해사 클라어언트에게 전달한다.
2. 클라이언트는 전달받은 HTML을 화면에 보여준다.
3. JS가 실행되고 처음에는 스플리팅된 코드는 로딩되지 않은 상태이다. 그래서 null이 렌더링되면서 기존에 보여준 컴포넌트가 사라진다.
4. 컴포넌트를 로딩한 다음에는 다시 렌더링한다.

💡 해결

Loadable Components 라이브러리에서 제공하는 기능을 써서 서버 사이드 렌더링 후 필요한 파일의 경로를 추출하여 렌더링 결과에 스크립트/스타일 태그 삽입