CSR, SSR 그리고 SSG는 무엇인가?

CSR, SSR 그리고 SSG는 무엇인가?

 

안녕하세요.

오늘은 CSR, SSR 그리고 SSG에 관해서 알아보도록 하겠습니다.

개발을 하다 보면 필연적으로 CSR, SSR 그리고 SSG에 관해서 들어보게 될 것입니다.

오늘은 이에 관한 내용을 짧고 쉽게 알아보도록 하겠습니다.

 

 

1. CSR이란?
2. SSR이란?
3. SSG이란?
4. 마무리.

 

 

CSR이란?

CSR은 Client Side Rendering의 줄임말입니다.

이는 클라이언트 즉 사용자 더 쉽게 말하자면 사용자가 사용하는 브라우저에서 모든 일들이 이루어진다는 것입니다.

 지금까지 홈페이지에 접속할 때 사용되는 가장 보편적이고 잘 알려진 방법으로써 클라이언트는 서버로부터 필요한 모든 자바스크립트 파일을 다운로드하게 됩니다. 이때 로직에 필요한 파일들뿐만 아니라 프레임워크 혹은 라이브러리를 구동할 때 필요한 모든 파일을 서버로부터 다운로드한 뒤  렌더링을 하여 마지막에 사용자에게 페이지를 보여주는 것입니다.

이는 가장 쉬운 방법이지만 브라우저가 다운로드 받아야하는 파일들이 크기 때문에, 사용자에게 보여주기까지의 시간이 꽤나 소요된다고 할 수 있습니다.  

대표적인 CSR의 단점을 꼽아보겠습니다.

하나는 앞서 말씀드린 다운로드 받아야하는 파일들이 크다는 것입니다. 즉 사용자가 처음 페이지를 접속하여 렌더링이 완료된 페이지를 보기까지 시간이 오래 걸린다는 것입니다. 

 

두 번째는 SEO에 그다지 적합하지 못하다는 것입니다.

브라우저는 서버로부터 거의 비어있는 html파일을 다운로드하게 되고 모든 파일들이 다운로드되었을 때 스스로 홈페이지에 필요한 내용들을 렌더링 하여 사용자에게 보여주게 됩니다. 그렇다면 이게 왜 SEO와 관련이 있을까요?

그 이유는 바로 구글봇과같은 크롤러가 알 수 있는 정보들이 적기 때문입니다. 우리 클라이언트는 거의 비어있는 html을 서버로부터 받았고 클라이언트에서 스스로 필요한 내용들을 구현했습니다. 이때 홈페이지의 소스코드를 살펴본다면, 흥미로운 부분이 있다는 것을 알 수 있으실 겁니다. 분명 홈페이지에는 정확하게 표현되는 정보들이 소스코드에는 들어있지 않기 때문입니다.

이때 구글봇과같은 크롤러는 소스코드를 읽고 내용을 분석하게 되는데, 당연히 소스코드에는 모든 내용이 담겨있지 않기 때문에, 크롤러가 분석하고 알 수 있는 내용들이 적을 수밖에 없습니다.

 

 

SSR이란?

 

이러한 부분을 보안하기위해서 발전된 모습이 바로 SSR Server Side Rendering입니다.

말 그대로 서버에서 지지고 볶고 다 한 다음 클라이언트에게 주는 것을 말하는 것입니다.

그렇다면 당연히 클라이언트에서 다운로드 받아야하는 파일들이 크게 줄어들게 될 것이고, 다운로드한 파일들을 통해서 라이브러리 혹은 프레임워크와 같은 무거는 내용들을 구현하지 않고 곧바로 서버에서 받은 내용을 사용자에게 보여주기 때문에, 페이지를 로드하는 시간도 크게 줄어들게 됩니다. 그리고 또한 모든 필요한 내용들이 서버에서 작업되어 클라이언트에게 넘겨지게 되니, 구글봇과 같은 크롤러들이 알고 분석할 수 있는 내용들이 크게 늘어나게 되며 이는 곧 검색엔진과 같은 부분의 최적화를 가져올 수 있게 됩니다.

 

