SPA, CSR, SSR 이란?

Jaeheon·2022년 11월 15일

FrontEnd Essential

목록 보기

2/4

CSR(Client Side Rendering) vs SSR(Server Side Rendering)

렌더링 방식이란 결국 화면에 그려지는 HTML을 누가 하느냐 즉, 주체가 누구냐에 따라 CSR, SSR로 나뉘게 된다.

<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

위의 index.html 파일에는 body 안에 div 하나만 있다. 실제로 이 뼈대 하나만 다운받는다. 우리가 화면을 볼때는 div안에 다양한 tag들이 존재하는데 이를 html파일과 함께 다운받은 js 파일의 로직을 통해서 동적으로 테그나 스타일들을 DOM에 더하여 그리기 때문이다.

다음은 최종적으로 유저가 화면에서 보는 html의 예시 파일이다.

<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>이것이 최종적으로 화면에서 보고 있는 내용입니다.</p>
  </body>
</html>

쉽게 얘기하면 뼈대만 받고 브라우저(Client)에서 동적으로 DOM을 그리게 되면 CSR이고 위와 같이 이미 다 그려진 DOM을 받게 되면 SSR이다.

CSR, SSR을 살펴보기 전에 SPA부터 살펴보자.

SPA(Single Page Application)

기술적으로는 SPA는 어떤 페이지를 접속하더라도 HTML, CSS, JS 동일한 파일 하나만 접속한 페이지에 맞게 화면을 구성하고 MPA는 페이지 별로 해당 페이지에 맞는 HTML, CSS, JS 파일을 받아서 화면을 구성한다. 고전적인 방식이 MPA이며 아직도 많이 사용되어지고 있고, 최근 들어 JS 프레임워크들은 SPA를 기본으로 하고 있다.

유저 입장으로 보았을 때는 단순히 페이지 내용이 확 바뀌고 브라우저상에 URL이 다르면 다른 페이지로 인식한다. SPA의 트릭은 하나의 페이지에서 JS를 통하여 보고 있는 DOM의 내용을 모두 제거하고 다른 컨텐츠로 DOM을 채운 다음에 브라우저상에 URL을 강제로 변경하여, 실제로 방문한적도 없는 URL을 방문하여 해당 페이지를 보고 있는 느낌을 주는 것이다.

CSR(Client Side Rendering)

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

index.html을 처음 다운 받고 그 안에 js파일들을 다운로드 하게 된다. 모든 코드가 js파일에 존재하기 때문에 처음 번들된 이 파일을 다운받는데 시간이 걸린다.(사용자들이 첫 화면을 보는데 시간이 걸릴 수 있다.)

단점

SEO(검색 엔진 최적화)가 좋지 않다.
- 검색 엔진은 index.html을 기준으로 어떤 데이터들이 있는지, 알맞은 태그들이 들어있는지를 판단하여 이 사이트가 알맞은 사이트인지 판단하는데 CSR의 경우 index.html이 초반에 텅 비어있기 때문에 검색엔진의 눈에 띄지 못한다. (구글은 제외)

장점

1. 초기 로딩 속도를 제외하면 나머지 부분은 매우 빠른 사용자 인터랙션 속도를 보여준다. 이미 다운받은 번들링 된 js 파일에 렌더링에 필요한 모든 로직이 들어있기 때문.
서버의 부하를 줄여줄 수 있다.
- 서버와는 데이터 주고받는일 밖에 안함
사용성 측면에서 장점
- 클라이언트가 페이지 이동할 때 새로고침이 아니라 그냥 리렌더링이 되어버림.(화면 깜빡임 없이 페이지 전환)