SSR, CSR

Rendering - 논리적인 표현을 그래픽 표현으로 변경하는 작업

 

작성된 코드를 사용자들이 이용 가능한 화면으로 표시해주기 위해서는 렌더링의 단계를 거쳐야 한다.

 

렌더링의 방법에는 서버에서 렌더링을 진행해서 클라이언트로 보내주는 SSR(Server Side Rendering)과

서버에서는 데이터만 받아와서 클라이언트 측에서 렌더링을 진행하는 CSR(Client Side Rendering)이 있다.

 

💻 Server Side Rendering

 

 

출처:https://velog.io/@ru_bryunak/SPA-%EC%82%AC%EC%9A%A9%EC%97%90%EC%84%9C%EC%9D%98-SSR%EA%B3%BC-CSR

 

우리가 흔히 알고 있는 새로운 페이지로 이동할 때마다 서버에 새로운 페이지를 요청하는 방식이다.

말 그대로 렌더링은 서버에서 일어나며, 클라이언트에서 페이지에 대한 요청이 오면 서버는 렌더링 된 페이지를 반환한다.

 

이러한 방식은 사용자 입장에서 페이지를 이동할 때마다 렌더링되는 시간을 기다려야 한다는 큰 단점이 있다.

 

웹에서 소화해야 하는 기능과 범위가 넓어지게 되고 그로 인해 사용된 SPA(Single Page Application) 기법에서는 SSR 대신 

CSR 방식이 더욱 각광을 받게 되었다.

---

💻 Client Side Rendering

 

출처:https://velog.io/@ru_bryunak/SPA-%EC%82%AC%EC%9A%A9%EC%97%90%EC%84%9C%EC%9D%98-SSR%EA%B3%BC-CSR

 

 

CSR은 SSR과 다르게 렌더링의 과정을 클라이언트가 맡게 된다. 

 

CSR은 하나의 HTML 파일을 가지고 모든 페이지를 Javascript를 통해 컨트롤하게 되는 SPA 형식의 프론트엔드 프레임워크, 라이브러리(React, Vue...)에서 주로 사용된다.

 

처음 웹페이지를 렌더링 할 때에는 SSR 방식보다 시간이 더 걸릴 수 있지만,

그 후부터는 서버로부터 데이터만 받아와서 다른 부분만 수정해 주기 때문에 페이지 전환 시의 사용자 경험은 훨씬 쾌적하다.

 

CSR 방식의 단점은 SEO(Search Engine Optimization) 문제이다.

SPA 방식의 웹은 자바스크립트로 모든 뷰를 통제하기 때문에 검색엔진의 크롤러에게는 빈페이지로 인식된다.

(google은 크롤러내에 자바스크립트 엔진이 있기 때문에 크게 문제 되진 않는다고 한다. 갓구글...)

 

이러한 문제를 해결하기 위해 SSR with Hydration 기법이 나왔는데,

대표적으로 React 진영의 Next.js와 Vue 진영의 Nuxt.js가 이러한 기법을 구현한 프레임 워크이다.

 

 

Next.js와 Nuxt.js는 기회가 될 때 자세하게 알아봐야겠다. 💪