ServerSideRendering vs. ClientSideRendering

1. ServerSideRendering

 1) 의미 :

전통적인 웹 애플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때 서버에 각각 페이지에 대한 요청을 하고 서버에서 html, js 파일 등을 다운로드해서 화면에 렌더링 하는 방식이다. 

초기 렌더링 시에 내용이 존재하는, 미리 서버에서 랜더링 된 HTML을 받는다. 그 다음 자바스크립트로 웹 페이지를 완전하게 작동시킨다. 

 

2) SSR의 장점 :

 - 사용자가 처음으로 컨텐츠를 볼 수 있는 시점을 앞 당길 수 있다. 

 - 검색엔진 최적화에 용이하다.(검색엔진들의 크롤링 봇은 HTML 내용 자체를 긁어와서 처음에 내용이 빈 HTML을 받는 CSR 앱 들은 검색 엔진 노출에 불리하다. )

 - SSR을 적용하면 초기 렌더링시에 내용이 있는 HTML에다가 메타태그까지 해당 페이지에 맞는 내용으로 커스텀할 수 있어서 사이트 노출에 이점이 생긴다. 

 

 

3) SSR의 단점 

 -  필요한 부분만 데이터를 불러오는 것이 아니라, 새로운 페이지를 로딩하고 랜더링 해준다(새로고침)

 -  전체를 로딩하다 보니 CSR보다 느리고, bandwitdh를 많이 사용하며, 사용자 경험이 좋지 않다고 한다.

 (사용자가 처음으로 컨텐츠를 볼 수 있으나, 화면단에 html요소들이 나오지만 js파일이 모두 다운로드되지 않아서 버튼이 클릭되지 않는 현상이 발생할 수 있다. )

 

4) 대표적인 예시

서블릿 위에 스프링을 띄워서 사용할 경우 JSP를 화면단으로 사용하여 controller에서 model에 메핑하여 JSP로 데이터 넘겨주는 경우

2. ClientSideRendering

 1)SPA : Single Page Application

  최초 한 번 페이지 전체를 로딩한 이후(내용이 없는 HTML을 받는다.)에 데이터만 변경하면서 사용할 수 있는 웹 애플리케이션으로 하나의 Html파일로만 동작을 한다. 

 

2) CSR의 의미 : 

CSR은 SPA로 클라이언트 사이드에서 HTML을 반환한 후에 JS가 동작하면서 데이터만을 주고 받아서 클라이언트에서 렌더링을 진행한다. 

 

3) CSR의 장점 : 

 - CSR은 사용자의 요청에 따라 필요한 부분만 다시 읽어 들이기 때문에 SSR보다 조금 더 빠른 상호작용이 가능하다. 

 - page 전체를 요청하지 않고 페이지에 필요한 부분을 변경하게 하기 때문에 모바일 네트워크에서도 빠른 속도로 렌더링이 가능하다. 

 - lazy loading을 지원해 준다. (페이지 로딩시 중요하지 않은 리소스의 로딩을 늦추는 기술)

 

4) CSR의 단점 : 

 - 초기 구동속도가 느리다. 

 - 검색엔진 최적화가 안된다. 

 

3. 프리 랜더링과 하이드레이션

SSR 작동방식
브라우저 주소창으로 페이지 요청 => 
서버에서 요청에 맞는 프리랜더링 HTML 보냄 => 
브라우저에서 html받고 딸려온 자바스크립트로 하이드레이션 => 
그 다음은 SPA처럼 동작

. 요약하면 프리랜더링은 페이지에 내용을 채워 크롤링 봇이 읽을 수 있게 해주고, 하이드레이션은 그 이후에 앱이 SPA와 똑같이 동작할 수 있도록 한다.(두 번째 링크 자세히 보기)

 

◎참조

https://www.botify.com/blog/client-side-server-side-rendering-seo#client-side

Client-Side vs. Server-Side Rendering: Which Is Better for SEO?

https://maxkim-j.github.io/posts/nuxt-ssr

Nuxt로 살펴보는 서버사이드 렌더링의 핵심