서버사이드렌더링이란? SSR, Server Side Rendering

SSR, Server Side Rendering이란?

SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(Client-side rendering)보다 페이즈를 구성하는 속도는 늦어지나, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점이 빨라진다. 또한, 검색 엔진 최적화(SEO, Search Engine Optimization)에도 유리하다.

 

SSR vs. CSR

 

SSR 동작 방식

1. 사용자가 웹 페이지를 방문하면(request), 서버는 리소스를 확인하고 페이지 내에 있는 서버측 스크립트를 실행 후 HTML 컨텐츠를 컴파일 및 준비한다.
2. 컴파일된 HTML은 추가 렌더링 및 표시를 위해 클라이언트 브라우저로 전송된다(response).
3. 브라우저는 HTML을 다운로드하고 최종 사용자가 사이트를 볼 수 있도록 한다.
4. 브라우저는 자바스크립트를 다운로드하고 실행하면서 페이지를 대화형(interactive)으로 만든다.
5. 사용자가 페이지를 이동할 경우, 위 동작을 반복한다.

 

SSR (서버 사이드 렌더링) vs CSR (클라이언트 사이드 렌더링)

결론적으로, 화면을 어디서(서버 or 브라우저) 그리느냐에 따른 차이다.

 

 

SSR의 장점

SSR을 쓰는 목적은 크게 검색 엔진 최적화와 빠른 초기 페이지 렌더링이다. 링크로 페이지를 공유할 때, 해당 웹 사이트 정보를 이미지와 설명으로 표시해주는 오픈 그래프(Open Graph) 태그를 페이지 별로 커스터마이징 할 때에도 SSR이 효율적이다. 브라우저가 빈 HTML을 받아서 그리는 CSR과 다르게, SSR은 서버에서 미리 그려서 브라우저에게 보내주기 때문에 렌더링이 빠르다.

 

SSR의 단점

Node.js 웹 애플리케이션 실행 방법을 알아야 하고, 서버쪽 환경 구성과 클라이언트, 서버 빌드에 대한 이해가 필요하다. 브라우저가 아닌 Node.js 환경에서 동작하기 때문에 자바스크립트를 통해 window나 document 같은 브라우저 객체에 접근할 수 없다.

 

참고

 

https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg

CSR vs SSR vs SSG - 콥 노트

https://d2.naver.com/helloworld/7804182