SSR과 CSR

CSR 동작 방식

 

처음에 웹서버에 요청할 때, 서버는 데이터가 없는 문서를 반환한다.
HTML 및 static파일들이 로드되면서 데이터가 있다면, 데이터 또한 서버에 요청하고 그것이 화면상에 나타나게 된다.

Browser가 서버에 HTML과 static파일을 요청한 후 로드되면 사용자의 상호작용에 따라서 javascript를 통해 동적으로 Rendering 한다. 필요에 따라 데이터를 서버에 요청해서 받아와 Rendring 한다.

 

SSR 동작방식

서버에서 렌더링을 작업하는 렌더링 방식, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 하며 서버에서 HTML 및 JavaScript 파일 등을 모두 다운로드해서 화면에 렌더링 하는 방식.

 

SSR과 CSR 비교

 

SSR ( Server Side Rendering)

SSR은 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 페이지에 대한 요청을 한다. 

서버에서는 HTML, View와 같은 자원(Resource) 들을 어떻게 보여줄지 해석하고 렌더링 해 사용자에게 보여준다. 

웹 서버에 요청할 때마다 브라우저에서 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청을 하는 방식이다.

 

장점

1. 초기 렌더링 속도

• SSR의 경우 View를 서버에서 렌더링 하여 가져오기 때문에 첫 로딩이 매우 짧다

2. SEO 기능

 

단점

1. 매번 새로고침이 발생

• 페이지에 대한 요청을 하는 방식으로, 서버에 부담을 줄 수 있다.

2. 전체적인 웹사이트를 받아와서, 좋지 않은 UX를 준다.

3. 동적으로 데이터를 처리하는 js를 아직 받지 못하여서, 클릭 했을 때 반응이 없는걸 경험할 수 있다.

 

CSR ( Client Side Rendering)

CSR은 클라이언트 측에서 최초에 1번 서버에서 전체 페이지를 로딩하여 보여준다. 그 이후에는 사용자의 요청이 올 때마다, 자원(Resource)을 서버에서 제공한 후, 클라이언트가 해석하고 렌더링 하는 방식이다.

 

장점

- 트래픽 감소와 빠른 인터랙션

 

단점

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

• CSR은 HTML 다운, JavaScript 파일, 각 종 자원(Resource)을 다운로드한 후에 브라우저에서 렌더링을 하기 때문에 초기 구동 속도가 느리다.

2. 검색엔진 최적화(SEO)가 어렵다.

• CSR방식으로 이루어진 웹 페이지에서는 View를 생성하기 위해선 반드시 JavaScript를 실행시켜야 한다. 하지만, 대부분 웹 크롤러 봇들은 JavaScript파일을 실행시키지 못하기 때문에 HTML에서만 콘텐츠들을 수집하게 되고 CSR페이지를 빈 페이지로 인식하게 된다.

TTV ( Time To View ) & TTI ( Time To Interact ) 

CSR은 사용자가 웹사이트를 볼 수 있음과 동시에, interaction이 가능하다

SSR은 만들어진 html을 먼저 받아오지만, interactive하게 만드는 JS를 나중에 갖고 오기 떄문에, TTV와 TTI의 시간차가 CSR보다 길다.

 

정리

1. 초기 렌더링 속도

• SSR의 경우 View를 서버에서 렌더링 하여 가져오기 때문에 첫 로딩이 매우 짧다.
• 물론 JS파일을 모두 다운로드하고 적용하기 전까지는
  그 어떤 인터랙션에도 반응하지 않지만 사용자 입장에서는 로딩이 매우 빠르다고 느낄 수 있다.
• 반면 CSR의 경우 서버에서 View를 렌더 하지 않고
  HTML 다운 + JS파일 + 각종 리소스 다운을 받은 후 브라우저에서 렌더링을 하기 때문에
  SSR보다는 초기 View 로딩 속도는 오래 걸린다.

2. SEO 문제

• CSR은 서버에서 View를 렌더링 하지 않고, 여러 자원(Resourse)들을 다운 받고 난 후, 렌더링 하는 방식이기에 초기 로딩 속도가 느리고, SEO에 대한 문제가 있다.
• 크롤러는 HTML에서만 콘텐츠를 수집하게 되고 CSR 페이지를 빈 페이지로 인식하게 된다

CSR은 번들링을 해서 JS를 어떻게 효율적으로 많이 분할해서, 첫번째로 사용자가 보기 필요한 부분만 볼 수있을지 고민해야한다.

SSR은 사용자가 보고 interaction 하는 시간차를 줄일 수 있을지 고민해야한다.