SSR(Server Side Rendering)
서버쪽에서 렌더링 준비를 마친 상태로 클라이언트에 페이지를 전달하는 방식
예를 들면 서버쪽에서 rest api를 구성해 클라이언트가 이를 비동기 처리해 렌더링에 적용한다던가 하는 방식이 아닌
뷰 템플릿 엔진을 사용해 HTML에 직접 서버에서 얻은 동적데이터를 삽입하는 방식이라고 할 수 있다.
즉 서버에서 페이지를 만든다고 할 수 있다.
서버의 동적 데이터가 HTML에 직접 삽입되어있는 형태이기 때문에 이런 데이터들이 모두 준비되어 HTML에 들어갔을 때 클라이언트에 보내진다.
유의미한 정보가 있는 HTML을 반환하게 된 다음 브라우저가 자바스크립트를 실행하여 페이지를 상호작용 가능한 형태로 만들게 된다.
사용자가 페이지 이동 시 위 동작이 반복되는 형태이며 페이지 이동은 서버로부터 다시 HTML 파일을 읽는다는 것을 의미하기도 하여
깜빡거림(네트워크 등등 요청부터 응답까지의 지연)이 발생하여 사용자 측에서 페이지가 로드됨을 식별할 수 있다.
장점
초기로딩속도
클라이언트에서 요청한 렌더링이 준비된 HTML 파일만을 먼저 로드하기 때문에 초기 페이지 로딩이 빠르다.
SEO 친화적
메타 정보 같은 유의미한 정보들이 사전에 함께 렌더링되어 클라이언트에게 전달되기 때문에
검색엔진 크롤러 봇들이 이런 정보들을 잘 응답으로 얻어갈 수 있게 된다.
따라서 검색엔진최적화(SEO)에 매우 효과적이다.
단점
초기 렌더링은 빠를 수 있으나
페이지 이동 시마다 새로운 HTML을 서버에서 다시 불러오는 형태라 깜빡임이 발생하여 사용자 경험에 좋지 않은 영향을 줄 수 있다.
header, footer 같은 공용 템플릿성 마크업들도 페이지 이동 시 계속 다시 렌더링하여 받는다.
네트워크 상태가 좋지 않거나 트래픽이 많아 서버에서 가용성있는 응답이 불가능하여
자바스크립트 파일 다운로드에 지연이 발생한다면 화면은 보이지만 동적 상호작용이 불가능해지는 상태가 될 수 있다.
Client Side Rendering
브라우저에서 웹 페이지를 렌더링한다.
초기 로딩 시 빈 HTML 파일 하나와 모든 로직과 동적 처리가 담긴 자바스크립트 파일을 다운로드 한다.
그 이후 클라이언트에서 자바스크립트 파일들을 이용해 동적으로 HTML DOM을 구성해나가는 것이다.
장점
하나의 HTML에 자바스크립트 파일을 이용해 동적으로 DOM을 형성시키기 때문에 원하는 부분만 효과적으로 업데이트 해줄 수 있다.
시각적으로 페이지 이동처럼 보이는 부분이라 하더라도
페이지 이동의 효과를 주면서 실제로는 원하는 부분만 갈아치우는 형태이기 때문에 부드러운 페이지 이동이 가능하다.
(사전에 모든 파일을 가져왔고 이를 이용해 원하는 부분만 갈아치우기 때문에 후속 페이지 이동 로딩이 SSR에 비해 빠르다)
단점
초기 렌더링
초기 렌더링이 SSR에 비해 느리다. 초기에 HTML,css,javascript 등 모든 필수 파일을 로드하기 때문.
사용자는 필수 파일을 모두 다운로드 하여 적용시키기 까지 빈 화면을 맛보아야 한다.
SEO에 친화적이지 않다.
클라이언트 측. 즉 브라우저에서 렌더링을 수행하기 때문에 사용자 기기와 소프트웨어 같은 클라이언트 환경에 성능이 의존된다.
이는 페이지 이탈률을 높일 수 있고 곧 검색엔진 우선순위에서 낮아지는 결과를 만든다.
SEO에 친화적이지 않다.2
맨 처음 페이지를 로드시킬 때 빈 화면이 나오고 클라이언트가 이를 동적으로 구겨 넣어주는 방식이라
검색엔진 크롤러가 사이트를 읽어가는 시점에 모든 것이 비어있게 되어 사이트의 유용한 정보를 제공해줄 수 없다.
리액트 앱 실행해서 페이지 소스 보기를 눌러보자!
뭘 써야할까 그럼
ssr과 csr은 상반된 장단점을 지니고 있다.
하지만 딱히 하나만 사용해야할 필요는 없다.
예를 들어 크게 동적이지 않은 페이지라면 앱 빌드 시점에 pre-rendering 시켜 깜빡임도 덜하고 빠른 응답속도를 내게 해주는 Static-Site-Generation 방식을 사용한다던가 같은 방법도 있고
상황에 맞는 렌더링 방식을 조합하여 사용할 수 있는 세상이라 전략을 잘 세우면 될 것 같다.
예를 들면 서비스의 첫 방문 메인 페이지의 경우 빠르게 렌더링 시켜 사용자 이탈을 줄이면서
포털사이트를 통한 사용자 유입을 늘려 이익을 창출하기 위해 SEO 친화적인 SSR 방식을 사용할 수 있다.
그러면서 후속 링크 이동이나 이벤트로 인한 UI 구조 변경 처리는
이미 얻어온 스크립트 파일을 활용해 동적으로 변경시켜 줄 수 있도록 CSR을 적용할 수 있다.
