React와 SSR
SSR은 무엇일까요?
개발자는 사용자가 애플리케이션을 로드(다운로드 및 실행) 할 때 100% 상호작용이 가능한 페이지를 최대한 빠르게 보여주고 싶어 합니다. 다음과 같이 말이죠.
하지만 페이지에 해당하는 JavaScript 코드를 로드하기 전에는 상호작용할 수 없습니다. 간단한 애플리케이션이 아니고 코드 스플리팅도 제대로 이루어지지 않았을 경우 해당 페이지를 보기 위해서는 애플리케이션 코드 전부를 다운로드해야 하기 때문에 로딩하는데 더 많은 시간이 걸릴 것입니다.
만약 SSR을 사용하지 않을 경우 JavaScript를 로드하기 전까지 사용자는 빈 페이지를 보게 될 것입니다.
이러면 사용자는 빈 페이지를 보는 시간이 길어지기 때문에 좋지 않으며 이러한 상황을 방지하기 위해서는 SSR을 사용하는 것이 권장됩니다. SSR은 서버에서 React 컴포넌트로 HTML을 미리 생성하여 사용자에게 전달합니다. HTML 자체는 input이나 a 태그와 같이 내장된 요소를 제외하고는 상호작용이 가능하지는 않습니다. 하지만 적어도 이는 사용자가 JavaScript를 로드하기 전에 무언가를 볼 수 있도록 해줍니다.
모든 React 및 애플리케이션 코드가 로드되면 HTML이 상호작용 가능하도록 만들고 싶을 것입니다. "여기 HTML을 서버에서 생성한 App 컴포넌트가 있어. 이 HTML에 이벤트 핸드러를 부착해 줘"라고 React에게 말하면 React는 메모리에서 컴포넌트 트리를 렌더링할 것이며 이에 대한 DOM 노드를 생성하는 대신 이미 존재하는 HTML에 모든 로직을 부착시킵니다.
이렇게 컴포넌트를 렌더링하고 이벤트 핸들러를 부착시키는 과정을 하이드레이션(hydration)이라고 부릅니다. 이를 마치 마른 HTML에 상호작용, 이벤트 핸들러라는 물을 주는 과정이라고 표현하기도 합니다.
하이드레이션 과정이 끝나면 우리가 아는 일반적인 React가 됩니다: 컴포넌트가 상태를 변경하거나 클릭에 반응합니다.
이와 같이 SSR은 단지 눈속임의 한 종류라는 것을 알 수 있습니다. SSR은 100% 상호작용이 가능한 페이지를 빠르게 만들어주지는 않습니다. 단지 상호작용이 불가능한 페이지를 최대한 빠르게 보여줘서 사용자가 JavaScript를 기다리는 동안 정적 콘텐츠를 볼 수 있도록 해줍니다. 하지만 이러한 트릭은 네트워크 상태가 좋지 않은 사용자에게는 아주 큰 차이를 만들어 내며 체감상 엄청난 성능을 향상시켜줍니다. 또한 인덱싱이 쉽고 속도가 빠르기 때문에 검색 엔진 순위에도 도움을 줍니다.
결론
- CSR의 경우 사용자의 네트워크 상태가 좋지 않거나 다운받아야할 애플리케이션 코드의 크기가 클 때 빈 페이지를 보는 시간이 길어진다.
- 이를 해결하기 위해 SSR을 사용할 수 있고 이는 자바스크립트가 로드되는 동안 서버에서 렌더링된 HTML을 보여주는 방법이다.
- 이를 통해 사용자에게 정적 콘텐츠를 빠르게 제공하고 체감 성능을 높일 수 있다.