SSR과 CSR(인프런 수강 복습)

시작하기 앞서

본글은 '캡틴 판교'님의 'Nuxt.js 시작하기' 수강 이후 복습을 위해 적은 글이며 

캡틴 판교님이 만드신 블로그와 유사한 혹은 가깝게 동일함을 미리 말씀드립니다.

출처 : https://joshua1988.github.io/vue-camp/nuxt/intro.html#nuxt%E1%84%8B%E1%85%B4-%E1%84%8C%E1%85%A1%E1%86%BC%E1%84%8C%E1%85%A5%E1%86%B7

Introduction | Cracking Vue.js

인프런 url : https://www.inflearn.com/course/%EB%84%89%EC%8A%A4%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/dashboard

Nuxt.js 시작하기 - 인프런 | 강의

 

#저작권 등에 문제가 생길 시 삭제하겠습니다.

 

SSR이란?

SSR(Server Side Rendering), 서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법

 

CSR이란?

클라이언트(브라우저)에서 Js를 이용해 화면에 표시하는 기법

 

CSR과 SSR의 차이점

출처 : 본문 최상단 캡틴판교님에 블로그에 있습니다.(URL이 너무길어서...)

그림을 보면은 어디서 페이지의 내용을 그리는지의 차이점입니다.

SSR은 서버에서 페이지를 다 그려서 클라이언트로 주는데 비해 CSR은 페이지를 클라이언트에서 그려서 줍니다.

 

그러면 SSR을 왜 쓸까

전 글에서 적었지만 크게 2가지가 있는데

1. 검색 엔진 최적화(SEO)
   • SEO : 구글, 네이버 등과 같은 검색 사이트에서 검색 결과가 유저들에게 많이 노출될 수 있도록 최적화하는 기법
   • SSR의 목적이 SEO인 것은 전 글 참조
2. 빠른 페이지 렌더링
   • SSR은 서버에서 미리 그려 브라우저로 보내는 방식이기 때문에 유저 입장에서 화면에 보이는 정보가 빠름

 

이러한 SSR이 장점만 있을까?(단점)

1. 러닝 커브가 높다
   • SSR은 서버 쪽도 알아야 하고 Node.js 웹 애플리케이션 실행 방법도 알아야하고 CSR에 비해 진입 장벽이 존재
2. 브라우저 관련 API 주의
   • 브라우저가 아닌 Node.js에서 동작하기 때문에 beforeCreate(created)에서 window, document와 같은 브라우저 객체에 접근 불가
   • 대신 beforeMount나 mounted로 접근하면 된답니다