(2) 서버사이드 렌더링이란?

서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. vue SPA을 SSR의 반대인 CSR방식입니다. 이 글에서는 CSR과 SSR 방식의 차이점을 살펴보고 SSR의 장단점을 분석해보도록 하자

📌CSR

예를 들어 vue.js 를 처음 환경설정한 후 npm run server를 해보면 서버에서 넘겨받은 HTML 코드에 body 태그 본문에 <div id="app"></div>밖에 없지만 화면에는 welcome To Your Vue.js App 텍스트와 이미지가 있다. 이 텍스트와 이미지는 모두 클라이언트(브라우저)에서 동작한 vue.js 라이브러리가 그려준 것이다. 즉 브라우저에서 화면의 결과를 그려낸 것이다. 

📌SSR과 CSR의 차이점

 1)웹 페이지를 로딩하는 시간 

웹 페이지 로딩의 종류는 두가지로 나눌 수 있다.하나는 웹 사이트의 가장 첫 페이지를 로딩하는 것. 다른 하나는 나머지를 로딩하는 것

• 첫 페이지 로딩시간 
  • CSR의 경우 HTML,CSS와 모든 스크립트들을 한 번에 불러온다. 반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오게 된다. 따라서 평균적으로 SSR이 더 빠르다.
• 나머지 로딩시간 
  • 첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 식의 동작을 가정했을 때. CSR은 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다. 반면, SSR은 펏 페이지를 로딩한 과정을 정확하게 다시 실행한다. 그래서 드 느리다. 

2) SEO 대응

검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트들을 읽는다. CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행 되어야 meatadata가 바뀌었다.
(이전 크롤러들은 자바스크립트를 실행시키지 않았었기에 SEO 최적화가 필수적이었다. 구글이 그 트렌드를 바꾸고 있다고 한다.)

SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다.

3) 서버 자원 사용

SSR이 서버 자원을 더 많이 사용한다. 매번 서버에 요청을 하기 때문이다.

출처 : https://proglish.tistory.com/216https://joshua1988.github.io/vue-camp/nuxt/ssr.html#%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3-%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC

 

*사용 권장 예시

SSR을 사용하자

• 네트워크가 느릴 때 😓
  (CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나눠불러오기 때문)
• SEO(serach engine optimization : 검색 엔진 최적화)가 필요할 때.
• 최초 로딩이 빨라야하는 사이트를 개발 할 때
• 메인 스크립트가 크고 로딩이 매우 느릴 때CSR은 메인스크립트가 로딩이 끝나면 API로 데이터 요청을 보낸다. 하지만 SSR은 한번의 요청에 아예 렌더가 가능한 페이지가 돌아온다.
• 웹 사이트가 상호작용이 별로 없을 때.

CSR을 사용하자

• 네트워크가 빠를 때
• 서버의 성능이 좋지 않을 때
• 사용자에게 보여줘야 하는 데이터의 양이 많을 때.
  (로딩창을 띄울 수 있는 장점이 있다.)
• 메인 스크립트가 가벼울 때
• SEO 따윈 관심 없을 때
• 웹 어플리케이션에 사용자와 상호작용할 것들이 많을 때. (아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리함.)