그렇다면 모든 부분을 CSR에서 SSR로 옮기면 좋을까요??

그런 것은 또 아닙니다.

모든 부분을 SSR로 구현하는 것도 무리가 있을뿐더러 항상 홈페이지의 내용들이 서버에서 모든 기능을 갖춘 후 클라이언트로 넘겨지기 때문에 트래픽이 많아진다면 서버가 이를 버티지 못할 가능성도 있습니다.

또한 SSR로 홈페이지를 구현하더라도 로그인 혹은 검색과 같은 사용자의 input을 받아서 처리하는 부분들은 여전히 CSR로 사용되게 됩니다. 그리고 이러한 서버의 과부하의 위험을 덜어 줄 수 있는 것이 바로 SSG입니다.

 

 

 

SSG이란?

 

SSG이란 SSR과 거의 유사합니다.

SSG는 Server Side Generation의 약자입니다.

우리가 요즘 사용하는 홈페이지들은 모두 동적인 홈페이지들입니다. 하지만 이러한 뜻은 100% 모든 부분들이 동적이라는 것은 아닙니다.

많은 홈페이지들이 정적인  내용들을 보여주는 경우가 많습니다. 즉 바뀌지 않거나 많은 변화가 없는 페이지들을 말합니다.

이러한 페이지들은 다른 사용자가 방문하더라도 똑같이 구현되어 보여야 합니다. 이러한 페이지들을 서버에서 굳이 SSR을 통해서 새롭게 구현하고 클라이언트에게 줄 필요는 없을 것입니다. 이는 오히려 서버에게 불필요한 작업을 만들게 됩니다.

이러한 부분을 개선할 수 있는 것이 SSG입니다.

SSG는 말하자면 서버가 미리 그 페이지의 내용을 저장하고 가지고 있다가 그대로 클라이언트에게 주는 것과 같습니다.

즉 서버는 그냥 파일을 클라이언트에게 전달만 할 뿐 새롭게 구현할 필요는 없다는 뜻입니다.

이는 당연히 서버에서 이루어져야 하는 작업을 줄일 수 있기 때문에 훨씬 효율적이고 더 빠를 것입니다.

 

Next.JS를 공부하시거나 사용하시다 보면 자연스럽게 듣는 것이 이 3가지 CSR, SSR 그리고 SSG일 것입니다.

이때 공식 문서를 보면 Next.JS 또한 기본값으로 SSG를 지원한다는 것을 알 수 있습니다.

그리고 필요에 따라 SSR 혹은 CSR을 이용할 수 있습니다.

 

 

마치며.

 

오늘은 짧게 CSR, SSR 그리고 SSG에 관하여 알아보았습니다.

당연히 더 깊게 파고들겠다 하면 각자의 수많은 장점과 단점들이 존재할 것이고 어떻게 유기적으로 사용되는지 알 수 있을 것입니다.

CSR이든 SSR이든 무조건 하나는 좋고 하나는 나쁜 것이다 혹은 하나는 모던한 방법이고 다른 하나는 올드한 방법이다라고 단정 지을 수는 없습니다. 결과적으로 각자의 방법으로 모든 100%를 사용할 수 없기 때문입니다.

SSR와 SSG에 관심이 있으시다면 Next.JS를 사용해보시는 것을 강력하게 추천드립니다.

또한 이번에 Next.JS 13이 등장하면서 SSR과 SSG를 사용하는 방법이 더욱더 쉽고 직관적으로 바뀌었습니다.

 

오늘도 제 블로그를 방문해 주셔서 감사합니다!

꾸준히 개발 공부 열심히 하시기 바라겠습니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbeiretung ist das Gleiche, wie nie anzufangen.