[React] SSR은 뭘까..?
이 글을 읽는 모두 SSR에 대해 많이 들어봤을것이다.
SSR, 서버 사이드 렌더링 나도 많이 들어봤지만 그게 정확히 뭐야? 라고 한다면 잘 설명하지 못했었던거 같다. 글을 쓰며 정리하고 다시 읽어보며 SSR을 정복해보자!
우선 SSR에 대해 잘 알고 설명할 수 있으려면 SPA에 대하여 잘 알아야한다고 생각한다.
📌 SPA란?
spa는 뭘까? 스파? 따뜻하겠다.. 가 아니라 싱글 페이지 어플리케이션이다.
싱글 페이지 애플리케이션이란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 말한다.
최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전환을 위한 모든 작업이 자바스크립트로 이루어지기 때문에 페이지를 불러온 이후에는 서버에서 HTML을 받지 않고 하나의 페이지에서 모든 작업을 처리한다.
🧷 SPA 이전
싱글페이지 어플리케이션 이전에는 페이지를 처음부터 다시 다운 받고 렌더링하는 작업을 거쳐야 했기 때문에, 사용자 입장에서 페이지가 처음부터 다시 만들어지는 것처럼 보였다.
🧷 SPA 장점
- 사용자 경험 개선
한번 로딩이 된 후에는 서버에서 리소스를 받아올 일이 적어지기 때문에 사용자에게 훌륭한 UX를 제공한다.
- 라우팅
또한, 전통적인 멀티 페이지 어플리케이션과 달리 SPA는 클라이언트 측 라우팅을 사용한다. 페이지 이동이 필요할 때마다 서버에 요청을 보내는 것이 아니라, 브라우저의 히스토리 API를 사용하여 URL을 변경하고, js를 통해 필요한 컨텐츠만 개선한다.
🧷 SPA 단점
- SEO 최적화 어려움
SPA는 서버에서 HTML이 렌더링되지 않기 때문에 검색 엔진이 페이지 내용을 인식하기 어렵다.
- 초기 로드 시간
모든 자원을 한 번에 로드해야하므로 초기 로딩 속도가 느리다.
📌 웹 서비스가 진화한다..
앞서 설명했듯이 SPA도 충분한 장점을 지닌 기술이다. 하지만 SSR이 나오게 된 계기가 분명히 존재한다.
시간이 흐를수록 많은 양의 리소스가 자바스크립트를 통해 넘어오기 시작했다. 그에 따라서 자바스크립트의 규모도 점차 커지기 시작했다.
다음 사진은 화면에 웹페이지가 완전히 로딩되는 데 걸리는 시간이다.
기기의 성능은 날이 갈수록 좋아지는데 웹페이지 로딩시간은 여전히 같거나 오히려 길어진것을 확인할 수 있다. 로딩이 오래 걸린다면, 사용자들은 분명 서비스를 이탈할것이다.
📌 그래서 서버 사이드 렌더링🤗
싱글 페이지 애플리케이션이 자바스크립트를 활용해 하나의 페이지에서만 렌더링을 수행한다면, 서버 사이드 렌더링은 최초에 사용자에게 보여줄 페이지를 서버에서 렌더링해 빠르게 사용자에게 제공하는 방식이다.
“SPA와 SSR의 큰 차이는 렌더링을 어디서하느냐” 이다!
📌 서버 사이드 렌더링의 장점
- 최초 페이지 진입이 비교적 빠르다.
싱글 페이지 애플리케이션이라면 사용자가 해당 페이지에 진입하고, 자바스크립트 리소스를 다운로드하고, HTTP 요청을 수행한 후 이 결과를 가지고 화면을 렌더링 해야한다.
그러나, 서버 사이드 렌더링은 서버에서 HTTP 요청을 수행하고, HTML도 서버에서 그려서 나오기 때문에 초기 페이지 렌더링이 더 빠르다.
- 검색 엔진과 SNS 공유등 메타데이터 제공이 쉽다.
싱글 페이지 애플리케이션은 대부분의 작동이 자바스크립트에 의존하는데, 메타 정보 또한 마찬가지로 자바스크립트에 의존한다. 검색 엔진이 최초로 페이지에 진입했을때, 이러한 메타 정보를 제공할수 있도록 조치를 취하지 않는다면, 검색 엔진에 불이익이 있을 수 있다. 반면에 서버 사이드 렌더링은 최초의 렌더링 작업이 서버에서 일어나기 때문에 검색 엔진에 정보를 전달하기 더 쉽다.
- 누적 레이아웃 이동이 적다.
누적 레이아웃 이동이란 사용자에게 페이지를 보여준 이후에 뒤늦게 어떤 HTML 정보가 추가되거나 삭제되어 마치 화면이 덜컥 거리는 것과 같은 부정적인 사용자 경험을 말한다. 즉, 사용자가 예상치 못한 시점에서 페이지가 변경되어 불편을 초래하는 것을 말한다.
- 사용자의 디바이스 성능에 비교적 자유롭다.
자바스크립트 리소스 실행은 사용자의 디바이스에서 실행되므로 절대적으로 사용자 디바이스 성능에 의존적이다. 하지만 서버 사이드 렌더링을 수행하면, 이러한 부담을 서버에 나눌 수 있다.
📌 그럼 SSR만 사용할래. 머리 아프게 둘 다 알아야해?
바로 말하자면 서버 사이드 렌더링은 만능이 아니다.
클라이언트에서 발생하는 모든 무거운 작업을 서버에 미루고, 작업이 모두 서버에서 이뤄진다 해도 모든 성능 문제가 해결되는 것은 아니다. 잘못된 웹페이지 설계는 오히려 성능을 해칠 뿐 아니라 눈에 띄는 성능 개선을 얻지도 못할 수 있다.
리액트 개발자라면, 웹 어플리케이션을 만들고 싶은 개발자라면 두 가지 방법을 모두 이해할 필요가 있다.