[Frontend] SSR과 CSR

in Devstudy / Devstudy
[Frontend] SSR과 CSR

Server Side Rendering Client Side Rendering

SSR, CSR이 뭔가요?

렌더링은 웹사이트 코드를 사용자가 보게되는 페이지로 바꾸는 절차를 말한다.
렌더링이 되는 주체가 누구인가에 따라 SSR, CSR로 나눌 수 있다.

SSR - Server Side Rendering

미리 서버에서 렌더링해서 렌더링 된 결과(data가 결합된 HTML 문서)를 가져오는 방식이다.
클라이언트는 만들어진 HTML 문서를 사용자에게 보여준다.
MPA에서 주로 사용되는 방식으로 react의 Next.js, vue의 Nuxt.js라는 라이브러리가 대표적이다.

React 18 에서는 dependency를 줄이기 위해 next.js를 대신 server-component로 자체적으로 SSR을 지원한다고 한다.

장점

페이지 로딩이 비교적 빠르다.
SEO 성능이 좋다.

단점

요청이 생길 때마다 불필요한 부분까지 렌더링되어 서버 부하의 문제를 일으킬 수 있다. 또한, 새로고침과 함께 화면이 없어졌다가 다시 나타나기 때문에 UX적으로 좋지 않다.
HTML 파일을 바로 가져와 사용자는 사이트를 바로 볼 수 있지만, js 파일은 아직 받아오지 않아 TTI가 되어야 인터랙션이 가능해진다. 즉, 사용자가 사이트를 볼 수 있는 시간(TTV)과 실제 인터랙션이 가능한 시간(TTI) 간의 차이가 있어 각종 이벤트에 반응이 없는 상황이 벌어질 수 있다.

CSR - Client Side Rendering

서버에서 전체 페이지를 한 번 렌더링하고, 사용자의 요청이 생길 때 마다 서버에서 데이터를 제공받아 클라이언트가 렌더링하는 방식이다. SSR과 다르게 브라우저에서 자바스크립트로 콘텐츠를 렌더링한다.

<html>
  <head>
    <title>client side rendering</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="app.js"></script>
  </body>
</html>

처음 접속하면 서버에서 위와 같이 빈 화면의 index.js를 보여주게 되고, 링크 되어 있는 자바스크립트를 다운로드 받는다.
이 때 로직, 라이브러리의 소스코드 등 데이터를 제외한 코드들이 js 파일에 한번에 번들되어 들어와 처음에 다운 받는데에 시간이 좀 걸릴 수 있다.
그 이후 클라이언트 요청이 발생하여 데이터가 필요하면 서버에 요청하여 데이터만 받아와 클라이언트에서 동적으로 화면을 구성하여 보여주게 된다.
SPA에서 주로 사용되는 방식이다.

장점

처음을 제외하고는 좋은 UX를 제공한다.
필요한 데이터만 서버에서 가져오기 때문에 서버 부하가 적다.

단점

맨 처음 렌더링이 느리다.
SEO에 약하다.

SSG - Static Site Generation (Static Rendering)

서버에서 HTML을 가져오는 방식은 SSR과 동일하지만, 요청과 함께 만들어져 데이터가 달라지기 때문에 미리 만들어두기 어려운 페이지에 적합한 SSR과는 달리 서버에 페이지를 모두 만들어두고 요청 시에 페이지를 보여주는 것이므로 페이지 내 변경 사항이 거의 없는 페이지에 사용된다.
react의 Gatsby와 vue의 VuePress라는 라이브러리가 대표적이다.

SEO(검색 엔진 최적화)란?  
필요한 정보에 대해 구글링을 했을 때, 원하는 정보가 보통 상위 순서에 존재한다.  
이를 가능하게 하는 것이 SEO다.  
검색 엔진은 페이지들을 돌아다니며 페이지의 내용을 분석하고 해당 웹사이트의 정보를 검색엔진에 등록한다.  
이렇게 원하는 정보가 들어있는 페이지를 빠르게 분석할 수 있고, 이 프로세스가 잘 진행되도록 하는 것을 SEO라고 한다.  

CSR은 처음에 빈 껍데기의 html로 이루어져있기 때문에, 페이지의 요소들을 크롤링하여 최적화를 하는 SEO가 까다로운 것이다. 

그래서 SEO의 성능을 높이기 위해선 동적인 데이터 교환이 있다면 SSR, 정적인 데이터를 기반으로 한다면 SSG를 사용하는 것이 좋을 것이다.

마치며

기본적으로 SSR과 CSR의 개념에 대해 간단하게만 알고 있었는데 이번 공부를 통해 SEO와 엮어서 생각할 수 있었다.

그리고 첫 렌더링은 SSR, 이후 렌더링은 CSR으로 섞어서 사용하는 방법이 있다고 한다.
하지만 FE 서버는 node.js로, BE 서버는 python/django로 작성되어야 하는 제약사항이 있다고 한다. 필요하다면 이러한 방식을 사용하는 것도 좋을 것 같당.
개발을 시작하기에 앞서 여러 문제들을 고려하여 가장 유리한 렌더링 방식을 택하는 것이 중요할 것 같다.