ServerSideRendering vs ClientSideRendering

최근 Next.js를 도입하는 기업들이 많아졌다. 그 이유는 뭘까?

 

나는 당연코 Server Side 방식의 지원이라고 생각한다.

 

그러면 Server Side는 무엇일까?

 

먼저 Server Side를 살펴보기 전에 이와 상반되는 개념인 Client Side Rendering (이하 CSR)에 대해서 알아볼 필요가 있다.

 

Client Side Rendering (CSR)

CSR은 말그대로 클라이언트 측에서 렌더링이 시작되는 개념이다. 

 

즉 클라이언트가 페이지에 들어오고 브라우저는 이를감지하고

HTML 다운로드 => JavaScript 다운로드 => JavaScript 실행 => Data 호출 => 화면 노출 의 순으로 렌더링이 진행된다. 

 

간단하게 요약하면 

• 클라이언트가 그린다
• 그린다? : 데이터를 가져와서 그린다
• 클라이언트가 그린다 : 클라이언트가 데이터를 가져와서 그린다.

위와 같이 표현을 할 수 있다.

 

그럼 이와 같은 CSR에서 최근 SSR을 왜 기업들이 많이 사용하기 시작했을까? 

 

분명 CSR도 장점이 많은 방식이다. 

 

그럼에도 불구하고 많은 기업들은 ServerSideRendering(이하 SSR)을 적극적으로 사용하기 시작했을까? 

 

1. CSR의 경우 웹페이지를 노출해주기 위해 크롤링을 진행하는 Googlebot과 SearchConsole에 검색 노출이 되지 않는다. 

 

2. 유저가 페이지에 입장했을 때 JavaScript 코드를 읽고 화면을 그리는 시간까지 지나고 나서야 사용자에게 화면이 노출되기 시작하기 때문에 유저는 초기 입장시 불편함을 겪을 수 있다. 

 

그럼 SSR의 경우 동작을 어떻게 할까?

 

그리고 어떤 장점들이 있어서 사용하는거고 위의 문제점들의 대안으로 사용될 수 있을까?

Server Side Rendering (SSR)

SSR은 말그대로 유저가 페이지에 진입을 함과 동시에 서버에서 렌더링을 진행한다. 즉 Client Side에서 읽고 다운받아야하는 파일들이 Server에서 전부 처리되서 넘어오게 된다. 

 

그리고 SSR의 경우 최초에 HTML을 먼저 보여주고 서버에서 화면에 그려질 준비가 끝났을때 화면을 채워주기 때문에 유저는 우선 HTML로 구성된 페이지를 먼저 볼 수 있게 된다. 

 

즉 CSR과 다르게 유저가 처음 진입해서 페이지를 일단 볼 수 있는 점이 CSR과의 차이점 중 하나이다. 

 

그리고 장점으로는 CSR의 단점이였던

 

1. Search Engine Optimization(SEO) 검색엔진 최적화 제공. (웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 방법)

2. 빠른 초기 로딩 속도 

 

위와 같은  장점들을 가지고 있다.

 

SSR을 정리해보자면. 

 

SSR

• 서버가 그린다 
• 그린다? : 데이터를 가져와서 그린다
• 서버가 그린다 : 서버가 데이터를 가져와서 그린다.