React에의 서버사이드렌더링(SSR) vs 클라이언트사이드렌더링(CSR)

최근에 next.js를 시작하며, 

기존의 클라이언트렌더링 방식과 서버사이드렌더링의 방식은 어떤 차이가 있는지 적어두기로 했다.

웹 개발자라면  ssr과 csr방식이 어떻게 돌아가고 있는지 정도는 알아야 할 필요가 있다고 생각한다.

기존의 렌더링 방식(SSR) 

전통 방식인 서버사이드렌더링의 동작은 다음과 같다.

 

1)브라우저에서 프론트서버로 부터 페이지를 요청한다.

2)프론트서버는 브라우저에 그려주어야 하는 데이터를 백엔드서버로 요청한다.

3)백엔드서버는 데이터베이스로 부터 데이터를 가져온다.

4)백엔드 서버는 가져온 데이터를 프론트서버로 전송한다.

5)프론트서버는 백엔드서버에서 받은 데이터를 가지고  html과 합쳐 브라우저에 전송한다.

 

전통적인  ssr 방식이 불러일으킨 이슈

하지만 이런 전통적인  ssr방식은 이슈를 불러 일으켰다.

페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링 하는 방식이기 때문이다. 

이것은 사용자와 인터랙션이 많은 요즘 웹앱에게 충분하지 않는 방법일 수 있다. 렌더링을 서버쪽에서 하는 것은,

그 만큼 렌더링을 위한 서버 자원이 사용되는 것이고, 불필요한 트래픽도 낭비되는 것이다.

 

SPA에서의  CSR

1)브라우저가 프론트서버로 페이지요청을 한다.

2)프론트 서버는  html,css,js,img 정도의 파일만을 브라우저로 넘긴다.

3)현재 데이터는 없고 html,css,js  등으로만 이루어진 사이트가

데이터 없이 (보통은 이런경우 로딩창을 띄움) 그려진다.

4)이때 브라우저는 데이터를 백엔드서버 로 직접 요청한다.

5)백엔드서버는 요청받은 데이터를 데이터베이스로부터 가져와 브라우저로 바로 응답한다.

 

SEO를 생각한  React에서의  SSR

리액트는 CSR 방식으로 자칫하면 검색엔진에 의해 우선순위가 밀려날 수 있다.

첫화면에 로딩창부터 띄우는 SPA에서의 CSR방식을 사용하는 사이트는 검색엔진이 콘텐츠가 없는 사이트라 생각하여 우선순위에 밀린다는 것이다.

이를 위해  SPA 에서는 기존  CSR방식은 유지한채  첫 로딩 시에만  SSR 방식을 사용하여 검색엔진최적화를 시키는 방안이 도입됐다.  

그리고 이를 편리하게 해주는  next.js가 등장한 것이다!

 

 

그렇다고 모든 사이트가 검색엔진을 최적화할 필요는 없다!

어드민 페이지 같은경우는 사실  SEO 가 큰의미가 없다.

 

뭐든 개발할때 내가 이걸 왜 쓰는지 뭐가 필요해서 쓰는지 잘 생각하고 사용하길 바란다.