[Web] 서버 사이드 렌더링 & 클라이언트 사이드 렌더링

**사소한 주절주절.. 본문은 이 단락 바로 밑에 있다!

내가 맨 처음 시작한 웹은 jsp 였다. 그 후에 순수 html, css, javascript로 (서버 없이) 페이지 만들어보다가 React+nodejs로 제대로 된 웹 페이지들을 구현했었다.

그런데 jsp로 웹 공부를 할 때, 당시에는 학교 과제가 급급해 어떻게 만드는지만 공부했었지 이게 어떻게 돌아가고 브라우저에서 어떻게 렌더링 되는지 관심을 가지지 않았었다.

이후에 React를 공부하면서(이 때 쯤에 이것저것 하다가 웹이 제일 재밌네! 하고..) 이런 과정에 관심을 가지고 공부하기 시작했다. 그런데 이게 정리를 안하니까 자꾸 그때그때 찾아보게되어서 ㅠㅠ 시간 아까워서 정리하는 글!!

 

---

들어가기에 앞서..

서버사이드 렌더링과 클라이언트 사이드 렌더링의 가장 큰 차이는 "렌더링을 해주는 위치"에 있다.

 

서버사이드는 서버에서 HTML 렌더링된 결과를 브라우저로 전달해주고(브라우저는 렌더링 된 결과를 띄워만준다),

클라이언트 사이드는 View를 브라우저에서 렌더링해준다.

 

| 서버 사이드 렌더링(Server-side Rendering)

SSR은 서버에서 HTML 렌더링 된 결과(= 완성된 웹 페이지)를 브라우저로 전달해준다. 그래서 사용자가 새로운 url로 이동하여 새로운 웹페이지가 필요할 때, 서버에서 해당 url의 모습에 맞는 웹 페이지를 다 그려준 후에 브라우저로 내려준다.

 

장점

검색엔진 최적화 가능

- 이미 완성된 HTML이 내려오기 때문에 검색 엔진/크롤러는 웹페이지에 방문하면 HTML을 보고 tag 등을 읽어가기가 수월하다.

초기 페이지 로딩 속도가 느리지 않다.

 

단점

새로고침이 발생하여 사용성이 저하된다.

- 페이지 이동할 때 마다 서버에서 완성된 HTML 새로 받아오므로, 새로고침(깜빡이)가 발생한다.

중복된 로딩 발생

 

| 클라이언트 사이드 렌더링(Client-side Rendering)

최초 페이지 로딩때만 서버로부터 리소스(HTML, CSS, JS)를 받아온다. 그 이후의 사용자의 요청에 따라 새로운 데이터를 가져올 때만 서버와 통신하고, View의 렌더링은 클라이언트에서 담당한다.

 

eg. 페이지 이동 시, 그려줄 데이터가 필요하다 -> 서버에 데이터 요청 -> 서버가 데이터를 내려주고(보통  JSON) -> 클라이언트는 해당 데이터를 받고 새로운 View를 그려준다

 

장점

초기 로딩 이후 페이지 반응이 빠르다

페이지 이동이 자연스럽다.(깜빡이 현상 X)

개발시 생산성이 증가된다

- 프론트의 경우 컴포넌트 별로 개발이 가능해지고, API는 데이터만 제공하기 때문에 모바일 APP으로 확장시에도 API를 그대로 가져가 쓸 수 있다.

 

단점

초기 로딩 비용이 크다

- 번들링 된 JS를 받아오느라 느려지는 경우가 있다. => webpack의 code splitting으로 해결 가능하다.

검색 엔진 최적화가 힘들다

- 대부분의 웹 크롤러는 JS를 실행하지 못하기 때문에 검색 엔진 최적화가 힘들다.(구글의 크롤러는 JS를 실행할 수 있다고 한다. 그러나 기타 다른 곳들은..)

보안 문제가 있다

- SSR의 경우 서버에서 관리하는 보안(세션 등)을 CCR에서는 클라이언트 측에서 관리해줘야하기 때문이다.