처음 SSR 개발을 해보고 겪은 어려움

첫 개발을 클라이언트 사이드 렌더링(CSR)으로 시작해서 CSR에 익숙해지면, 브라우저 너머에 웹서버가 있다는 사실을 잊어버릴 수 있다. 널리 알려진 상식일 수도 있지만, 정확히 짚고 넘어가고 싶은 것이 있다. 우리가 보는 웹 브라우저 화면은 DOM이라는 트리 형태의 그래프라는 사실이다.

브라우저 엔진은 HTML 구문을 해석해 DOM 트리를 구성하고, HTML에서 CSS 소스를 추출하여 CSSOM 이라는 스타일링 객체를 구성한다. 두 객체가 잘 결합되어야 보기 좋은 화면이 만들어진다. 그렇다면 HTML 구문은 누가 만드는 걸까? 웹서버가 전부 다 만들 수도 있고, 또는 웹서버에서 초기 HTML을 받은 후에 대부분의 내용을 브라우저가 동적으로 생성해 붙일 수도 있다. 전자를 SSR(서버 사이드 렌더링), 후자를 CSR(클라이언트 사이드 렌더링)이라고 부른다. 즉, CSR에서는 브라우저가 많은 일을 한다.

이번 글에서는 ‘SSR에서 브라우저 API를 사용할 때 Hydration을 고려해야 한다’는 기본적이면서도 중요한 사실을 이야기해 보고자 한다.