[frontend] 웹 페이지 렌더링 방식 SSR, CSR, SSG 이해하기

프론트엔드 개발을 하다보면 웹 페이지 렌더링 방식에 대해 궁금해진다.

React는 CSR 방식을, Next는 SSR 방식을 기본으로 렌더링된다고 하는데, 여기서 CSR과 SSR 방식이 정확히 어떻게 작동하고 어떤 차이가 있을까? 그리고 왜 CSR은 SEO에 부적합할까?

 

CSR

우선 CSR은 Client Side Rendering의 줄임말로 말 그대로 서버가 아닌 클라이언트(브라우저) 쪽에서 렌더링을 하는 방식이다. 

우리가 주로 이용하는 React, Angular, Vue가 이 방식을 이용한다. 이는 SPA와도 밀접한 관련이 있는데,

SPA란?

SPA는 Single Page Application의 약자로, 단일 페이지 에플리케이션을 의미하며, 하나의 페이지 내에서 필요한 부분만 렌더링하여 화면을 보여준다. 페이지의 모든 소스를 처음에 다운받고 이후에는 사용자가 요청할 때, 갱신이 필요한 데이터만 전달받아 화면을 구성한다.

 

이유는 CSR은 아래와 같은 동작방식을 갖는다.

1. CSR은 사용자가 최초로 페이지에 방문하면(사용자의 request가 오면), 브라우저는 서버에서 최소한의 HTML파일을 받는다.
2. 그리고 브라우저는 index.html에 있는 자바스크립트 번들 파일을 다운로드한 다음, AJAX 요청을 통해 필요한 동적 컨텐츠를 가져오고 파싱하여, 이를 클라이언트 측에서 렌더링한다.

이 후에는 사용자의 요청이 올 때마다 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링 한다. 모든 로직, 라우팅, 데이터 처리 등 모두 클라이언트에서 처리한다.

 

 

이처럼 CSR을 사용하면 자연스럽게 SPA 방식으로 웹 애플리케이션을 구현할 수 있다. 따라서 CSR 방식을 사용하는 웹 애플리케이션은 보통 SPA 형태로 구현되며, 두 개념은 서로 보완적이다.

 

CSR은 이러한 형식으로 작동하기 때문에, 초기 로딩 이후에는 렌더링이 빠르다는 장점이 있다. 또한 SSR과 다르게 서버를 호출할 때마다 전체 UI를 다시 로드할 필요가 없다. 별도의 API 호출이 없을 경우에는 지연 로딩이 필요하지 않다.

 

하지만 초기에 미리 소스를 다운받는 형식과, 모든 작업을 클라이언트 사이드에서 처리한다는 점에서 SEO(검색엔진최적화)에 매우 불리하다. 이는 CSR의 가장 큰 단점이라고 볼 수 있는데, HTML 파일 하나만 읽어오기 때문에 각각 페이지의 정보를 검색 엔진 크롤러가 제대로 수집하지 못하고, 콘텐츠가 자바스크립트 실행 후에만 로드되기 때문에 검색 엔진에 빈 페이지로 인식될 수 있다.

또한 초기에 모든 소스를 다운받기 때문에 초기 로딩 속도가 SSR보다 길다는 단점이 있다.

 

 

 

 

SSR / SSG

SSR은 Server Side Rendering의 줄임말로 서버에서 렌더링을 하는 방식이다. SSR은 CSR와 다르게 유저가 페이지를 요청할 때마다 HTML 문서가 생성된다. 이와 관련된 개념으로는 MPA와 Hydration이 있다. 

MPA란?

MPA는 Multi Page Application의 약자로, 
전통적인 방식으로 페이지를 이동하거나 새로 고침할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JS)가 다운되어 화면을 보여준다.

Hydration이란?

Hydration이란 미리 렌더링된 HTML에 JavaScript를 결합하여서 이벤트가 동작할 수 있도록 만드는 과정을 말한다. 즉, React-Component들을 로드하는 과정이다.

 

이러한 SSR을 대표적으로 이용하는 라이브러리가 Next.js인데, Next.js는 기본적으로 pre-rendering을 한다고 명시되어있다. pre-rendering시 HTML document를 클라이언트에 미리 로드한다. 그리고 React가 번들링된 자바스크립트 코드들을 클라이언트에 전송하면, HTML document와 JS를 비교해 맞는 부분을 찾아 다시한번 렌더링하는데 이를 Hydration이라고 한다. 이때 hydrate() 함수는 React DOM에 종속된 함수이다.

(React.js와 같은 CSR은 HTML과 JS를 한번에 보내고, 이를 클라이언트가 한번에 렌더링한다.)

 

이러한 과정이 있기 때문에, SSR은 전체를 다 렌더링하는 CSR과 다르게 pre-rendering 속도가 훨씬 빠르다.

 

 

 

SSG

SSR과 같이 서버로부터 완성된 HTML을 받아오지만, 받아오는 시기가 다르다고 한다.