데이터 로딩은 서버 사이드 렌더링을 구현할 때 해결하기가 매우 까다로운 문제 중 하나입니다. 데이터 로딩을 한다는 것은 API 요청을 의미합니다. 예를 들어 페이지에서 필요로 하는 데이터가 있다면 API를 요청해서 응답을 받아 와야 합니다. 일반적인 브라우저 환경에서는 API를 요청하고 응답을 받아 와서 리액트 state 혹은 리덕스 스토어에 넣으면 자동으로 리렌더링하니까 큰 걱정은 없습니다. 하지만 서버의 경우 문자열 형태로 렌더링하는 것이므로 state나 리덕스 스토어의 상태가 바뀐다고 해서 자동으로 리렌더링되지 않습니다. 그 대신 우리가 renderToString 함수를 한 번 더 호출해 주어야 합니다. 게다가 서버에서는 componentDidMount 같은 라이프사이클 API도 사용할 수 없습니다.

서버 사이드 렌더링 시 데이터 로딩을 해결하는 방법 또한 다양합니다. 다양한 방법 중에 정말 깔끔하고 편한 방법을 이 책에서 소개하겠습니다. 서버 사이드 렌더링을 할 때 데이터 로딩의 원리를 공부하고, 이 책에서 사용된 코드를 원하는 대로 변형하여 사용해도 괜찮습니다.

이 책에서는 redux-thunk 혹은 redux-saga 미들웨어를 사용하여 API를 호출하는 환경에서 서버 사이드 렌더링을 하는 방법을 알아보겠습니다.