인턴으로 근무할 때 공부하며 정리해뒀던 내용을 옮겨온 글이다.

SSR/CSR

SSR = Server-Side Rendering
CSR = Client-Side Rendering

개념 구분 & 용어 정리

우선 아래 세 개의 개념을 구분하고 용어를 정리하고 간다.

1. Backend server
2. Frontend : client-side rendering
3. Frontend : server-side rendering

1. Backend server (이하 '백엔드')

흔히 우리가 서버라고 하면 생각하는 것. 프로젝트에 있어 백엔드를 대부분 서버라고 부르며 django의 경우 백엔드에 정의된 요소들을(django의 경우 view) 이용하여 여러 작업( ex: CRUD)을 할 수 있고 이러한 기능을 사용할 수 있는 API를 제공한다.

2. Frontend : client-side rendering(이하 '클라이언트')

전형적인 SPA(Single Page application)으로 그 주기를 생각해 봤을 때 딱 한번만 리소스(HTML, CSS, JavaScript/깡통 html과 여러 static 파일들!)를 로딩하고 이후에는 데이터를 받아올 때만 '백엔드'와 통신한다. 즉 첫 요청에 한 페이지만 받아오고 이동시에는 내부를 수정해서 보여주는 방식이다. 동적 DOM을 이용해서 화면을 렌더링한다라고 생각하면 편할 듯 싶다.

주요장점

• 전체를 다시 불러올 필요가 없기 때문에 속도와 성능에서 우수하다

주요단점

• 초기에 한번에 JS파일을 받아오고 이를 읽어 render를 끝맞쳐야 사용자에게 보이기 때문에 초기구동속도가 느리다.
• 검색엔진최적화(SEO)가 힘들다.

3. Frontend : server-side rendering(이하 '서버')

전통적인 웹 어플리케이션 렌더링 방식이며 사용자가 웹에 접근하면, 백엔드에서 그 페이지 전체를 데이터까지 넣어서 렌더링해서 돌려주는 방식이다. 연산을 모두 끝내서 완벽하게 렌더링된, 완성품을 돌려받는다고 생각하면 된다.

주요장점

• SEO가 가능하다.
• 사용자가 처음으로 컨텐츠를 보기 시작하는 시점을 앞당길 수 있다.

주요단점

• 사용자가 컨텐츠를 보는 시점만 앞당길뿐, 결국 파일이 아직 다 받아지지 않았다면 기능들이 동작하지 않을 수 있음.
• 요청이 왔을 때 완전히 새 페이지를 렌더해서 돌려주기에 매번 새로고침이 일어나 UX적으로의 단점이 존재한다.

참고 문서

다른 분들이 아주 잘 정리해 둔 자료들이 많다.

CSR, SSR

NAVER D2

Universal Rendering

아래 설명은 vue/nuxt.js + django DRF를 베이스한다.

• 구조

  SSR과 CSR을 같이 사용한다. 현재는 Nuxt 위에다가 SSR로 코드를 작성하니 Server단에서 먼저 전체 시스템 코드를 가지고 있게 된다. 여기에 처음 Client가 불릴 때 Client에서 Server에 request를 보내게 되면 필요한 코드를 server → client로 보내주게 된다.

  이러한 구조를 Universal rendering 혹은 SSR hydration이라고 한다!!?

• Flow

  이를 flow로 나타내면 다음과 같다.

  1. 서비스 사용자(client)가 주소창에 주소를 치고 서비스에 들어온다. (현 서비스의 경우 educast.com)
  2. Client-side 에서 Server-side에 request를 보낸다.
  3. Server-side에서는 그 request를 받아 전체 코드와 요청한 페이지(educast.com)을 렌더링한 결과물을 넘겨준다.
  4. 이후 refresh가 다시 일어나기 전까지는 Server-side와 Client-side는 연결이 유지되지 않고 끊어지게 된다.
  5. Client는 이제부터 코드(js, css 등의 static파일)를 다 가지고 있기 때문에 그 코드를 가지고 Backend와 직접적으로 통신하면서 필요한 데이터를 받아와 때에 맞춰 렌더링 해서 보여준다.

주의사항 (issue가 발생할 가능성이 큰 부분!)

Server는 window 객체나 Document 객체를 사용할 수 없는데 이는 애초에 Client-side 딴에서 사용하는 객체이기 때문이다. 그래서 Server에서는 브라우저가 갖고 있는 기능들을 사용하지 못하여 불편할 때가 있다.

이 말은 즉슨 SSR에서는 쿠키를 사용하지 못하게 된다. Backend api중에 request를 받을 때 header.cookie 에 여러 쿠키들이 필요할 때가 있는데 이럴 경우 일반적으로 생각하는 'js-cookie' 라이브러리를 통해 브라우저의 cookie를 받아오는 방식은 불가능하고 대신 Nuxt에서 제공하는 req context를 통해 해결할 수 있다.

Context and Helpers