[CS] CSR, SSR 그리고 SSG에 대해 이해하기

🚨 본 글은 기본적인 내용(서버-클라이언트가 요청과 응답을 보내는 과정)을 알고 있다는 전재하에 작성한 글 입니다.
     간단히 정리했습니다 :)

우리는 검색창에 주소를 찍음으로써 서버에 페이지를 요청하게 된다. 요청을 받은 후 웹페이지를 렌더링 하고 처리하여 브라우저를 통해 사용자에게 보여주는 과정을 거치게 되는데, 이 렌더링하는 방식은 어떤 라이브러리 혹은 프레임워크를 썼냐에 따라 달라질 수 있다.

어떤 렌더링 방식을 사용했냐에 따라 최고의 웹사이트가 될수도, 최악의 웹사이트가 될수도 있다. 우리는 상황에 맞춰 어떤 것을 이용할 것인지 잘 선택해야 한다.

그래서 오늘은 각 렌더링 방식에 대해 알아보고, 어떤 상황에 어떤 방식을 사용할지 같이 고민해볼 것이다.

 

렌더링 하는 방식에는 총 3가지가 있다.

1. CSR(Client-Side-Rendering)

이름에서 부터 짐작이 가능하겠지만, 클라이언트 측에서 페이지를 동적으로 생성한다는 의미이다.

서버에서는 데이터만 제공하고 클라이언트, 그러니까 즉 브라우저에서 Javascript를 사용해 웹 페이지를 렌더링하여 페이지를 동적으로 생성한다.

➡️ 그래서 초기 로딩 속도가 빠르다는 장점이 있고, 사용자 인터랙션에 따른 동적인 페이지 업데이트가 가능하다. 이러한 특성으로 보아 대화형 애플리케이션, SPA(Single Page Application)와 같은 웹 애플리케이션에 적합하다.

2. SSR(Server-Side-Rendering)

SSR은 CSR과 반대로 서버 측에서 페이지를 동적으로 생성한다.

서버에서 데이터를 가지고 HTML을 생성한 후 클라이언트에 전송하여 페이지를 렌더링 한다.

➡️ 그래서 검색 엔진 최적화(SEO)에 용이하고, 초기에 서버를 구동하게 될때 부하가 적습니다. 이러한 특징으로 보아, 정보를 제공하는 정적 페이지, 블로그와 같은 웹 사이트에 적합하다.

3. SSG(Server-Site-Generation)

CSR, SSR은 개발하면서 익숙하게 들어봤지만, SSG는 이번에 공부하면서 처음 알게 되었다.

SSG는 빌드 시점에 HTML을 생성하는 방식이다.

웹 애플리케이션을 처음 한 번 빌드를 하고, 이후 변경 사항이 있을 때 다시 빌드 된다.

➡️ 그래서 초기로딩 속도가 빠르고 SEO에 용이하다는 CSR과 SSR의 장점을 모두 지니고 있다. 이러한 특징으로 보아, 정적 페이지, 블로그, 간단한 회사 페이지와 같이 변화가 잘 일어나지 않는 웹사이트에 적합하다.

---

그렇다면, 이 세 가지 방법을 어떻게 사용할 지 알아보고 어떤 방식을 선택하는 것이 최고의 웹을 제작할 수 있는지 알아보자.

 

1. CSR 사용법

CSR은 SPA와 같은 웹 애플리케이션에 적합하다. 따라서 CSR을 사용하려면 SPA 방식의 프레임워크 혹은 라이브러리를 사용해야 한다는 점을 강조하는 것이 좋다

서버에서는 클라이언트가 필요로 하는 최소한의 리소스만 전달해주고, 클라이언트는 그 이후 데이터를 가져오기 위해 REST API, GraphQL을 사용할 수 있다

2. SSR 사용법

SSR은 서버측에서 페이지를 동적으로 생성한다. 따라서 이를 사용하려면 백엔드 프레임워크인 Node.js, Django, Ruby on Rails 등을 사용하는 것이 일반적이다.

그림에서 보이는 것처럼, 서버에서 HTML파일을 생성하여 클라이언트에 전달하고, 데이터를 가져와 HTML을 생성하는데 쓰이는 템플릿 엔진을 사용한다.

3. SSG 사용법

SSG는 빌드 시점에 HTML을 생성하는 방식이다. 따라서 이를 사용하기 위해서는 정적 사이트 생성기인 Next.js, Gatsby, Hugo 등을 사용하는 것이 좋다.

그림에서 보이는 것처럼, 미리 생성된 HTML파일을 저장하고 클라이언트 요청이 들어왔을때 파일을 전달하고, 데이터는 REST API, GraphQL를 통해 가져올 수 있다.

SSG은 단순히 정적인 HTML 파일을 제공한다.

---

그렇다면 어떤 렌더링 방식을 사용하는 것이 우리에게 유리할까?

이는 초기 렌더링과 그 이후 렌더링으로 나눠질 수 있다.

 

초기렌더링에는 SSR방식이 유리하다. 왜냐하면 서버 측에서 페이지를 완전히 렌더링하여 클라이언트에게 전달하기 때문에, 초기 로딩 속도가 빠르고 검색 엔진 최적화(SEO)에도 유리하다.

 

따라서, 초기 렌더링이 중요한 경우에는 SSR을 사용하는 것이 좋다.

그 이후 렌더링 에서는 SSR에 비해 CSR이 더 유리하다. 왜냐하면, 초기 로딩시에 모두 데이터를 가져왔기 때문에 서버와 요청을 주고 받을 일이 없기 때문이다.

---

 

그런데, 나는 궁금증이 하나 생겼다.

SSG 방법은 CSR과 SSR의 장점을 가지긴 했지만 정적인 페이지를 만들때 적합하다.

 

만약 우리가 검색엔진 최적화(SEO)에 용이하면서도, 초기로딩 속도를 빠르기도 하면서 동적인 요소의 처리에 유리한 웹을 제작하고 싶다면, 우린 어떤 방법을 사용해야하는 걸까?

아님, CSR과 SSR을 결합해서 사용할 수는 없을까?

 

궁금에서 찾아본 결과 CSR과 SSR을 결합하여 사용할 수 있는 방법이 있었다. 그것을 바로,

Hybrid Rendering 이라고 부른다.

+) Hybrid Rendering

Hybrid Rendering은 초기 로딩 시 SSR을 사용하여 페이지의 빠른 로딩과 SEO를 보장하고, 이후 CSR을 사용하여 페이지의 인터랙션 등 동적인 요소를 처리한다는 점이 특징이다.

➡️ 사용자 경험(UX)를 향상 시키기 위해 적용하는 경우가 많다.

 

그렇다면 우리가 Hybrid Rendering은 어떻게 사용할 수 있을까?

➡️ SSR을 이용해 최초 렌더링한 HTML 페이지에서 CSR을 사용해 페이지의 동적인 요소를 렌더링하도록 설계해야 한다. 이를 위해 서버 측에서 렌더링된 HTML 페이지에 필요한 JavaScript 파일과 데이터를 포함시켜 클라이언트 측에서 이를 실행하는 방법 등이 사용될 수 있다.

 

하지만, Hybrid Rendering은 서버측과 클라이언트 측의 모든 구현이 필요하고, 복잡도가 높아질 수 있다는 단점이 있다. 그래서 우리는 사용할 기술 스택, 프로젝트 요구 사항 등에 맞게 적절한 렌더링 방식을 활용하는 것이 필요하다.