CSR vs SSR (feat. NEXT.js의 등장)

출처 : https://www.linkedin.com/pulse/server-side-rendering-client-mohamad-taher-ghazal

 

우선 각 단어의 뜻을 풀어보자면 SSR (Server-Side-Rendering) 이고, CSR (Client-Side-Rendering)이다.

두 단어에서 공통적으로 들어간 단어를 본다면 렌더링(Rendering)이라는 단어가 있다.

 

그렇다면 이 단어 부터 알아보는게 맞겠다.

 

---

렌더링이란?

렌더링은 어떤 상황에서 쓰이느냐에 따라 의미가 달라지긴 하겠지만,

간단하게 말하면 브라우저가 서버로부터 요청해 받은 내용을 화면에 표시해 주는 것을 뜻한다.

 

예를들어, 우리가 주소창에 네이버 주소를 입력해서 엔터를 누르면 네이버 페이지로 이동하게 되는데

주소를 입력해서 엔터를 누르는 이 상황에 서버에 요청을 하는 것이고,

응답을 통해 받은 파일들을 화면에 그려주는 것이 렌더링이라고 생각하면 좋을 것 같다.

 

이러한 렌더링을 어디서 해주느냐에 따라 CSR인지 SSR인지로 나눌 수 있을 것 같다.

---

SSR

먼저 SSR에 대해서 알아보자면 SSR은 서버에서 렌더링 준비를 마친 상태에서 클라이언트에게 전달하는 방식이다.

 

브라우저에서 서버에 요청을 하게 되면 기본적으로 html 파일을 응답해 주는데

SSR은 서버에 요청이 오게 되면 서버에서 완전한 html 파일을 전달해 사용자 화면에 그려주게 된다.

 

이러한 방식은 초창기 웹에서도 사용이 됐는데, 초창기에는 html 파일 하나로 이루어진 페이지가 대부분이었기 때문에

복잡한 상호작용과 다양한 데이터가 없었어서 빠른 페이지 전환이 가능했다.

하지만 점점 웹이 발전하면서 복잡해지고, 사용자와의 상호작용도 다양해지면서 SSR 방식에 여러가지 문제들이 발생했다.

 

우선 요청마다 새로운 페이지를 응답 받아야 했기에 페이지 전환시 로딩 속도에서 문제가 발생했고,

페이지 전환이 될 때마다 하얀색 화면이 깜빡이면서 사용자의 경험을 낮추는 부분이 문제가 되었다.

그리고 모든 요청마다 서버에서 페이지를 렌더링하기 때문에 서버의 부하를 높이는 부분도 문제가 되었다.

 

---

CSR

CSR은 클라이언트에서 렌더링이 처리되는 방식이다.

 

브라우저에서 서버에 요청을 하게 되면 거의 내용이 없는 html 파일을 전달 받고,

페이지에 필요한 데이터 전체를 응답 받고 클라이언트 측에서 html 파일을 렌더링 하게 된다.

 

이러한 방식은 주로 SPA (single-page-application)에서 사용이 되는데,

SPA는 page, 즉 html 파일이 하나로 이루어진 어플리케이션이다.

 

SPA는 페이지가 하나로 이루어졌기 때문에 페이지 전환을 할 때, 새로운 html을 받아오지 않아도 된다는 장점이 있었다.

이를 통해 사용자의 경험을 향상 시킬 수 있다는 장점이 있었다.

그리고 렌더링을 클라이언트에서 하기에 서버의 부하를 줄일 수 있다는 장점도 있었다.

 

하지만 빛이 있으면 그림자도 있는 법.. CSR 방식의 단점도 존재했다.

먼저 하나의 페이지에 필요한 데이터 전체를 응답 받기 때문에 첫 페이지 로딩 속도가 느리다는 단점이 있었다.

이 단점을 통해 사용자 입장에서는 빈 화면을 보는 시간이 증가해 사용자의 경험을 저하시킬 수 있는 단점으로도 이어진다.

두번째로는 거의 비어있는 html 파일에 javascript로 컨텐츠를 채우는 방식이기에 검색엔진에 취약하다는 단점이 있었다.

 

---

CSR vs SSR

그럼 도대체 뭘 쓰라는 걸까?

 

양 진영이 서로가 서로의 단점을 물고 늘어지면서 자신의 장점만 내세우는 상황인지라

중간에 있는 개발자 입장에서는 그래서 어쩌라고.. 라는 생각이 들 수 있다.

 

정답은 의외로 간단하다. 둘을 적절하게 조합하면 된다.

 

장난하나

 

결국 SPA에서 사용하는 CSR 방식은 동적인 페이지에서 매우 유용하다라는 장점이 있지만

SSR 방식의 장점 중 하나인 검색엔진 최적화라는 장점을 무시하진 못한다.

 

결국 내가 구현한 페이지가 누군가에게 보여지고 노출이 되어야 하는데,

검색엔진에 문제가 있다면 아무리 열심히 만들어도 결과적으로 나만 소중히 간직하는 페이지가 될테니

이러한 부분의 문제는 꼭 해결해야 하는 부분이라 생각이 된다.

 

이러한 부분을 해결하고자 나타난 것이 바로 NEXT.js 다.

다음에는 NEXT.js를 한번 뜯어보고자 한다.

---

레퍼런스

 

- SSR vs CSR [ 이동 ]

- CSR과 SSR 특징 및 차이 간단 정리 [ 이동 ]

- kwak님 프리온보딩 관련 블로그 [ 이동 ]